Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Huge image with lots of color change rollovers? help!

    Hi,

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello joe786,
    Have you tried just a basic CSS rollover? Here's an example.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    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

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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);}

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks,

    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

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Do you have a link to your site? Maybe that will help us get an idea of what you're trying to do.

  • #7
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    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,

    http://s248.photobucket.com/albums/gg162/joe786/velvet/

    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.


  • #8
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •