Develop Reference

js code to dynamically set the width and height of the image before using/loading in other areas of the application

I am displaying the below div content which has tables,images and some more html elements on the webpage(I'm getting the div content from the data base which i am showing on the webpage).
<div class="appDiv">
<div> <h1><font color="red"> Title here</font></h1> </div>
<table><tr><th>Header1</th><th>Header2</th></tr><tr><td>one</td><td>two</td></tr></table>
<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2w..............Z0auj5MNqRUIfYT7C/cEhSmGlRdn6/wDrACwSw+eV/u/bvuN0D/TZZTeE8Sdtooj7/wB5Q6C/DTrP/9k=" data-filename='image.png' style='width: 1081.05px; height: 512.635px;'>
</div>
I want to use the above mentioned content in other areas of my application, but issue is i need to reduce the width and height of the image due to place restriction.I want to change the width and height of the image dynamically before i use the above code in other parts of my application.
js code:
Below code is called when user is exporting the above div content to other parts, here i need to change the width and height of any of the image shown in the div
function($scope) {
$scope.loadWebContentInOtherArea= function() {
}
}
The <img> tag shown above doesn't have the class name or the id to set the width and height before loading on other parts of the web page.How can i set dynamically the width and height of the image when it doesn't have any class name or ID assigned to it.
Please see the <img> tag, it has defined style='width: 1081.05px; height: 512.635px;'

How can i set dynamically the width and height of the image when it
doesn't have any class name or ID assigned to it.
Since you are...
displaying the below div content
and your div has a class, you can call each div element and find each img element and set the dimensions.
var imgEl = document.querySelector('.appDiv img');
imgEl.width = 100;
imgEl.height = 100;

The Javascript Code below should do what you are asking for.
var appDiv = document.getElementsByClassName("appDiv");
var img = appDiv[0].getElementsByTagName("img");
img[0].style.width = "100px";
img[0].style.height = "50px";
I could have written it in a more condensed way, but I wanted to break it down for you so here it goes.
The first line is selecting that Div with the class "appDiv". If you have more than 1 div with this class it will select them all and save them to an array.
The second line is selecting the img inside of the first instance of a div with the class "appDiv".
If you have multiple instances of this div you can change which div to target by changing the [0] after "appDiv[0]" on the second line.
Remember Javascript Arrays start at 0, so 0 is actually the first instance of your div. 1 would be the second instance and so on.
Now that you have your img saved in the "img" variable the 3rd and 4th lines set the width and height of your image programmatically.
Please let me know if this helps!
Edit, Just to show it this is my code wrapped in for loop to cycle through all the images in the document.
var appDiv = document.getElementsByClassName("appDiv");
for(i=0;i<document.getElementsByClassName("appDiv").length;i++){
var img = appDiv[i].getElementsByTagName("img");
img[0].style.width = "100px";
img[0].style.height = "50px";
}
The key here is using the "document.getElementsByClassName("appDiv").length" snippet on the second line. This makes the loop go on as many times as a div with this class is found in the document. Hope this helps!
Seeing that the source code of the project has each image contain the class "image-responsive" you could also use this code below.
var imagesToResize = document.getElementsByClassName("image-responsive");
for(i=0;i<imagesToResize.length;i++){
imagesToResize[i].style.width = "100px";
imagesToResize[i].style.height = "100px";
}

4 Images in HTML, need help to show the small picture when hovered in the large picture

So I have 3 Images in line in HTML, and a large one below, and the 1 large one below it is the same image as one of the top 3. No thumbnails or anything being used. All I want done is when I Hover over the first small image it should show and change the bottom image, and if I hover away it changes back to its original, and same with the 2 other photos when I hover the large pic at the bottom should should it.
Organized like(in html)
Pic1 pic2 pic3
Pic4(larger)
<img src="guitars.jpg" width="80" height="60" alt="Guitars">
<img src="control.jpg" width="80" height="60" alt="Control Room" onmouseover="">
<img src="singing.jpg" width="80" height="60" alt="Singing Room" onmouseover="">
<br>
<img src="guitars.jpg" width="400" height="300">

I'm going to give you an example with only two elements (with only a single one having the event functionality), in which then you can expand to 3 images. The basic idea is to change the src of the large image to the this.src of the image when hovered (in JS it's the onmouseover event). Then on onmouseout set the src back to it's normal image. If the original image is just the first small image simply set it to that <img> element. Otherwise keep track of it.
In the following example #main is the large image, #apple is the first small image and #banana the second small image.
// This gets the original src of the main (large image)
// That way when it's changed we can refer to this variable to revert it
var original = document.getElementById("main").src;
// On mouseover the "banana" image, that the src of the main image to src of the banana
document.getElementById("banana").onmouseover = function(){
document.getElementById("main").src = this.src;
}
// On mouseout of "banana" we change the main image back to it's original image
document.getElementById("banana").onmouseout = function(){
document.getElementById("main").src = original;
}
Fiddle Example

