Kacizilla got their homepage at Neopets.com

1: Find the dimensions of your image

Let's code an image map (using CSS) for this image:

The dimensions of this image is 400px tall by 400px wide.

2: Setting up your image as a div background

As you can see in the code above, the height and width of your div is the height and width of the image. The image is now the background image of an empty div.
The result has the same effect as an image tag but it's really a div:

3: Setting up links

We have added "position:relative" in the styles of our div as we begin to add links. Your links will go inside the div. Now here is the format of a single link (below), which I like to call a "clickable area". Note that you will not enter anything inside the a tag.

Each link has its own address (/url.phtml) and the dimensions and positioning (123). Enter your own URL for the address, and numbers for width, height, top and left. We don't know what the numbers are at the moment. As of now, just enter anything reasonable.

The code below is a working example of this step: <div style="position: relative; background: url('http://images.neopets.com/caption/caption_1146.gif') no-repeat; width: 400px; height: 400px;"> <a href="/weather.phtml" style="width: 100px; height: 100px; border: 0; position: absolute; top: 100px; left: 100px;"></a> </div>

And the result:

Can you find where the clickable area is in the image? (Hint: curtains)

4: Arbitrary blue background

From our previous code, we set up a clickable area. Let's make one more edit - adding a blue background to the link (or any other color you prefer). We will undo this later.

The result looks like this:

Now that you can see the clickable area, you are ready for the next step.

5: Scaling and positioning of links

Relying on trial and error, keep editing the dimensions and positioning of your link. If you wanted to make the poppit clickable, you would try to fit the blue box over the poppit, making sure it is nicely covered. Notice the old width, height and positioning have changed in our code:

The result, after a little guesswork:

6: The End

Remove the background on the link. Congrats! You now have a working image map.

Which looks like:

The poppit is now clickable.

If you want to add more links, repeat steps 3-5 while keeping your finished links. Here is an example. Notice there are two links inside the div now:

Result:

We have kept the old link on the poppit, and added a new link to work with. Use the same process again to finish this new link. Keep this up until you have completed all the links for your image map! Good luck!

Click here to send me your feedback.

The Two Roads to Image Mapping: CSS vs HTML

I originally made this guide because it used to be that HTML image maps did not work on user lookups. But here you have it: an alternative way of coding image maps... just in case!

I like doing the guess-and-check way of CSS image maps, mostly out of habit. For the sake of mapping an image, there is probably an HTML image mapper you can find that will generate code for you, which is easy. Even better, with HTML image maps, you can choose shapes including rectangles, circles, and polygons. The downside of CSS image mapping is that you are only limited to rectangular clickable areas.

(A solution to this with the CSS method is to break up your clickable area into little rectangles that all link to the same place. This could be painfully time-consuming)!

The main benefit of the CSS method is that it's easy to turn it into a page layout. You can position your image map as a layout background image. Just as you have positioned clickable areas within the outer div, you can also put another div that contains your page content. This is shown in my other guide, How to Code a Blog-Style Layout.

Link Back

I love this button made by Abigail!

Image mapping by CSS