Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Change image when hovering over another image

Status
Not open for further replies.
anthonymel

anthonymel

Technical User
Jan 4, 2005
76
US
Ok I seen this done one alot on online stores. You see a color at the bottom of the image and you either click on it or hover over it to change the image without reloading the page. Where can I find code on how to do this properly in either IE and Mozilla? Is this type of hover possible in CSS?

Thanks a lot

Anthony
 
Sort by date Sort by votes
It can be done with javascript

simple version
in the HTML
<img src="bigpic" name="mainpic">
<img src="mypic" onmouseover="javascript:change_main_pic('filename')">

JavaScript
function change_main_pic(filename){
mainpic.src=filename;
}

thats the quick and dirty solution. There my be a more elegant solution.

Kevin Petursson
 
Upvote 0 Downvote

This works for me in IE and FF:

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		function changeImage(filename) {
			document.getElementById('myImage').src = filename;
		}
	//-->
	</script>
</head>

<body>
	<div style="position:relative;">
		<img id="myImage" src="image1.gif" width="50" height="50" border="0" /><br />
		<div style="width:25px; height:25px; left:0px; position:absolute; background-color:red;" onmouseover="changeImage('image1.gif');"></div>
		<div style="width:25px; height:25px; left:25px; position:absolute; background-color:green;" onmouseover="changeImage('image2.gif');"></div>
	</div>
</body>
</html>

Hope this helps,
Dan

 
Upvote 0 Downvote
Is this type of hover possible in CSS?
Click to expand...
Sort of. I was doing something similar to this not long ago. I uploaded a little test here with the style sheet here. The only problem is IE only reacts with style sheets if the object is a link. In the case of my example, I just link to #, but that is something of an annoyance for me.
In the example I just change the background color, but that could just as easily be the background image.
 
Upvote 0 Downvote
So it is possible with CSS only that it would have some dificulties in IE. I really wish they would comply with standards
 
Upvote 0 Downvote
Yes, in FireFox you can do it with just a div or anything, but in IE it has to be an anchor. If the anchor references # then it won't reload the page, but will cause you to have to hit back twice to escape the page.
 
Upvote 0 Downvote
How can I do the same thing but with text links instead. So when a user rolls over a link a image appears and then disappears when the mouse moves away.

I never seen a question get answered so fast.

Thank you all
 
Upvote 0 Downvote
Well, if you are refering to the CSS version, replace:
Code: 
a:hover {
    background: yellow;
    }
with:
Code: 
a:hover {
    background-image: url(test.jpg);
    }
 
Upvote 0 Downvote
You can place a div within the link just as the example shows an image, as well, so you can do anything with div styles as well, which gives you a lot of flexibility. Probably should ask on the HTML / CSS board for other style sheet questions though..
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
425
gmmastros
gmmastros
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
570
waubain
waubain
berkshirea
  • Locked
  • Question
Radio Button Clicked, Another Radio Becomes Mandatory 1
Replies
2
Views
727
berkshirea
berkshirea
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
302
gmmastros
gmmastros
berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
822
berkshirea
berkshirea

Part and Inventory Search

Sponsor

Back
Top