Image Areas Clickable Without Image Map
Image maps can be useful. But they're unnecessary just to make certain areas of an image clickable.
This image is an illustration. It has a light-colored outline to help visualize the image dimensions.
The areas of the image containing icons are clickable. The rest of the image is not.
Give it a try. Tap in an area without an icon. Then on each icon separately.
If you're on a computer with a mouse, you'll see the link pointer when the mouse hovers over the area of an icon.
How It Works
The image is published within a div. The div is styled with a position:relative; declaration.
Within the div, following the image img tag, is the code for transparent divs styled with position:absolute; and positioning declarations. The divs are linked with an a tag, like images or text would be linked.
The sizes of the transparent divs are as required to cover the area of the image that is to be clickable.
How To Do It
The first step is to put the image into a position:relative; div. Like this:
<div style="position:relative; max-width:494px;"> <img src="https://www.willmaster.com/possibilities/images/Poss1001.png" style="border:none; outline:1px solid #ccc; max-width:100%;" alt="Illustration image"> [transparent divs to come] </div>
You'll see the position:relative; style. The max-width property is the maximum width of the image — so the dimensions of the div will always be the dimensions of the image, even when viewed on narrower screens.
The [transparent divs to come] will be replaced with the transparent divs that are links for certain sections of the image.
Let's position a transparent div over the logo nearest the lower edge of the image. Here is the code:
<a href="https://www.willmaster.com/software/custom/" title="Willmaster Custom Software" alt="Willmaster Custom Software"> <div style="position:absolute; bottom:19%; left:44%; background-color:rgb(0,0,0,0); width:23%; height:28%;"></div> </a>
You see the div is linked with an HTML a tag.
The div positioning is styled with position:absolute;, bottom:19%;, and left:44%; declarations. Its size is styled with width:23%; and height:28%; declarations. (In order for the clickable image to be device/% instead of px or other static measurement for distances and dimensions.)
Notice the div's background-color:rgb(0,0,0,0); declaration. Being transparent, it can be hard to get it sized exactly right and positioned in the perfect spot.
For sizing and positioning, use a background-color:rgb(0,0,0,.2); declaration. That gives the div a mostly-transparent background. When sizing and positioning is done, change the .2 back to 0 to restore full transparency.
Do the sizing and positioning for each area of the image that needs to be clickable. Then you're done.
The Illustration Code
Here is all the code for the illustration.
<div style="position:relative; max-width:494px;"> <img src="https://www.willmaster.com/possibilities/images/Poss1001.png" style="border:none; outline:1px solid #ccc; max-width:100%;" alt="Illustration image"> <a href="https://www.willmaster.com/software/" title="Willmaster Software" alt="Willmaster Software"> <div style="position:absolute; top:12%; left:12%; background-color:rgb(0,0,0,0); width:25%; height:41%;"></div> </a> <a href="https://www.willmaster.com/software/custom/" title="Willmaster Custom Software" alt="Willmaster Custom Software"> <div style="position:absolute; bottom:19%; left:44%; background-color:rgb(0,0,0,0); width:23%; height:28%;"></div> </a> <a href="https://www.willmaster.com/library/" title="Willmaster Library" alt="Willmaster Library"> <div style="position:absolute; top:6%; right:1.5%; background-color:rgb(0,0,0,0); width:22.5%; height:36%;"></div> </a> </div>
There is a position:relative; div that contains the image and the linked position:absolute; transparent divs.
Implementing clickable areas on an image this way generally is faster than implementing an image map.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager
