Pleaes help with background image swap

Discussion in 'CSS' started by ICE_monky, Jan 7, 2009.

  1. #1
    I have 3 seperate div layers, one on top of the other vertically. I am using each layer to put some content in, and i have set a background image for each layer and i want it to change when ever the mouse hovers over it without efecting the content within the boxes. I'm trying to get it to act as a CSS image swap on a menu. The image below is a fixed image. The top box on the right is the hover state and the two boxes below is the non hover state. if anyone can help me out i will be greatful.

    [​IMG]
     
    ICE_monky, Jan 7, 2009 IP
  2. LindseyInteractive

    LindseyInteractive Well-Known Member

    Messages:
    2,830
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    175
    #2
    Hello,
    You are going to have to make it as a LINK "A" css attribute.

    Below is a link that might help you out.
    http://www.developingwebs.net/css/hover.php

    Just change the background-color

    to

    background-image: url(image/xxxxx.jp)

    And i believe that should help you out.
     
    LindseyInteractive, Jan 7, 2009 IP
  3. ICE_monky

    ICE_monky Peon

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I figured that I'd have to use an "a link" CSS attribute, but I was hoping that I'd be able to use something like a CSS Tab panel or something. I'm going to be putting text and content within the boxes and want the background to change images whenever the mouse is over that box. Just like in the image I've got in the first post, top box is hover state and bottom two boxes are non-hover state.
     
    ICE_monky, Jan 8, 2009 IP