 |
|||
Image MappingIn this tutorial, you will learn how to create a an image map. An image map is an image that contains links to different urls on specified areas on the image.Step 1: Open the image you will be mapping. In this case, I'll be using this image.  Take a look at this picture closely. Each point I have specified contains two numbers - one for the column value, and one for the row value. Try to understand this diagram, because if you don't, it will be very difficult to continue. Step 2: Next you create or modify your image tag, or the tag which displays your image on the screen. Mine would be like this:
<img src="map.jpg" usemap="#map" width="width" height="height" alt="description" border="0">
Be sure to substitute your own values for the bolded text. Step 3: Now you have to create your map. Each desired link contains four values: 1st value: The upper left column of the point. 2nd value: The upper left row of the point. 3rd value: The lower right column of the point. 4th value: The lower right row of the point. Step 4: Finally, you have insert the code for the map. It should look something like this:
<map name="map">
<area shape="rect" coords="0,0,100,100" href="index.html" alt="home"> <area shape="rect" coords="100,0,200,100" href="about.htm" alt="about"> <area shape="rect" coords="0,100,100,200" href="staff.htm" alt="staff"> <area shape="rect" coords="100,100,200,200" href="designs.htm" alt="designs"> </map> Put it all together, and you can get a final result like this:  Pretty simple, eh? You can use this in so many layouts in many different variations. Have fun! [Back] |
Custom Search
Home Gifts & awards Affiliates Link Exchanges Skins Contact Us Terms of Use Credits Div/Table IFrame/Popup Latest Additions Avatars Signatures PS Splash Pages Templates Lake Applets Scripts Entity Converter View All Photoshop Coding Yinyang Graphics ADP Halo Evolution Chibi Koneko G. Details Apply? [2] online 38.107.179.231 Valid HTML 4.01 Nature Elusidation The Road to Heaven Idyllic |
||
 |
|||
