View Full Version : Image replacement with hover

10-19-2004, 11:42 PM
I'm trying to figure out how to make a link, when hovered a picture changes to a corrisponding picture. I'm taking this site http://www.diane-etzwiler.com/galleries.html and changing it to a div layout in css. I have the whole thing done except for that page. Here is the redone page (http://www.designhousestudios.info/galleries.php) but I want the links to change images on the left when hovered. Kinda like the top URL but instead of each corner of the image changing, just have a full image change on hover.
Any help on how to do this with css and maybe some js would be helpful!

Thanks everyone,


10-20-2004, 01:41 AM
Here's approx. 38,000 sites with instructions on how to do CSS rollovers.
Enjoy! :)

10-20-2004, 02:44 AM
Did you even read my post or look at the links!! If you look at the site I'm working on you can tell that I know css very very well.

I wasnt asking for a css rollover. I want image placement to change on hover of a link. It's all there above if you can read....

10-20-2004, 04:23 AM
I'm trying to figure out how to make a link, when hovered a picture changes to a corrisponding picture.
And then....

I wasnt asking for a css rollover

Could have fooled me. (You did, in fact.)

You're orignal post does a poor job of explaining what you are trying to achieve. Am I correct in saying that you want the four images to the left of the menu to change in relation to which menu item is currently being hovered over? If so, you will need to use js entirely so you should ask to have this post moved over there.

If you look at the site I'm working on you can tell that I know css very very well.
So your top menu is completely borked in Mozilla/Firefox etc on purpose?

10-20-2004, 04:32 PM
If you look at the site I'm working on you can tell that I know css very very well.

Learn XHTML and stop abusing tables!

10-20-2004, 06:09 PM
We just went over this yesterday in this thread:

What you do is create an image that has the rollover effect AND the regular effect, one on top or bottom (or left to right) -- you then do an image replacement that allows the background to shift to the rollover. It's a common practice now, and no javascript is required. The image would look like so:

And then you'd apply your background to that specific ID with the position at 0px 0px. Next step would be a negative value for the top/bottom or left/right (depending on the way you create your image). Make sure you give your id a specific width/height, and give it a display block. It'll work just fine. If you use two separate images, they will not preload as with the javascript method.

10-20-2004, 06:15 PM
Jero: right...

Learn XHTML and stop abusing tables!

You don't read either!!! I said before I'm REDESIGNING this site from tables to a css layout. Do not patronize me! All pages on the redesign do validate beautifully!!

Iím starting to think this forum is full of unskilled idiots who don't know how to read.

I already figured out the problem. Their is no need to post any more ridicules accusations on this thread.

Thanks but no thanks for you help.

P.S. I wanted a css solution not pure js. I know their is one out there. So this post does belong in the html/css section.

P.S.S. The site has moved from a PHP server to a ASP server to fit the clients needs. The REDESIGN is located here: http://designhouse.sagetemplates.com/index.asp (thatís why the menu doesnít work on the link above. I'm using If then statements to create stickies on each page with only one image for the entire navigation. The statements are in ASP and my PHP server does not recognize them of course, thus the menu looks wierd. So take a look at the ASP server where the current development is held.)

The ORIGIONAL is here: http://www.diane-etzwiler.com/index.html

No go ahead a validate all you want on the clients original site. I didn't design it some shmo did. Hence, the reason for a REDESIGN!!!

10-20-2004, 06:55 PM
I know some people jumped on you, and I'm sorry for that -- but did my last post not help you offer a solution as to how to do a CSS only rollover, as you asked for? Your first post seemed like that is what you wanted, after that you wanted different elements to change position when rolled over on a different link, which is also possible.

And, he's right Jero, if you look at his other posts in this forum, he's been redesigning the site over to tableless for quite some time now -- all of it semantic, and clean.

10-20-2004, 10:36 PM
Well, how do you take a link on hove and change an image, let's say next to it, when the hover occures? Than when you move down to the next link and hover over it, that same image, lets say its next to a list of links, changes to it's corrisponding image. How can I acheive this with very little if at alll any javascript and css.