Lesson 9:   HTML Image Maps

1. HTML Image Maps
   
   An Image Map is an HTML tag that allows multiple hyperlinks from one single image. Normally, you can place a hyperlink around an image by using the following code:

   <a href ='index.html'> <img src='Home.gif' border='0'> </a>

   Click on the image home.gif and you'll go to index.html. But suppose you have an image of a compass and you want to click on any one of the four directions and hyperlink to the web page for that direction. The above HTML code will not work. You'll need to use an image map. Follow these instructions to create a simple four hyperlink image map:
   
   
   
   Open this image in Paintshop Pro and move the arrow around the image. You'll see numbers changing in the lower left corner. These numbers are (X,Y) coordinates. Dust off your Geometry lessons from Secondary School! In short, any image added to a web page has coordinates. The origin (0,0) is in the upper left corner of any image. The X axis increases as you move to the right, pixel by pixel, and the Y axis increases as you move down. If an image has a width of 238 pixels, the highest X value will be 238.
   
   So, let's say you want the N for north on the compass to be a hyperlink that, when clicked will send you to another page named North.html. You would imagine a box around the N and you would move your mouse to the upper left corner of the box. Remember the coordinates (103,22), and next to the lower right corner (136,57). These coordinates define a box around the N. You would use the following code to link this area to the North.html Web page.
   
   <area shape='rect' coords='103,22,136,57' href='North.html'>
   
   Do the same for E, S, and W:
   
   <area shape='rect' coords='186,105,212,134' href='East.html'>
   <area shape='rect' coords='108,187,129,212' href='South.html'>
   <area shape='rect' coords='25,104,55,131' href='West.html'>
   
   The entire code looks like ths:

   <img src='images/compass.jpg' border='0' usemap='#map1'>
   
   <map name='map1'>
     <area shape='rect' coords='103,22,136,57' href='North.html'>
     <area shape='rect' coords='186,105,212,134' href='East.html'>
     <area shape='rect' coords='108,187,129,212' href='South.html'>
     <area shape='rect' coords='25,104,55,131' href='West.html'>
   </map>

   Notes:
   1. The image has a border='0' attribute. Because the image is now a hyperlink it will have the customary blue (first time link) or purple (visited link) line around it. To get rid of the border colors, set the border to zero.
   2. The usemap='#map1' attribute linked the image with the map coordinates. The number sign # in front of map1 indicates that the map coordinates are located somewhere in this page.
   3. The name='map1' in the map tag is the final piece of the puzzle that links the map to the image.
   4. Rectangle (shape='rect') is not the only shape an image map can use:
      shape='rect' - (rectangle) upper left (X,Y) and lower rith (X,Y). 4 numbers.
      shape='circle' - (circle) center (X,Y) and radius (Z). 3 numbers.
      shape='poly' - (polygon) starting (X,Y) thru ending (X,Y). as many coordinates as you need.
   5. Optionally you may add the attribute title='North' this title will display North when you hover your mouse over the hyperlink:

      <area shape='rect' coords='103,22,136,57' href='North.html' title='North'>
      

      Try it!
      
      (The links above all go back to this page)
   
   
   
2. Marquees
   
   The MS Marquee tag allows you to scroll data across a Web page. For example:
   
   This is a test. This is only a test. Had this been a real emergency you would have been advised to switch to the emergency broadcasting service. This is only a test.
   
   And the Container Tags look like this:
   

   <marquee width='60%' style='border:1px solid black;padding:8px;'>
     This is a test. This is only a test. Had this been a real emergency
     you would have been advised to switch to the emergency broadcasting
     service. This is only a test.
   </marquee>