Image Map
For some time I was searching for the name of function (?) that allows to create clickable images. And I didn’t mean entire image hyperlinked but just a part of it – usually in a shape of some element displayed on it. Finally I found the name – Screen Hotspot or Image Map. Knowing it I could have learnt how to create my own.
Unfortunately almost all online tutorials led to Microsoft software. Wrrr…. So I’ve downloaded trial version of Expression Web and created few image maps to find out how the source code exactly looks like.
Here is an example:
If you click on heart shaped part of wall you will be taken to my Gallery with pictures from St. Franciscan Church in Cracow (that’s the place above picture was taken ;). If you click on stripe with geometric decoration on left side you will be taken to my post on handmade cards in Japanese style (inspired partly by this image).
Cute, isn’t it?
And here is a code I had to insert into the post to make it working:
<map name="FPMap0" id="FPMap0">
<area href="http://www.nietoperzka.com/recznie-robione-kartki/" shape="polygon" coords="28, 3, 130, 1, 127, 222, 19, 222" />
<area href="http://www.nietoperzka.com/Gallery2/gallery2/main.php?g2_itemId=573" shape="polygon" coords="132, 2, 298, 0, 299, 73, 132, 14" />
</map>
<img alt="map" src="http://www.nietoperzka.com/wptraining/wp-content/uploads/2007/09/p9050939.JPG" width="300" height="225" usemap="#FPMap0" />
But what when my trial period expires? Ha! Apparently it’s not so difficult to create it using free tools like Notepad and GIMP. But this I will show you next time
.
17th September 2007 3 comments





hi kasia,
this is exactly what i want to do on my blog.
i was wondering if you can do this on a wordpress blog sites or do you use some other wordpress technology?
thanks
-roli
Hi Roli,
I don’t see any problem to use in on wordpress.com.
Since code need to be inserted into post you don’t need to have access to theme files.
However watch out two things:
1. you need to turn off your visual editor (WYSIWYG) because very often it cuts off part of html code
2. when creating more the one image map on the same page (there may appear in different posts but still all together on the home page for example) each of them need to have unique name and ID
Good luck!
Can you give the hotspot a class and then give it an outline in CSS? I am interested in doing this in wordpress.