madragal — 2010-04-20T18:25:04-04:00 — #1
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)
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.
madragal — 2010-04-23T16:06:21-04:00 — #2
Nobody? Not a one? No clue? Oh dear...
paul_wilkins — 2010-04-23T19:35:32-04:00 — #3
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
madragal — 2010-04-23T19:43:45-04:00 — #4
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.
Then for the css
background: url(blahblahblah) no-repeat;
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
paul_wilkins — 2010-04-23T19:52:20-04:00 — #5
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.
madragal — 2010-04-25T17:39:50-04:00 — #6
Thank you. I will work through that one and then send back an update.