...

View Full Version : OnMouseOver onMouseOut with 3 images



Lisawynn
05-05-2004, 04:47 PM
Hello! I have created a mouseover/mouseout event using 2 images. I am not sure how to add a third image so the mouseover/mouseout event changes images in sequence each time the mouse is passed over the image and keeps cylcing in order. Would you use an array with a for loop counter for this process? Also, how would you call the function? I guess you would place the call in the mouseover where you would normally put the image to be called?
Thanks!

coothead
05-05-2004, 05:54 PM
Hi there Lisawynn,

Here is one way of achieving your cycling....


<script type="text/javascript">
//<![CDATA[
var i=0;
function swapImage(obj){
var images=new Array('image.gif','image1.gif','image2.gif','image3.gif');
obj.src=images[i];
i++;
if(i==images.length){
i=0;
}
}
//]]>
</script>


...and this will call the function....


<img src="image3.gif" alt="" onmouseover="swapImage(this);return false"/>


coothead

Lisawynn
05-05-2004, 07:31 PM
Thanks Coothead. It is working great.

coothead
05-05-2004, 07:44 PM
No problem.

You're welcome :D

coothead

hidemike
10-18-2009, 05:38 AM
the image changed and not looping for me.
I used the code like this

<script type="text/javascript">
//<![CDATA[
var i=0;
function swapImage(obj){
var images=new Array('http://www.codingforums.com/images/smilies/frown.gif','http://www.codingforums.com/images/smilies/confused.gif','http://www.codingforums.com/images/smilies/rolleyes.gif');
obj.src=images[i];
i++;
if(i==images.length){
i=0;
}
}
//]]>
</script>


<img src="http://www.codingforums.com/images/smilies/rolleyes.gif" alt="" onmouseover="swapImage(this);return false"/>

Philip M
10-18-2009, 08:13 AM
Do you have permission to hotlink to Coding Forums images? :(

"Inline linking (also known as hotlinking, leeching, piggy-backing, direct linking, offsite image grabs and bandwidth theft) is the use of a linked object, often an image, from one site into a web page belonging to a second site. The second site is said to have an inline link to the site where the object is located."

hidemike
10-18-2009, 02:40 PM
I will not hotlink those, I was just giving an example of how I use the code



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum