View Full Version : CSS Swap Image?

01-10-2006, 12:41 PM
Hi guys,

It's been a while.. but here I am again! Hope all are well.

A client would like me to make a site - and when someone hovers their mouse over a section an image swaps on another section of the same page. I have had mixed success doing this using fireworks and then exporting it and dropping it into a dreamweaver page - but I am wondering whether it can be done using CSS? Please see here for an example of the fireworks solution:

http://www.mgf-labs.com/Intricatedesigns.htm ('http://www.mgf-labs.com/Intricatedesigns.htm')

I started doing this site about 7 months ago when I didn't 'get' CSS - so be promised that there is a completly new and improved site not far away from going live - but I'm unsure about the rollover/image swap thing?

Cheers - Jim Shady

01-10-2006, 01:00 PM
I have a test page for this on http://www.domedia.org/oveklykken/css-rollover-image.php ('http://www.domedia.org/oveklykken/css-rollover-image.php')
and a google search for 'css mouseover' will get you plenty of results. There's a few different ways you can go (swap background image/move background image etc) so you'll have to pick on that suits you :)

01-11-2006, 10:06 AM
Thanks Domedia... had a glance at a few things and I can find how to make things change in the DIV that I'm hovering over for example - but not how to change something somewhere else on the page...? Maybe I'm being a bit stupid... :unsure:

01-11-2006, 12:51 PM
ah, for that you need to use javascript. CSS only deals with style, changing the property of another element is js.
http://www.dreamweaverclub.com/forum/index.php?showtopic=915 ('http://www.dreamweaverclub.com/forum/index.php?showtopic=915')

01-11-2006, 04:30 PM
Thanks again Domedia.

Any thoughts on the two styles presented?

We've got the first example ('http://www.daxassist.com/js/disjointedimagemap.cfm') and the second one ('http://www.communitymx.com/content/article.cfm?page=2&cid=EB7B9BAE3B5E11E8') .

My problem is that I don't want the 'swap image behaviour' to be linked from another image - if that makes sense? Let me explain a little. On the left of the page I have two DIV's with a bit of text in. One DIV above the other. Each has info about a product in it. What I would like is when someone moves their cursor over the area of each product then a picture of the product appears on the right side of the screen.

So what I'm really saying I think is instead of button 1, button 2 and button 3 in this ('http://www.communitymx.com/content/article.cfm?page=1&cid=EB7B9BAE3B5E11E8') example can we use a DIV?

Sorry for being awkward...!


01-11-2006, 04:41 PM
Maybe I need something along these lines...?

http://www.tjkdesign.com/articles/css%20pop%20ups/3.asp ('http://www.tjkdesign.com/articles/css%20pop%20ups/3.asp')

Creative Insanity
01-11-2006, 04:44 PM
Since the product discription is not going to change have you thought about making the discription an image?

01-12-2006, 08:20 AM

Thats what I did originally but the clarity and style of the text can look poor when it is on an image I think? Not as good as plain text formatted by CSS...?


03-01-2006, 03:01 PM
Anyone have any further thoughts on this subject...?

03-01-2006, 03:09 PM
http://www.tjkdesign.com/articles/css%20pop%20ups/3.asp seems to be what you're after, right? :)