how to: make an image map
if you're like me, you've seen people have an image with several different links in different sections of it and wondered, "how the hell did they do that?"
this is called an image map. an image map manipulates an image by setting certain coordinates of the picture to be equal to a link or to bring up javascripts. for example, this is an image map i made recently. if you hover over each pea, you see three different links as well as the title of the picture. if you clicked on one of them, it would take you to a link.
so, how does one make one of these fancy schmancy image maps? it's a little tedious, so i have to teach you the function of each thing before you put it all together. first, let's go back to first grade. you need to know what shape you want to use. all the codes will be different. the only one that usually changes in an image map is the shape code. obviously, the code i used was for CIRCLES. the ones you can use are circles, rectangles/squares, and polygons.
starting from scratch, you need an image. the one i chose was from Natalie's Comic Website of peas. as you do the normal image codes, you add the words "USEMAP".
this will come in later when you actually start to code the map. the generic name of my map is MAP1 but you can change it to whatever your little heart desires, as long as it matches in the coding. next, you start with the map coding. name your map. mine is named MAP1, so in my codes, i will put: < MAP NAME = "MAP1 " >
the next thing you do is start off with the tag < AREA. you can hit the enter button, like i did, or you don't have to. the first tag in the area that is easiest to do is the link. < AREA HREF= "link" > is what you would put, and obviously link to what you want. if there is something you would like this to say upon hovering, add ALT= "hover text" or TITLE= "hover text". i did both, so mine looked like this.
< AREA HREF= "LINK" ALT= "HOVER TEXT" TITLE= "HOVER TEXT"
here comes the slightly difficult part. shapes. in my picture, there is a circle. since i want to do the image map on this circle, i need to know some numbers. but since there are also the options of rectangles, squares, and other polygons, there are some things you need to know for each. since it involve coordinates, i suggest using an image program - or even something as easy as PAINT, which in the corner, shows you the coordinates of the picture when you hover over it.
CIRCLES - (CIRCLE COORDS= "a,b,c")
the center point of the circle (a,b)
the radius(c)
easy to obtain by measuring horizontally the endpoints of the circle and subtracting them. this gives you the DIAMETER of the circle. divide by two and that gives you the radius. keep one of the endpoints in mind. if it is the right endpoint, subtract the radius and if it is the left, add the radius to obtain the center point of the circle. RECTANGLES/SQUARES - (RECT COORDS= "a,b,c,d")
the top left point of the rectangle (a,b)
the bottom right point of the rectangle (c,d)
if your image is a square, DO NOT CHANGE THE CODE TO SAY THE WORD SQUARE. if you remember geometry, a square IS a rectangle. =] this should be easy, especially if utilizing PAINT. if you don't have a particular shape and have an image with a word like "friends" or "userinfo", use this in the rectangle format. POLYGON - (POLY COORDS= "a,b,c,d,e,f,...")
corner points of the shape (a,b)(c,d)(e,f) and etc.
also fairly easy to do if utilizing PAINT. used for things like stars, trapezoids, or other shapes.
now the fun part, putting it together. start with the image to avoid it being at the bottom of the page and leaving an awkward gap. < img src="IMAGE" width="#PX" height="#PX" usemap="#map1" > follow this by any links you might want to put underneath the picture. in my example, i used the links "THREE PEAS IN A POD." otherwise, skip. start this with < MAP NAME= "map1" > or whatever you named the map. < AREA HREF= "link of site" ALT= "hovertext" TITLE= "hovertext" SHAPE= "CIRCLE/RECT/POLY COORDS= "a,b,c,d," >. repeat that area text for as many shapes as you have. after you're done with that, you close < / MAP > and you should have a rather spiffy image map!
this is definitely a confusing code (especially since i had to teach myself!!!) so i am here for troubleshooting, if need be. hopefully someone finds this useful.