Javascript/CSS/PHP Hoverbox with various locations on mouseover

Question

Hi,

I'm trying to get various locations to appear on a image with mouseovers. So basically I have an image and when you hover over a link nearby a hoverbox appears at the location specified in CSS on the image. However I'm trying to get it to happen with multiple links without creating code for each CSS box.

I have something like 50 links and and when I hover over one I want to be able to pull from a db or text file to grab the location where it should create a hover on the image. My original thought was using PHP to help pull in the information from a file, put it into an array and then having the CSS update on the fly. This seems doable if the user just clicks the link as then I can tell CSS what place in the array to look for the location. I am unsure how I could get this to work with mouseovers if at all possible.

The CSS code is very basic at the moment as shown below. #box { position: absolute; top: 100px; left: 200px; background-color: #ffffff;}

Let me know if anything doesn't make sense or if I'm just forgetting something.

Thank you!

Answer 1

Ok, so what you're trying to do is called a CSS sprite. Here's what you want (my example is orthogonal to your code, but teaches the principle):

.link {
    width: 50px;
    heigh: 50px;
    float: left;
    text-indent: -9000px;
    background-color: transparent;
    background-image: url(path/to/sprite.png);
    background-repeat: no-repeat;
}

    .link#one {
        background-position: 0px 0px; /* This one is top left on the image. */
    }

    .link#two {
        background-position: 0px 50px; /* This one is 50px from top and 0px from left on the image. */
    }

You can see where to go from here (and you don't need to use .link#one. I just used it for example purposes. You could just use #one, or even a class .one.

Practice with this and you'll get how it works soon enough. Here's some sample HTML:

<a id="one" class="link">One</a>
<a id="two" class="link">Two</a>

Just through all that together, and make your image a 100px tall by 50px wide .png file with 50px x 50px for each link.