When you need to add hotspot on images and coding an HTML image map manually with list of coordinates on a specific image isn’t easy at all unless you’re well-known with HTML tags and codes. Usually these image maps are created because, in a single image you can hyperlink areas of the image to various destinations instead of hyperlinked the image to single destination.
To make you understand quickly, If you’ve used Facebook photo-tagging feature, on a single photo you might have noticed many faces tagged, when click on it, it will go to that person’s profile. Same like that, we can hyperlink different parts of images to different destinations. This is called as Image maps. Normally behind the scenes of this image maps are basic HTML codes which are pointed out with list of coordinates like (x,y) of the image. To know more about Image maps wiki it.
If you’re not sure with the HTML coding, then here is an online app that lets you to do things very easily, just upload the image, select the areas which you need to hyperlink and then enter the target url, give the alt text and grab the code.
Image map editor online is a free app which lets you to do Image mapping very easily. You can create HTML Image maps just in few seconds. Just hit the online image editor app, Upload your images or you can directly link the image from the internet. Once you’ve uploaded the image, click on the accept button which is beside it.
Now the image is loaded and you can click your mouse and drag it to select a particular area on the image. Once the area is blocked, enter the target URL on the box and like same you can do on different locations on the same image. Below is a sample image which I have created using Online Image map editor, It’s a single image with different categories hyperlinked. Play around with it and try out yourself.
Once everything is done, click on the Code option below and get the entire code and paste where ever you need it.
Check out Online Image map editor.
| For a limited time I'm sharing some select Tips and Tricks and How-To Guides for FREE. |