Computer Science Canada

[Tutorial] Image Maps
Author:  nate [ Wed May 28, 2003 9:18 pm ]
Post subject:  [Tutorial] Image Maps
Image Maps

An image map is a single image that can be linked to multiple web pages.

For example, you could have a single image of a map of Canada. When you click on different areas of the map, you will bring up different web pages.

Step 1 - Find a suitable image

First you have to find an image that you want to use. You will want to click on different parts of the image to bring up different web pages.


Step 2 - Give your image a name

Second, you have to define the name of your image map in your HTML code.
In this example, the name of the map is menu :

<map name="menu">




Step 3 - Define clickable areas

Next you have to define the clickable parts of your image.
In the following example,

the shape of the clickable image is a rectangle (shape="rect")
the top left co-ordinate (15,10) and
the bottom right corner co-ordinate (170,25) are listed.
The place where you link to is also defined (href="cs.html")


To find the coordinates of where you want to click,

open your image up in a graphics software package like Photo Editor
move the cursor over the areas you want to be clicked.
the coordinates will appear in the status bar at the bottom of the screen.


code:
<area shape="rect" coords=" 15,10,170,25" alt="comp sci" href="cs.html">



The 2 remaining clickable areas are also defined:

code:
<area shape="rect" coords="40,35,145,50" alt="useful links" href="ul_frame.html"> 
<area shape="rect" coords="35,60,150,75" alt="mini-manuals" href="mm.html">



Then you end the MAP tag that you started in step 2

</map>




Step 4 - Insert image file

Finally, the actual image you found in step one is inserted in the HTML document with the name of the defined image map.

Note that you must include the usemap= "#menu" attribute to tell the Browser that the image is an image map


code:
<img src="image.jpg" border ="o" height="88" width="387" alt="menu" usemap= "#menu" >


Hope this is useful
Author:  void [ Thu May 29, 2003 3:05 pm ]
Post subject: 
no offence...but tedious things like this are much more easily done in FP or Dream Weaver...and then after your finished, cut and paste the code and remove the meta header that states that it used FP...coz sometimes that screws up navigator pages....
Author:  JSBN [ Thu May 29, 2003 3:51 pm ]
Post subject: 
very nice
+ 10 bits

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy