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
|
1 2 3 4 5 |
<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.
|
1 2 3 4 |
<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.
|
1 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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]; } }; |
Have you ever considered about adding a little bit
View Commentmore 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!
This is a very good tip particularly to those new to the blogosphere.
View CommentSimple but very precise info… Thanks for sharing this one.
A must read article!
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
View Commenttoo.
This article is truly a pleasant one it helps new the
View Commentweb visitors, who are wishing in favor of blogging.
You should be part of a contest first of the best websites on the net.
View CommentI will highly recommend this website!