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


JavaScript Option :

Sometimes you get something like this ‘,’ 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" 

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

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(",");
stop : function (id,images){
elm.src = res[0];
dev : function (id,images){
res = images.split(",");

5 thoughts on “Image Preview with JavaScript and HTML”

  1. Have you ever considered about adding a little bit
    more than just your articles? I mean, what you say
    is important and everything. Nevertheless think about if you added some great images or video
    clips to give your posts more, “pop”! Your content is excellent but
    with images and video clips, this blog could definitely be one of the best in its field.
    Excellent blog!

  2. This is a very good tip particularly to those new to the blogosphere.
    Simple but very precise info… Thanks for sharing this one.
    A must read article!

  3. Every weekend i used to pay a visit this site, for the reason that i want enjoyment, for the reason that this this site conations really good funny data

  4. This article is truly a pleasant one it helps new the
    web visitors, who are wishing in favor of blogging.

Leave a Reply

Your email address will not be published.

19 + 1 =