...

View Full Version : On Mouseover, change image.



prwels
07-22-2002, 12:51 AM
Okay, I have been looking for a code that changes the image upon mouse-over, that is easy to use, and works in all browsers. This is needed for 5 images on the same page.

Can anyone help me?

Thanks in advance.

-prwels

bcuria
07-22-2002, 02:20 AM
I just had this assignment in school. First, you need to preload images by storing them in a new image array. Also, if you are going to include a message in the status bar on mouseover, you need to create a variable for the status. (I listed those first.)

Next, the imgOn() and imgOff() functions are what you will call on your mouseovers and mouseouts.

Finally, make sure that your html image links have names that match those you used for you image object array and status variables (i.e., if your image is img1ON.gif, your status message should be img1Status. See the html code below this script.)

<script language="JavaScript">
<!-- hide

var img1Status = "Click here to return to my list.";
var img2Status = "Click here for a dropdown list and scrolling messages.";

if (document.images){
var img1ON = new Image();
img1ON.src = "images/img1ON.gif";

var img1OFF = new Image();
img1OFF.src = "images/img1OFF.gif";

var img2ON = new Image();
img2ON.src = "images/img2ON.gif";

var img2OFF = new Image();
img2OFF.src = "images/img2OFF.gif";
}

function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "ON").src;
}
status = eval(imgName + "Status");
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "OFF").src;
}
status = "";
}
// -->
</script>

--------------------------
Then, in the body:

<body>
<A HREF="http://www.<yourlink>.com"
onMouseOver="imgOn('img1'); return true;"
onMouseOut="imgOff('img1')">
<IMG SRC="images/img1OFF.gif" NAME="img1">
</A>
<BR>

<BR>
<A HREF="http://www.<yourotherlink>/index.htm"
onMouseOver="imgOn('img2'); return true;"
onMouseOut="imgOff('img2')">
<IMG SRC="images/img2OFF.gif" NAME="img2" >
</A>

</body>

prwels
07-22-2002, 02:24 AM
thank you.:thumbsup: I am going to go set it all up...

Thanks again.

bcuria
07-22-2002, 02:31 AM
Also, I found that I had difficulty getting the images to preload properly, although the script I sent you supposedly takes care of that. The way I got mine to work was to include this script right after the one I just gave you:

<script language="JavaScript">
<!-- hide

preload("img1", "img1OFF.gif", "img1ON.gif");
preload("img2", "img2OFF.gif", "img2ON.gif");

// -->
</script>

prwels
07-22-2002, 10:34 PM
Thank you SO MUCH! I tried it out and it works perfectly. Thanks again.

-prwels



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum