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.
Mr.M 32
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
JorgeM 966
You can get this done with a few lines of javascript.
If you provide your relevant HTML, it would be easier to help.
iamthwee 1,547
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!
Mr.M 32
Check these out. https://www.interspire.com/support/kb/questions/1011/HTML+Examples+%233%3A+How+To+Do+An+Image+Swap
www.dynamicdrive.com/forums/showthread.php?63552-Image-Change-using-mouseover
And a very nice example here: reference.sitepoint.com/html/event-attributes/onmouseover
helplogger.blogspot.nl/2012/05/create-rollover-image-effect-change.html?m=1
Hope you will get what you want here.
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.
attachin image