Thursday, March 12, 2015

How to Create an Image Map to Link Multiple URLs to One Image

It is getting common practice now a days to use Image maps in blog header navigation and to create different Blogger Gadgets. But, In my opinion using Image map to create header navigation might give bad result, if it is not implemented correctly. Here, In this tutorial I am going to explain you how to use an Image map to create navigation header for your Blog. Click here for demo.

Image maps

To create image map, first we need to create and customized an image and then create hyperlink area on image. Follow the below steps in order to create blog header image map for your blog.

Creating a Banner Image using PicMonkey

You can use Photoshop or any other softwares or online programs to create a banner. Here, I will be using an online program www.picmonkey.com to create a banner.

Step 1. Go to www.picmonkey.com, Click on Design and then Custom.

Picmonkey custom banner

Step 2. Enter a custom size of banner you want to create and click on Make it!.

Picmonkey custom size

If you don’t want to create your banner from scratch and want to edit your existing blog banner then upload your image file of banner by clicking on Open->My computer.

Pickmonkey upload image 

Step 3. Customized your banner by using Basic Edits functionality. Here, In below image banner I have used three links and social icon which I will make them clickable using Image maps.

image map hyperlink

In the above image, I will make the text (highlighted with red arrow) hyperlink using image maps.

Creating Image map using Image-Maps.com

Step 1. Go to http://www.image-maps.com and upload your file by clicking on Browse for File.

Browse for file

Step 2. Click on Start Mapping and then click on click to continue.

Step 3. Point your mouse pointer on the text for which you want to create hyperlink and then Right-click on image to bring up the menu. Select menu option as per your text or image. Here, I am selecting rectangle.

image maps menu

Step 4. Adjust the rectangle size in such a way that it covers your text. Enter Map URL, Title and other attributes and then click on save.

Here, Map URL is the link you want to open when clicked on task. ALT is alternative text and Data Maphilight is an attribute to highlight your map text.

enter attributes image map

Steps 5. Repeat step 3 and step 4 for other text which you want to convert it into clickable hyperlink.

Step 6. Right-click on the image and click on Get Code.

image maps get code

Step 7. Click on Html Code tab to get the code.image map Html code tab

Image maps code

Note: If you want your image to hosted on image-maps.com you must need to register on image-maps.com. If you don’t want to host your image on image-maps.com then you need to upload your image and change the image url from the above code. Follow the below steps to host your image and change the code.

1. Upload the image to your server and get the url.

2. Replace the highlighted part of code with your image url. For example I will replace the highlighted code with my image url https://lh6.googleusercontent.com/-W-eRx-tn69E/VQJgIPmbBCI/AAAAAAAAB58/c_n6XvSEvM0/h22/eKnowmax_navbar.png

image map image url

After replacing the image url

final code image url

Step 8. Copy the code by holding Ctrl+C and place it anywhere in between the <body> tag.

Click here for demo.

Hope you enjoyed this tutorial. If you like this tutorial please do share it with your friends and family on Facebook and Twitter and if you have any queries regarding this post do let me know in comments section.

You May Like:

How to create custom contact us page using Google Form.

How to host your HTML, CSS and JavaScript on Google Drive.

How to create Custom navigation menu for your Blog.

170+ High PR Website Directory to submit your sites for free

No comments:

Post a Comment

badge