Imagemap

An image map is a way of defining "hot spot" links within an image on a page. This means that rather than having the whole image behave as one link, you can have lots of different links within one image:


Shapes

  • rect
  • circle
  • plygon

Coordinates

Shape Coordinate Style Explanation
rect coords="x1,y1,x2,y2" top left and bottom right corners of the rectangle
circle coords="x,y,r" centre and radius of the circle
poly coords="x1,y1,x2,y2,x3,y3,…" corners of the polygon

I use my normal graphics program, paint.net, to obtain the coordinates. But any graphics program (even Microsoft Paint) will how you the coordinates, usually in the bottom right corner.


[[html]]

<map name="MapNo2">
<img src="http://strathviewconsultants.wikidot.com/local--files/support:images/svcwordlesmall.png" border="0" USEMAP="#MapNo2" width="350" height="267">
<area shape="rect" coords="208,179,322,207" href="http://strathviewconsultants.wikidot.com/wikis" target="_blank" >
<area shape="rect" coords="56,117,74,193" href="http://strathviewconsultants.wikidot.com/projects" target="_blank" >
<area shape="rect" coords="35,182,48,234" href="http://strathviewconsultants.wikidot.com/portfolio" target="_blank" >
<area shape="rect" coords="286,21,305,124" href="http://strathviewconsultants.wikidot.com/web" target="_blank" >
</map>

[[/html]]


[[html]]

<map name="Network">

<img src="http://strathviewconsultants.wikidot.com/local--files/support:images/capture.png" border="0" USEMAP="#Network" width="196" height="86">

<area shape="rect" coords="7,21,64,86" href="http://www.twitter.com" target="_blank" >
<area shape="rect" coords="67,21,124,86" href="http://www.facebook.com" target="_blank" >
<area shape="rect" coords="129,21,186,86" href="http://www.youtube.com" target="_blank" >

</map>

[[/html]]


[[html]]
<map name="Store">

<img src="http://strathviewconsultants.wikidot.com/local--files/support:imagemap/store.png" border="0" 
USEMAP="#Store" width="242" height="141">

<area shape="rect" coords="140,61,210,92" title="single" href="/support:pages" target="_blank" >
<area shape="rect" coords="140,100,210,130" title="family" href="http://www.wikidot.com" target="_blank" >

</map>
[[/html]]

The target="_blank" means the link will open in a new tab. To open the link in the same window/tab use target="_parent"

Go to Top

Page tags: images links
Site Design and Content by Strathview Consultants copyright 2009-2011