creating interactive map using javascript [closed]

If you have several sections of one photo changing, you are on the right track with your thoughts.

Instead of using javascript, you could easily use css. Create the divs as you described and line them all up correctly. Instead of actually putting the image in the markup, put the link in the markup and use css to make the image a background of the link and set the link display to block so the entire div becomes clickable.

It would be something like this for the html of one piece:

<div id="slice1" class="slice"><a href="#"></a></div>

and the css would be something like:

.slice a
{
    display: block;
}
#slice1
{
    width: 100px;
    height: 100px; /* set your actual width/heights */
    background-image: url(path_to_your_image);
    background-position: center top;
}
#slice1:hover
{
    background-position: center bottom;
}

With this example, your background image file would be 2 images, the image when first loaded, and then the hover image directly below. When you change the background-position on the hover, you are showing the image below. This also eliminates the annoying version of changing the background image and getting the white flash on the first hover.

This would not require any javascript coding, external javascript libraries or other dependencies.

This was written very quickly so you may need to make some adjustments but that will get you started.