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.
Hover over 1 image and replace another?
0
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
0
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.
0
iamthwee 1,547 http://jsfiddle.net/ZgxV4/7/#update
Just replace the numbers with images i.e <img src='blah'>
0
lonrat 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!
0
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.
0
Reshma_1 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.
Edited by Reshma_1: attaching image
This topic has been dead for over six months. Start a new discussion instead.
Recommended Topics
