|
Web Design
in this tutorial you will learn about giving link to an image and image map(image map=giving different links to parts of the same image)
first prepare an image for your pages menu; or you can use my basic menu pic for this tutorial
first define a map
here is the code;
<map
name="menu"><map>
...then decide the shape I will only teach you the rectangular
shape.here is the code for this:
<area shape=
"rect"coords="x,y,x2,y2"href="index.html"> ....and you must define the
cordinates.x and y are the coordinates of the left top point of the first button
and x2,y2 are the coordinates of the right bottom point of the button and href
defines the url.
for example here is the code for my menu image:
<IMG src="menu2.gif" border="0"useMap="#menu" ismap>
<map name="MENU">
<area shape="RECT" coords="14,13,83,45" href="url.html">
<area shape="RECT" coords="14,79,83,108" href="url.html">
<area shape="RECT" coords="14,142,83,172" href="url.html"></MAP>
here is an example :
you can get the cordinates by following these steps in photoshop:
1.Open your menu image.hit window/show info .
2.move the mouse cursor to the top-left point of the first button the cordinates of this point will be x and y
3.move the cursor to the bottom-right of the button and the x,y will be the second points cordinates.then write them in the coords="x,y,x,y"
thats all!!
download this tutorial in a zip file!*!*!*!click!*!*!*!
(instructions.html,menu2.gif, are included)
| 
visit 