View Full Version : Huge image with lots of color change rollovers? help!

Nov 17th, 2010, 12:54 PM

I have a picture with 6 different playing cards in. When the user rolls over each image I want the cards to change color with a different word showing above 'about' 'links' etc...

I have all my images - original image with the 4 red cards and 4 other images each with the color change and text above.

My question is, how do I make this work, so when the user rolls over the cards it changes the image to the different coloured one and then they move off the card is changes back to normal for all cards?

I tried using image-maps.com but it only changed the first rollover I made.

Thanks in advance :D

Nov 17th, 2010, 02:08 PM
Hello joe786,
Have you tried just a basic CSS rollover? Here's an example (http://nopeople.com/CSS/CSS_rollover/index.html).

Nov 17th, 2010, 03:17 PM

no I haven't tried that, but I don't understand what they've done in the given link. I understand how it works, but not what the person is saying :(

Plus that jusst shows the same image when you mouse over anywhere. I want a different image to show when you mouse over certain parts of the first one. So the first image mouse over card 1 shows a different image (which is the same size just different colours) and that for 4 different cards.

Thanks :)

Nov 17th, 2010, 03:35 PM
If you have the original images and then you have four more images like the originals but different color and text, then you set the hover in your css with the changed images as an attribute.

#div hover{background-image:url(images/60K19DL.jpg);}

Nov 17th, 2010, 04:27 PM

maybe i'm being dumb, but I want the 4 different images to hover when the mouse goes over certain parts of the main image. That wouldn't work with the above card?

I'm bad at explaining, but basically the main image changes colour various times when the mouse hovers over certain parts of the main image. So i would need to sort of 'map' out sections to change to specific images, but I don't know how to do that.

Cheers :)

Nov 17th, 2010, 04:30 PM
Do you have a link to your site? Maybe that will help us get an idea of what you're trying to do.

Nov 17th, 2010, 04:41 PM

I haven't got a site link but I have a photobucket album of the images i'm using. They should show what i mean,


the blank one with no text is the main image, all the other hover when the mouse on the main image hovers over the certain card.


Nov 17th, 2010, 05:08 PM
About the only thing you can do with a single image is to position six divs over it and change the background color and opacity/filter properties of the divs on either hover, or mouseover/mouseout.