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"
