An alternative to HTML image maps. Note.
The dimensions of this image is 400px tall by 400px wide.
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:
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:
And the result:
The result looks like this:
Now that you can see the clickable area, you are ready for the next step.
The result, after a little guesswork:
Which looks like:
The poppit is now clickable.
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.
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.
I love this button made by Abigail!