Tutorial Pg.5
How to use image maps
Tutorial Pg.5
How to use image maps
Finally I will tell you how to to use an image map on your site. First, you must open a photo editor ex.Adobe Photoshop. In the editor find the x,y coordinates of the upper left corner of the picture and the lower right hand corner of the picture. Make sure that the coordinates are in pixels and not inches. After you have to coordinates, its time to place it on the site. You must start out with the <map name="Name of Picture". After that you must define what shape the picture is, it can be a rectangle, circle, or any other shape. You can do this by using <area shape="Type of Shape" then the coordinates COORDS="x,y,x,y", finally the location were the image map is going to go href="Place to go">. In the end it should look like this < area shape="rect" coords=0,0,0,0 href="yahoo.com". You can keep repeating that as long as you need to. When you are done you must close the map by using </map>. Now that the map is done you must bring in the image. To do this you must type <img src="name.gif", add any attributes that you need. Then you need USEMAP=#label>. **Make sure that your usemap name and map name are the same otherwise it will not work.**
|
<body> <map> <map name="name of pict."> <area shape="rect" coords="0,0,0,0" href="location.html"> repeat as many times that are needed. </map> <img src="image.gif" usemap="#label"> Example of Image Map See the Image Map below. It is the Back-Home button on this page, but on the other pages it is the back/home/next. |
