Image mapping by CSS

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

<div style="background: url('http://images.neopets.com/caption/caption_1146.gif') no-repeat; width: 400px; height: 400px;"></div>

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

<div style="position: relative; background: url('http://images.neopets.com/caption/caption_1146.gif') no-repeat; width: 400px; height: 400px;"> LINKS WILL GO IN HERE </div>

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.

<a href="/url.phtml" style="width: 123px; height: 123px; border: 0; position: absolute; top: 123px; left: 123px;"></a>

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.

<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="background: blue; width: 100px; height: 100px; border: 0; position: absolute; top: 100px; left: 100px;"></a> </div>

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:

<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="background: blue; width: 70px; height: 85px; border: 0; position: absolute; top: 179px; left: 8px;"></a> </div>

The result, after a little guesswork:

6: The End

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

<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: 70px; height: 85px; border: 0; position: absolute; top: 179px; left: 8px;"></a> </div>

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:

<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: 70px; height: 85px; border: 0; position: absolute; top: 179px; left: 8px;"></a> <a href="/nf.phtml" style="background: blue; width: 100px; height: 100px; border: 0; position: absolute; top: 200px; left: 200px;"></a> </div>

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

Pros: It seems that lookups now accept HTML image maps! If character space matters to you, try the CSS method. You can use a stylesheet to replace the some of the inline styles used in this guide. You might also prefer the guess and check way of finding the coordinates of your links.

Cons: Unlike traditional HTML image maps, the CSS image map is limited to rectangular "clickable areas". With HTML, you can choose shapes including rectangles, circles, and polygons.

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!