Mariapia's Image Maps


Updated 10/22/98

.

"People believe:
  • You need special software.
  • You need certain browsers.
  • You can't do it with regular HTML.
  • It's complicated."
 Image Map Myths

.

An image map is a photo, picture, banner or sign that allows you to click on certain "hot spots" and be taken away to another page or section of a page. They are like a game and a fun way to interact with a visitor to your site. Plus they add variety and increase your knowledge of HTML. There are several reasons why beginning programmers shy away from image maps. See list in box at left.

All are false! All you need is a picture and 6 lines of code. Anyone can do it.

.

.

(MAP NAME="niece1")
(AREA SHAPE="RECT" COORDS="100, 140, 140, 160" HREF="poems.html") - repeat this line of code for every position you want to make clickable.
(/MAP)
(DIV ALIGN="center")
(IMG SRC="jess.gif" WIDTH=300 HEIGHT=400 USEMAP="#niece1") (/DIV)
 Image Map Code

.

The special lines of code are listed to the left. As always, swipe your mouse through the code showing on this page to copy and paste for yourself -- then strip out the parentheses and add < and > brackets. I can't do that for you here, or the examples would turn into actual code and you wouldn't be able to see it : )

.

.

.

Poems

Banners

Casinos

 Image Map Quiz

.

Which do you find more attractive? They both accomplish exactly the same goal. Watch your Status Bar below and the shape of your Mouse symbol as you pass your mouse over the following links to the left and the words in the sign below:

.

.

How do we know what numbers to put in as coordinates? We use the old Cartesian plane and experiment. After your first one, you will be an expert at it, coming very close on your first guess. Here is an illustration to get you started. All you need to know is that the size of this image is HEIGHT=200 WIDTH=300:
 Apply Coordinates

.

Map grid

.

The nice thing about image maps is that you:
  • Freeze text styles that many computers don't have.
  • Add your own graphics.
  • Set spacing on the page.
  • Eliminate those "link lines" under the words.
But when a visitor passes his/her mouse over the words, they change into a hand, and are therefore clickable.
 Make an Image Map

.

Let's make the image map above, which is a single picture with links to 3 different pages. Here is code for you to take:

(MAP NAME="SIGN2")
(AREA SHAPE="RECT" COORDS="10, 10, 90, 30" HREF="poems.html")
(AREA SHAPE="RECT" COORDS="100, 30, 200, 50" HREF="banners.html")
(AREA SHAPE="RECT" COORDS="230, 10, 300, 30" HREF="casino.html")
(/MAP>
(DIV ALIGN="center")
(img src="tumap.gif" width=300 height=50 USEMAP="#SIGN2" >
(/DIV)

.

That's all there is to know about IMAGE MAPS. Go ahead now with your code and any picture, whether you create it or put up a photo, strip in your own data . . . and enjoy!
 Note this from the code
  • The number of AREA tags we need is 3, because we have 3 links.
  • This image happens to be size 300 x 50.
  • Within the 300 x 50 grid, we have 3 sets of coordinates:
    • 10,10,90,30
    • 100,30,200,50
    • 230,10,300,30
  • The last thing we talk about in the code is the picture (IMG SRC).

Return to top

.

.

.

.