HTML Notebook



Okay, you have that really cool web page dancing in your head, you want your users to click on "Slash"'s guitar and hear his latest solo (make sure it's okay with "Slash" first though). So Just how do we go about doing this???
You need an Image Map. "But I read that they are really complicated and require some weird software". Nope. Actually, image mapping is easy once you get the hang of it. The toughest part is just learning what your doing. After that, it's all just beer and skittles.

First, you have to decide on a couple of things.

1) What image do you want to use??
2) Where do you want the users to click?


Once you have picked you image and have decided that you want "Slash" when he had the green hair, and you have picked a good place to click on (I.E. his flaming guitar), it's time to create the image map. To start, type:
<map name=slash>
< shape="rect" coords=165,60,225,150 href="slash.html">
</map>
<img border=0 src="slash.gif" usemap="#slash">
BE SURE THAT USEMAP=#NAME IS THE SAME AS MAP NAME=" "

Warning: Image maps play havoc with voice readers designed for the visually impared. over use of Image maps may guarentee your site will be un-navagable by the blind.

Under coords= you are simply defining a box within the image.
The coordinates will begin in the upper lefthand corner of your image REGARDLESS of where you place it. Confused? I was too when I first started image mapping. But really it's not too hard.

1st number - number of pixals to place the left hand side of box.
2nd number - number of pixals from the top of the image down for the top of the box.
3rd number - Width of the image in pixals.
4th number - Height of the image in Pixals


Clear as mud right? But trust me on this one, grab the source code and play with the map. Move the targets around. Heck, you cant hurt anything, and if you get it TOTALLY screwed up, you can always come back here and download another :)
Ultimatly, the only way your gonna learn is by DOING! No-one but you expects you to get it right on the first try! :)

Accessability:
Some older browsers and aids for the physically disabled cannot display image maps. For this reason, any time you have an image map on your page, you should also have identicle links (in plain text) somewhere else on the page. (See the links at the bottom of the page for examples of Plain Text Links)[W3C - Priority 1]

| Back to Main Page | Previous Page | Next Page |
| Back to the Home Page | Questions? |