A simple solution would be to implement onclick or onmouseover event on the small images, and update the src value of the big image.
See this for reference: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
If you want to easily add more images in the future, then you might want a slider with custom pager.
If you are comfortable with jQuery, I recommend this plugin because it is fairly easy to use:
http://jquery.malsup.com/cycle2/
(Check out the carousel pager demo)
Good luck!

Try using css :hover , :nth-of-type() , :not() , general siblings selector
img:not(.lg) {
width:50px;
height: 50px;
}
img.lg {
width:160px;
height:160px;
background-image:url(http://placehold.it/160/ff0000/ffffff);
}
img:nth-of-type(1) {
background-image:url(http://placehold.it/50/ff0000/ffffff);
}
img:nth-of-type(2) {
background-image:url(http://placehold.it/50/00ff00/ffffff);
}
img:nth-of-type(3) {
background-image:url(http://placehold.it/50/0000ff/ffffff);
}
img:nth-of-type(1):hover ~ .lg {
background-image:url(http://placehold.it/160/ff0000/ffffff);
}
img:nth-of-type(2):hover ~ .lg {
background-image:url(http://placehold.it/160/00ff00/ffffff);
}
img:nth-of-type(3):hover ~ .lg {
background-image:url(http://placehold.it/160/0000ff/ffffff);
}
<img /> <img /> <img /> <br />
<img class="lg" />

Trigger change of image after dropping three objects

After dropping the top three boxes onto the car, I would like to change the car image.
Does anyone know a way where I can specify after all the boxes are dropped it triggers an event to change the car image?
HTML code for car image
<div id="car">
<img name="car" src="http://www.danconveys.com/wp-content/uploads/2014/04/car-complete_1.png" width="440" height="154" alt="">
</div>
#car {
position:absolute;
left:46px;
top:160px;
width:430px;
height:128px;
z-index:7;
}
Here is the image that I want it changing to:
http://www.danconveys.com/wp-content/uploads/2014/04/car_break.png
JS Fiddle: http://jsfiddle.net/dantest2014/9JTSQ/12/
Hope that someone can help!

Your JSFiddle looks almost correct. The two things you still need to do are (1) count the number of boxes dropped, and (2) trigger the new image.
Just add a counter to your drop function:
var NUM_BOXES = 4,
dropped = 0;
function drop (event, ui) {
if (++dropped === NUM_BOXES) {
$('#car > img').attr('src', '.../car_break.png');
}
}
One thing that may be a typo in your current jsfiddle, you're setting the src attribute on #car, but the image is inside that element. I've fixed that with the #car > img selector above.

Show bigger image on thumbnail's hover

For a list of images I have the urls for the squared thumbnail http://example.com/img1_thumb.jpg and for the original size (any proportion) http://example.com/img1.jpg. I'm showing the thumbnails in a grid and I'd like to show the original one when the user puts the mouse over a image in the grid. Maybe using a floating element, the target is the user can see the image in more detail and view the parts of the cropped in the thumbnail.
How can I do it? I'm a beginner with HTML/css/Javascript

There are lots of jQuery plugins that do this. Since you are a beginner I would recommend starting there. Here is an article with some different options. Here is an example of what you are looking for.

U can work without thumbnails..
for thumbnail
<img src="http://example.com/img1.jpg" class="compress"/>
on hover of the above show this one
$(".compress").hover(function(){
$(".image").show();
});
full image
<img src="http://example.com/img1.jpg" class="image"/>
css
.compress{
width:20%;
/*aspect ratio will be maintained*/
}
.image{
display:none;
position:absolute;
}
its not complete,but i think it might help

Use JQuery:
$(function() {
$('#thumbnails img').click(function() {
$('#thumbnails').hide();
var src = $(this).attr('src').replace('.png', 'Large.png');
$('#largeImage').attr('src', src).show();
});
$('#largeImage').hide().click(function() {
$(this).hide();
$('#thumbnails').show();
});
});
<div id="thumbnails">
<img src="thumbnail1.png">...
</div>
<img id="largeImage" src="">

Basically you can create a <div class="some_class"><img src="http://example.com/img1.jpg"></div> set it's display:none and then bind an event to the thumb div like this :
$(".thumb_class").hover(function(){
$(".some_class").show()
},
function(){
$(".some_class").hide()
}
Of course you can personalize every div . The second function let you to hide the div when the mouse is out of the thumb. Hope i was as clear as possible.

How to add images one on another image using javascript

I have small requirement: I need add image over(up) the another image through javascript. Please give me the suggestion!
function sampleImage()
{
document.getElementById('img1').innerHTML='<img src="C:\Users\rajasekhark\Desktop\assets\images\Cock.png" />';
}

You need to enclose the two images in a <div> and then use the following CSS attributes:
div {
position: relative;
}
​#img2 {
position: absolute;
top: 100px;
left: 100px;
}
See http://jsfiddle.net/C8hh4/
The second image must be a sibling of the first, it cannot be a descendent because that's not legal HTML. The <div> needs to have relative position otherwise #img2's absolute position will be calculated relative to the closest ancestor that doesn't have the default static position.
The value for top should be half of the difference between the outer image's height and the inner image's height, and likewise for the left / width.
If your content is static, calculate those values by hand. If it's dynamic, use JS to set the style:
var img1 = $('#img1')[0];
var img2 = $('#img2')[0];
var top = 0.5 * (img1.height - img2.height);
var left = 0.5 * (img1.width - img2.width);
$(img2).css({top: top, left: left});

You could use relative positioning.
Stack the images on top of each other and set position:relative;top:VALUE;
Value should be -HalfHeightOfBackgroundImage-HalfHeightOfForegroundImage.
Another approach whould be wrapping the foreground image in a div and setting the the background image as the background-image.

Why javascript? Of course, you could use a canvas and paint them over each other, but I would recommend simple CSS:
<img
style="padding: 20px 7px, background: url('/some/frame.png')"
src="/cock.jpg"
width="50px" height="40px"
/>
You might use a class for that, the inline style is just shorter.

You should do (I saw jquery tag):
$("#img1 img").first().prop("src", "C:\Users\rajasekhark\Desktop\assets\images\Cock.png");
And an advice: DO NOT use full path to your local disk ...

The jQuery option would be
$("#img1").prop("src","blahblah.jpg");
Although I don't really understand your question.
If you mean that you need to change the image on hover then perhaps this will help...
$("#img1").hover(
function () {
$(this).prop("src","newImage.jpg");
},
function () {
$(this).prop("src","originalImage.jpg");
});
EDIT:
OK...
What you need is a div with the green flashcard as the background image. And place the cock image in that div but set to display:none;
Then on hover just show the image of the cock.
$("#containerDiv").hover(
function () {
$(this).find("img").show();
},
function () {
$(this).find("img").hide();
});