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.
lonrat
0
Newbie Poster
Recommended Answers
Jump to PostTry 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 …
Jump to PostYou can get this done with a few lines of javascript.
If you provide your relevant HTML, it would be easier to help.
All 7 Replies
Mr.M
58
Future Programmers
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
958
Problem Solver
Team Colleague
Featured Poster
You can get this done with a few lines of javascript.
If you provide your relevant HTML, it would be easier to help.
iamthwee
lonrat
0
Newbie Poster
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
58
Future Programmers
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.
Reshma_1
0
Newbie Poster
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.
Reshma_1
0
Newbie Poster
attachin image
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.