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.

Nobody? Not a one? No clue? :frowning: Oh dear…

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

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 :slight_smile:

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.

Okay, awesome.

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

Thanks again!