Make a part of an image a hyperlink

imagelink

About this article: Posted in: Learned along the way
By: Blockcoder ( Admin ) / 27.07.2011
Stats: 6 responses / Views: 810
Tags: , ,

Let’s go straight to the point:

<img src='pictures/picture.jpg' width='500' height='500' usemap = '#imagemap' />

<map name='imagemap'>
          <area shape='rect' coords='x1, y1, x2, y2' href='url' />
</map>

Above you see a simple example of how to make an image map. The shape is rectangle and the start point is ( x1, y1 ) and the end point is ( x2, y2 ).

Yout can also use other shapes like circle, and poly.

Different shapes

Their coordinates are:

  • circle = x1, y1, radius
  • poly = x1, y1, x2, y2, x3,…
  • rect = x1, y1, x2, y2

You can of course define more imagemaps into one image:

<img src='pictures/picture.jpg' width='500' height='500' usemap = '#imagemap' />
 
 <map name='imagemap'>
            <area shape='rect' coords='x1, y1, x2, y2' href='url' />
            <area shape='rect' coords='x1, y1, x2, y2' href='url' />
            <area shape='circle' coords='x1, y1, radius' href='url' />
            <area shape='poly' coords='x1, y1, x2, y2, x3, y3, x4...' href='url' />
</map>

The coordinates of the top left corner of an area are 0, 0.
But this is it, talk less, do more.


There are 7 responses on this post

Mckinley Delapena
The Slave of the Husband... Searching for ahead to learning excess from you afterward!......
Houston Home Security
Well worth to read this article, thanks for sharing this information. With this article you offered me got a chance to know about this, anyway i say Great Article! I’m waiting for you next article about this interesting subject.
www
Heya i am for the first time here. I came across this board and I find It really useful & it helped me out a lot. I hope to give something back and aid others like you helped me.
Inteligentne Domy
Great post. I was checking continuously this blog and I'm impressed! Extremely useful info particularly the last part :) I care for such information a lot. I was seeking this certain information for a long time. Thank you and good luck.
Inteligentny Dom
My brother recommended I might like this website. He was entirely right. This post truly made my day. You cann't imagine simply how much time I had spent for this info! Thanks!
Marvin Riggenbach
Hey There. I found your blog using msn. This is an extremely well written article. I’ll be sure to bookmark it and come back to read more of your useful info. Thanks for the post. I will certainly return.
okucia drzwiwoe
Just wish to say your article is as surprising. The clarity in your post is just cool and i could assume you are an expert on this subject. Well with your permission let me to grab your feed to keep updated with forthcoming post. Thanks a million and please continue the rewarding work.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

9,596 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>