|
Creating Image Maps (You can click on different parts)
-
First we have to have a picture we want to make an ImageMap out of.
With this picture we can click on a name and then will be sent to that web site.
-
So we have to find the dimensions of their area within the picture. The top left corner of IBM is 40,13 - find this by looking in PhotoShop - Select Window - Show Info - hit the little triangle - Palette Options - Ruler Units - Pixels. The bottom right corner is 160,53.
In Gimp to show the Mouse locations from the image menu go to : Windows -> Dockable Dialogs -> Pointer. You will then see the pixwl positions change as you move your mouse around the image screen.
-
You can now find the top left corner of the area and the bottom right corner of the area you want to make "clickable"
-
In declaring your image say :
<img src = "picture.jpg" USEMAP = "#map1">
-
Then declare your map somewhere in the code
<map name = "map1">
<area shape="rect" coords="40,13,160,53" href="http://www.ibm.com">
<area shape="rect" coords="187,13,331,53" href="http://www.yahoo.com">
<area shape="rect" coords="362,13,530,53" href="http://www.google.com">
</map>
-
You can also create polygon (mult-sided shapes). There is no limit to the number of points you can use in the polygon Map. You just select different points on the outside of the figure (like a face) and thenput them in the coords lisr.
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
-
You can also do circles.
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
With the circle you name the center of the circle and then the diameter.
|
