The Blog Doctor.

Clickable Image Maps for Blogs.

A Clickable Image Map is a picture with multiple clickable areas. An Image Map in a blog can be used for navigating the site. Each area on the map is linked to a different target or web page or a different section on the same page........

Image maps present visual choices and hence are more intuitive for viewers. It must be obvious that the graphic is clickable or else you need to tell the viewer by adding a line of text. You can have a collage of photographs with the photo of a rolodex linked to your friends list and a photo of a camera linked to the page containing your photo album.

There are many ways of creating an imagemap. You can use an application like Paint Shop Pro or a freeware like Meracl ImageMap Generator. Download it from http://www.stockholm.bonet.se/meracl/mimg.htm. You can also use an online image map generator like http://koti.mbnet.fi/winuus/imagene.php?act=getcode. You can hardcode it using step-by-step instructions from http://www.draac.com/imagemap/main1.html

In Meracl Image map Generator use File----->New Image Map----->Load Image from Hard drive to load the image you wish to convert to a map. Drag the shapes provided onto the map and resize them to include the areas you wish to link to other pages. Then copy and paste the link in the Link text box and set the other settings. After doing this for all the areas save the map by selecting Save as Html page.

In Paint Shop Pro open the image you want to use. Go to File----->Export------>Image Mapper. Select the rectangle or circular tool and draw round the area you want to select. Add the address in the URL field. Write a short description of the link in the Alternate Text box and select _blank as Target so
that the link will open in a new window. Click the Save button to create a Html document containing the map. You will be prompted to save the image also. SAVE THE IMAGE AS A GIF FILE. Open the Html file in your browser and check that the hotspots behave as you had intended.

Before we put the map in our blog we have to make three more steps. First upload the graphic/image to a freehost like Googlepages and copy down its link
location(URL). Next open the Html file in Notepad and you will see code like this :

Copy and paste only the code between the <body> and </body> tags like this into another Notepad file:

In each of the AREA tags above add a TITLE section corresponding to the title of the link. This is the title that will be displayed when you mouseover that particular area. Also paste the url of your image at Googlepages in the SRC specification in the first line. Save the file as Imagecode.txt. See the file below :

Copy and paste the above code in the Edit Html tab of your post page.

DO NOT PASTE AN IMAGE LINK TO THE IMAGE MAP PICTURE.

If you want the map in the sidebar or header paste the code into a Html/Javascript Page Element. See the image map below. Test its various areas by moving your mouse over it and clicking it.

MAKING A NAVIGATION BAR FOR THE HEADER

You can make a navigation bar for your header in the same way as detailed above. Hover your mouse cursor over the headings below. Click on them to open the appropriate page. (Best seen in Internet Explorer)