Image maps use "Hot Spots" to identify a particular region in an image. By using this technique an image can be used as a tool for learning. Say for example, you wanted to illustrate some of the simple items on a basketball court. You could try to explain everything in text. Or you could have a picture of a basketball court and allow the user to click on a "hot spot". This would immediately point them to an area of reference to that object.

To better illustrate this example, try clicking on various parts of the picture below to get a idea of what is taking place. You may notice something unique in the bottom left-hand corner of the browser when your cursor passes over certain regions of the picture. This is another image attribute called "onMouseOver". There will be no detail on how to use this option, but feel free to copy the source for this page and try it out yourself.

Image Map

Here is what the source for this image map would look like if just the shot clock was being referenced to:
<MAP Name="basketball">
<AREA Shape=Rect Coords=159,156,198,178 Href="#Shotclock">
</MAP>
<IMG SRC="../images/goal/gif" border=0 ismap usemap="#basketball">

The MAP tag must be used. Any name can be given to the map, but it must be referenced in the ISMAP USEMAP section the exact same way (case sensitive).

The AREA section can consist of three different shapes: RECT, POLY, and CIRC.

Trying to estimate the coordinates of an image map could be quite a tedious task. Fortunately, some people have helped us out and created software packages to do this for us. MapEdit (Shareware) and MapThis (Freeware) are two of the more popular packages out there on the market today. Both are very simple utilities to use. They will plot the coordinates for you and save them to a file. However, it is up to the individual to place these coordinates into the map in a format the browser can understand.















Shotclock

Back to the image













Scoreboard
  • This object keeps track of the score, time left, and fouls in a game. It makes a great reference tool for fans, coaches, referees and players
Back to the image













Backboard "The Glass"
  • Players use this device to make angled shots easier. Instead of trying to put the ball straight in, they hit the ball off this glass first.
Back to the image













Basket
  • The goal of the game. Each player tries to put the ball in the opposing teams basket. It is ten feet off the ground.
Back to the image













Stands
  • This is where the fans sit and make loud noises while watching the game.
Back to the image













Key "The Paint"
  • Each player on offense can only be in the key for a period of three seconds at a time. Violations of this rule awards the ball to the other team. Also when a foul shot is performed the person shooting the foul shot must stand in the small semi circle at the top (12 feet away). While the other players stand outside the key in lanes, hoping for a rebound.
Back to the image













Court
  • The playing surface for the game of basketball.
Back to the image













Roof
  • The cover over the court and stands. This allows the game of basketball to be played in poor weather conditions.
Back to the image