I recently had a client who had just gotten a new flyer made up for her business by her graphic designer, and it looked great. It had references to all of her events, contact info, everything.
We wanted to have the same information on the website, but instead of trying to recreate the graphic designer’s great work it was a much simpler solution to simply use the flyer itself as an image. But even better, wouldn’t it be great if we could add links to the appropriate event pages wherever that event was mentioned in the flyer?
It’s super simple to do and here’s how:
1. Add the image to your webpage, make the image a link and include ISMAP at the very end of the tag. The link can be left blank, here’s an example:
<a href=””><img source=”url of your image” ISMAP /></a>
2. Go look at your webpage with this image on it and when you hover over the spot where you want a link to be, make a note of the coordinates that will show up in the bottom left corner of your browser.
3. Go back to your image and get rid of the link and ISMAP, we don’t need either of them anymore, just a regular image.
4. Add a reference to your map within the image tag – it can be whatever name you want. For example:
<img source=”url of your image” alt=”alt text goes here” usemap=”#mapname” />
5. Now on a line below your image tag define your map:
<map name=”mapname”>
<area shape=”rect” coords=”x1, y1, x2, y2″ href=”url of the link you want to point to” alt=”alt text here” />
<area shape=”rect” coords=”x1, y1, x2, y2″ href=”url of the link you want to point to” alt=”alt text here” />
</map>
Done!
There can be other shapes as well, doesn’t have to always be a rectangle but that often makes the most sense for links.
So everyone who is looking at your webpage will see just an image, but when they hover over one of the areas that you’ve mapped as a link they’ll see the usual change in cursor, and when they click on that area they’ll be taken to whatever link you’ve specified.
Super easy! And super slick too!