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?
|