Image Preview with JavaScript and HTML

If you have an image and want to load a preview image or gif you could use two solution.

Html Option :

Line 2: set default image

Line 3: on mouse over load my preview gif

Line 4: on mouse out event load the default image

<img
src="default_image.jpg"
onmouseover="preview.gif"
onmouseout="default_image.jpg"  
>

JavaScript Option :

Sometimes you get something like this ‘http://www.exampl.com/image1.jpg,http://www.exampl.com/image2.jpg’ and you want to use it as a preview.

Line 2 and 3 are calling the JavaScript Function.

Line 4 is set by the JavaScript.

<img id="img_25" width="166" height="125" 
onmouseout="TR.stop('img_25','http://www.exampl.com/image1.jpg,http://www.exampl.com/image2.jpg')" 
onmouseover="TR.run('img_25','http://www.exampl.com/image1.jpg,http://www.exampl.com/image2.jpg')" 
src="http://www.exampl.com/image1.jpg">

Use this Call to set the Default image, the first Parameter is the ID and the second the array.

TR.dev('img_25','http://www.exampl.com/image1.jpg,http://www.exampl.com/image2.jpg');

This is the JavaScript Object to handle the Preview.

TR : change the image with the time-out from 400ms.

run: get the element,split the array,time-out and then change the image.

stop: time-out and then load the first image of the array.

dev:loads the default image

var res,elm;
TR = {timer : null,
chg : function (i){
i++;if(i >= res.length){i=0;}
elm.src = res[i];
this.timer = setTimeout(function (){TR.chg(i)}, 400);
},
run : function (id,images){
elm = document.getElementById(id);
res = images.split(",");
clearTimeout(this.timer);
this.chg(0);
},
stop : function (id,images){
clearTimeout(this.timer);
elm.src = res[0];
},
dev : function (id,images){
res = images.split(",");
document.getElementById(id).src=res[0];
}
};