Member Avatar

Does anyone know of an easy way to have an image switch to another image when the cursor hovers over a completely separate image?
Here is a diagram that hopefully illustrates more clearly what I'm trying to say.

Member Avatar

Try this on the page not on the css. I will give you the complete code I used.

<Img border=“0" id="img1" src="your location for the primary image" height="30" width="100" alt="Name of your image" onMouseOver="FP_swapImg(1,0,/id/'img1',/url/'"your location for the image you want to replace the current image"')" onMouseOut="FP_swapImg(0,0,/id/'img1',/url/'"your location for the image you want to display when the mouse move off the image"')>

Note that where I putted '""' you will leave the ' and replace the " with the location and also that is the code I used on my menu so if you are working with a big image you can adjust the size using the height and width.

Hope this will help you. Sorry for not formating the codes I'm using mobile

Member Avatar

You can get this done with a few lines of javascript.

If you provide your relevant HTML, it would be easier to help.

Member Avatar

Thanks everyone for the suggestions. Unfortunately I was unable to figure out how the suggestions would fit into my template. I think I found a work around though. Thanks again!

Member Avatar

You can do this easity by taking background image as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.hover_me
{
background:url(1.png) 0 0; 
width:237px; height:110px;
}
.hover_me:hover
{
background:url(1.png) 0 110px; 
width:237px; height:110px;
}
</style>
</head>

<body>
<div class="hover_me">
</div>
</body>
</html>

I have attached image for that.

1.png 5.63 KB
Edited by Reshma_1: attaching image