Here's the concept: At my band's recent show, i got a picture of the stage. I'm using this picture as a background image for the website. When a person is viewing the website, when their mouse pointer moves over an instrument, the mouseover image kicks in and surrounds the instrument with a white outline.
I am doing this by creating rollover images; the mouseoff image is the exact same as the the part of the background image it sits over. The mouseon image is the instrument surrounded by a white outline (to focus the viewers attention and let them know it's a clickable object). The positioning is tricky, but i've managed to get the first image in place. You can see the results http://www.solarisrpg.com/files/akistos/tbb/index.html.
The problem arises, however, when i insert a second mouseover image. When the image first appears in Dreamweaver CS5, it is sitting at the bottom left corner of the BG image. when viewed in a browser, the image appears to the right of the BG image, hovering over the background color fill.(screenshot below)
Image may be NSFW.
Clik here to view.
When i insert positional data into the image attributes for the mousover image (the floating bass guitar), it moves down below the BG image completely. (screenshot below)
Image may be NSFW.
Clik here to view.
As you can see, all other attributes of the photo are working just fine. On mouseover, it displays the proper image. When i click it, the link appears where and how it's supposed to.
I've already tried using <div> tags to put each mouseover image on a separate layer. That didn't work; the behaviors remained the same.
please help!
