Image and Image Map Resources
Images are a key part
of web pages, though
they can be overused. Too many large graphic files will make your viewer
get bored, frustrated or annoyed and they'll go somewhere else. So
remember to keep your graphics small, one of the links below and most web
publishing books give you details on how to speed up graphics loading.
NOTE: For information about different types of graphic files used on the
web, along with some "free" files, check out Graphics and for making and editing your
own stuff using Adobe Photoshop Help
Image Maps are where
you have "mapped out" the coordinates of different areas of a graphic
image, and then use those numbers to make different regions go to
different pages, sounds etc when clicked on by the user. Note, the example
below is for Client Side Image Maps, which are easier to set up, but some
older browsers don't work with them.
After you get the
coordinates, using some form of mapping program (see below for links), you
then set up things in your web page like so:
<AREA SHAPE="RECT" COORDS="0,0,103,100" HREF="pagename.html">
<AREA SHAPE="POLY" COORDS="104,0,205,99,255,300"
<AREA SHAPE="CIRC" COORDS="45,50,20" HREF="page3.html">
Finally, you place
the image someplace in the same page with the following options:
< IMG SRC ="yourimage.gif" USEMAP="#pickaname" >
Just note, "pickaname" can be anything, but you have to use the same name
in both locations. Try it out, it can be fun.
A simple trick to map an image
The following image was set up with this bit of code:
<a href="imagemap.html"> <img src="../pictures/raya03.jpg"
which allows you to get the X,Y coordinates in the grey status bar at the bottom of
the Netscape browser. The href can point to anything. You don't actually need the
link to work, you just need it to be a link. This makes your browser think it's a
server side image map.
Image Map Sites