Clickable Image Maps for Blogs. ~ The Blog Doctor.
Loading...

Clickable Image Maps for Blogs.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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 :




<HTML>
<HEAD>
<META NAME="Author" CONTENT="tiger06">
<META NAME="Generator" CONTENT="Jasc Paint Shop Pro 7">
<TITLE> </TITLE>
</HEAD>
<BODY>

<IMG NAME="SynBloggerClickMap0" SRC="SynBloggerClickMap.gif" WIDTH="533" HEIGHT="709" BORDER="0" USEMAP="#SynBloggerClickMap">

<MAP NAME="SynBloggerClickMap">
<AREA SHAPE="rect" COORDS="368,273,508,403" HREF="http://betabloggerfordummies.blogspot.com/2006/10/what-is-subscribe-to-posts-atom.html" TARGET="_blank"

ALT="Feeds">
<AREA SHAPE="rect" COORDS="12,37,522,181" HREF="http://betabloggerfordummies.blogspot.com/2006/10/how-to-add-picture-to-beta-blog-header.html"

TARGET="_blank" ALT="Add Picture to Header">
<AREA SHAPE="rect" COORDS="26,629,512,677" HREF="http://betabloggerfordummies.blogspot.com/2006/11/how-to-add-banner-link-in-footer.html" TARGET="_blank"

ALT="Add Banner Link To Footer">
<AREA SHAPE="rect" COORDS="8,3,526,27" HREF="http://allblogtemplates.blogspot.com/2006/09/blogger-template-without-navbar.html" TARGET="_blank"

ALT="Navbar Issues">
<AREA SHAPE="rect" COORDS="378,407,490,567">

<AREA SHAPE="rect" COORDS="378,229,492,269" HREF="http://allblogtemplates.blogspot.com/2006/10/how-to-correct-sidebar-at-bottom.html" TARGET="_blank"

ALT="Correct Sidebar at Bottom">
<AREA SHAPE="rect" COORDS="44,231,356,569" HREF="http://allblogtemplates.blogspot.com/2006/10/how-to-write-perfect-blog.html" TARGET="_blank" ALT="Write

Perfect Blog">
</MAP>

</BODY>
</HTML>


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


<IMG NAME="SynBloggerClickMap0" SRC="SynBloggerClickMap.gif" WIDTH="533" HEIGHT="709" BORDER="0" USEMAP="#SynBloggerClickMap">

<MAP NAME="SynBloggerClickMap">
<AREA SHAPE="rect" COORDS="368,273,508,403" HREF="http://betabloggerfordummies.blogspot.com/2006/10/what-is-subscribe-to-posts-atom.html" TARGET="_blank"

ALT="Feeds">
<AREA SHAPE="rect" COORDS="12,37,522,181" HREF="http://betabloggerfordummies.blogspot.com/2006/10/how-to-add-picture-to-beta-blog-header.html"

TARGET="_blank" ALT="Add Picture to Header">
<AREA SHAPE="rect" COORDS="26,629,512,677" HREF="http://betabloggerfordummies.blogspot.com/2006/11/how-to-add-banner-link-in-footer.html" TARGET="_blank"

ALT="Add Banner Link To Footer">
<AREA SHAPE="rect" COORDS="8,3,526,27" HREF="http://allblogtemplates.blogspot.com/2006/09/blogger-template-without-navbar.html" TARGET="_blank"

ALT="Navbar Issues">
<AREA SHAPE="rect" COORDS="378,407,490,567">

<AREA SHAPE="rect" COORDS="378,229,492,269" HREF="http://allblogtemplates.blogspot.com/2006/10/how-to-correct-sidebar-at-bottom.html" TARGET="_blank"

ALT="Correct Sidebar at Bottom">
<AREA SHAPE="rect" COORDS="44,231,356,569" HREF="http://allblogtemplates.blogspot.com/2006/10/how-to-write-perfect-blog.html" TARGET="_blank" ALT="Write

Perfect Blog">
<map>


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 :



<IMG NAME="SynBloggerClickMap0" SRC="http://betabloggerfordummies.googlepages.com/SynBloggerClickMap.gif" WIDTH="533" HEIGHT="709" BORDER="0"

USEMAP="#SynBloggerClickMap">

<MAP NAME="SynBloggerClickMap">
<AREA SHAPE="rect" COORDS="368,273,508,403" HREF="http://betabloggerfordummies.blogspot.com/2006/10/what-is-subscribe-to-posts-atom.html" TARGET="_blank"

ALT="Feeds" TITLE="All About Feeds">
<AREA SHAPE="rect" COORDS="12,37,522,181" HREF="http://betabloggerfordummies.blogspot.com/2006/10/how-to-add-picture-to-beta-blog-header.html"

TARGET="_blank" ALT="Add Picture to Header" TITLE="Add Picture to A Header">
<AREA SHAPE="rect" COORDS="26,629,512,677" HREF="http://betabloggerfordummies.blogspot.com/2006/11/how-to-add-banner-link-in-footer.html" TARGET="_blank"

ALT="Add Banner Link To Footer" TITLE="Add Banner Link To Footer">
<AREA SHAPE="rect" COORDS="8,3,526,27" HREF="http://allblogtemplates.blogspot.com/2006/09/blogger-template-without-navbar.html" TARGET="_blank"

ALT="Navbar Issues" TITLE="Blogger Navbar Issues">
<AREA SHAPE="rect" COORDS="378,407,490,567">

<AREA SHAPE="rect" COORDS="378,229,492,269" HREF="http://allblogtemplates.blogspot.com/2006/10/how-to-correct-sidebar-at-bottom.html" TARGET="_blank"

ALT="Correct Sidebar at Bottom" TITLE="Correct Sidebar at Bottom">
<AREA SHAPE="rect" COORDS="44,231,356,569" HREF="http://allblogtemplates.blogspot.com/2006/10/how-to-write-perfect-blog.html" TARGET="_blank" ALT="Write

Perfect Blog" TITLE="How To Write the Perfect Blog">
<map>


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.



Feeds
Add Banner Link To Footer
Navbar Issues

Correct Sidebar at Bottom
Write Perfect Blog


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)




Reuters News
YouTube Video
Sony Music Video
Add Google Map
The Ten Commandments
Download Free Template



Technorati Tags:, ,


6 comments:

Rachel Michaela aka Stylebites said...

Is there a way to use the clickable image map in place of a header?

This would be IDEAL.

Thanks!
Rachel Michaela
Stylebites.blogspot.com

vin said...

Rachel,
Just paste the code in a Html/Javascript Page Element in the header. See how to create such an element in
How to add a Picture to a Beta Blog Header

Ken said...

Ok... suppose you want to put an image map in the header and it's all fine and dandy...

BUT You're using an XML template from Blogger so adding simple HTML code isn't an option.

Then what?

Vin said...

Ken,

You can add a picture in a Html page element. See how to add Picture to header.

Add a Html page element or a picture page element and remove the title page element.

birdy said...

Hi Vin!
Nice informative blog for bloggers. I want to know, is it ok to set my images to open in new browser?

Vin said...

Birdy,

I don't see why not?

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.