logo © 1996 Phil Waclawski
Felitaur Site
About Me
ftp files
Help Files
What's New?
Home Page
Other Links
Anatomy &
Fun Links
Win 95/NT
Comments or
webmaster@ felitaur.com
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:

<MAP NAME="pickaname">
<AREA SHAPE="RECT" COORDS="0,0,103,100" HREF="pagename.html">
<AREA SHAPE="POLY" COORDS="104,0,205,99,255,300" HREF="Anotherpage.html">
<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" ISMAP></A>

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

Recommended Software