Using Picture Maps
I made this because it took me a very good while to figure out how to use picture maps. To do this, you need very few things, which include:
-A browser (not really, if you're reading this)
-A text editing program (Windows, NotePad will do fine. Mac users [yay!], SimpleText will do fine.)
-A graphics editing program. I suggest GraphicConverter (PC and Mac, with a free trial version)
This requires a decent ammount of HTML knowledge (but it's ok if you don't have it, PC users).
To do this, make a picture (I like .jpg files). Easy as pi. Then, add the following tag to your page:
<IMG SRC="map.jpg" WIDTH="480" HEIGHT="60" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="X,X,X,X" href="link1.html">
<area shape="rect" coords="X,X,X,X" href="link2.html">
</map>
The "x,x,x,x" is the hardest part of the code. The numbers are coordinates (pixes on the graphic) that show where the line is going. The layout is: startX,startY,endX,endY. X is horizontal, and Y is vertical (obviously!). You can add more links as long as your picture is big enough. Look here for a demonstration of this (bottom logo).
Let's see an example!
Click on the area labled 'left' to close this window (don't!) and the other area called 'right' to visit 'itworks.html'. The code for this is:
<IMG SRC="map/leftright.jpg" WIDTH="100" HEIGHT="50" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="0,0,49,49" href="javascript:window.close();">
<area shape="rect" coords="52,0,100,50" href="map/itworks.html"
target="_blank">
</map>
Try making your own now! Good luck, have fun & stuff!
Signed,
~iLiLi
PS: Java/Script users, you can just make a simple applet to do this (ask me for a start on the code!)