SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member Madragal's Avatar
    Join Date
    May 2009
    Location
    Orlando
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing <div> background by rollover help!

    Hey everyone, I have a dilemma to run by you. I am not even sure if it is possible but I thought I would ask anyways.

    If you can go to my website http://www.melissakear.com you can better see what I am wanting. Basically, to make it easier (or what I thought it would be easier) I have a few divs and each div has a background so they are basically layered over each other like something you would find in photoshop.

    I did this because I wanted everything to line up perfectly with the scene. For the rollovers, I simply did the changes as another layer. Each layer is the same size with transparency. (Not sure if that makes sense)

    What I did is I am making invisible buttons over the images (they aren't invisible yet as you can see) I want to respond (like at the bottom where the blog, linked, and twitter 'buttons' are) When I did the research on it all, I see a lot of how to do a rollover, but it only changes the background of the button you are rolling over. I don't want anything to happen to the button because it will be invisible, what I actually want is for the <div> background to change. I am thinking the only way I can do this is javascript, but if it is possible with html/css that would be easier for me because I am not as schooled in javascript.

    Any ideas, or is this even possible?!?! Thanks so much!

    Oh, and a quick P.S. I'd need it to change back on rollout.

  2. #2
    SitePoint Member Madragal's Avatar
    Join Date
    May 2009
    Location
    Orlando
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nobody? Not a one? No clue? Oh dear...

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    It sounds like you're wanting to create an image map, where you can specify areas of an image that link through to different locations.

    See for example: http://www.kasparius.com/tutorials/imagemap/what.htm
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member Madragal's Avatar
    Join Date
    May 2009
    Location
    Orlando
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know if that's exactly what I need. I don't have one image, I have many images layered on top of each other. Where the white boxes are, those are different 'buttons'. When they are hovered over though, I want the background of a div to change because the backgrounds are set to their divs.

    For instance

    <div id="twitter">
    </div>

    <div id="blog">
    </div>

    Then for the css

    #twitter {
    background: url(blahblahblah) no-repeat;
    }

    #blog {
    background: url(blahblahblah2) no-repeat;
    }

    When I roll over the <img src="images/btn-twitter" alt="Twitter Button" /> I want the #twitter background to change to another background than the one set in CSS when the button is rolled over and then on mouse off I want it to go back to the original background.

    I hope that makes more sense.

    Thanks for the help

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    You can use an onmouseover event then, and a similar onmouseout event.
    There are some quirks that relate to them though, so study http://www.quirksmode.org/js/events_mouse.html for the full details.

    When the event triggers, you can get the target element, and then use dom navigation, such as parentNode, to find the div.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member Madragal's Avatar
    Join Date
    May 2009
    Location
    Orlando
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, awesome.

    Thank you. I will work through that one and then send back an update.

    Thanks again!


Tags for this Thread

Bookmarks

Posting Permissions

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