Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
HTML provides a feature to define regions of an image as links to different URLs. This is called an image map. Let's make a working copy of imagemap.html. I am going to call this imagemap-working. I'll open this in my text editor and you can see it's a very small file. It just has an image and an image map, and we'll get into the details of this in a minute. Let's go ahead and open this in the browser, and you can see here's our scissors image and this one is a little bit different. And if you want to copy of this, it's in the images folder here if you have the exercise files; there's scissorsimagemap.png, and here is the original Photoshop file that I used to create this. And this has a couple of different regions. You'll notice that if I just put my cursor there, it says "Running with these is not recommended" like we expected. If I put my cursor over the square, I get one that says rectangular area. If I put my cursor over the circle and you'll notice that the cursor, the hot area is actually circular. I put my cursor there. It says circular area. And if I put my cursor over the scissors, it says "Poly area for scissors" and this is actually shaped like the scissors. You'll notice that I've defined a polygon shape that goes around the scissors, and that's all defined in here. So here's the way that this works. We have our normal image tag and it has this new attribute called usemap, and it gives a fragment address for the map. And that fragment address is introduced by a hash mark, a pound sign, a number sign and then the name of the map. And so down here we have a map and map is a container. See it has an end tag and it has a name attribute that names the map, and that matches up with this usemap attribute in the image tag so that's how the image tag finds the map. Now the map has area elements inside of it, and the area element is an empty tag so it has this little empty tag shortcut at the end and it has a number of attributes. It has an attribute that names this shape. A shape can be a rectangle with r-e-c-t. It can be a circle. It can be poly for a polygon. And depending on which shape you use, your coordinates are going to be in a different format. For rectangle, you're defining 2 points, the upper left and lower right point and you'll draw the rectangle based on those two points. And each of these points is in x y format. So 50 here is the number pixels from the left side of the area and this other 50 is the number of pixels from the top of the area, and then you have an alt attribute. And just like the alt attribute in an image, this used for cases where the browser is not rendering this properly. And you have a title attribute just like with the image. This will display when you hover over it or it will be used in a descriptive context. And then href is the link to whatever is being linked at, in this case is this rectangle.htm, and you'll notice that I don't actually have one. If I click on this I will get a little error message. So the same for circle, except with the circle we've the first two are the coordinates of the center of the circle. So it's 150 pixels from the left and 25 pixels from the top of the image, and the third is the radius of the circle, not the diameter with the radius. That's the distance from the center of the circle to the outside of the circle. And then poly is actually very simple, but it looks very complicated. This is just a sequence of x-y coordinates, x,y,x,y,x,y,x,y,x,y and these coordinates must go around the polygon in order, and it can be in either direction; clockwise, counter clockwise. However you want it. They just have to be in sequence. So that if you were to draw a line from each of those and from the last one back to the first one, you'd have the polygon that you're trying define. So that's all there is to it. That's how this works. That's what this looks like. You can see I can pretty much trace the edges of these and they do exactly what I'd expect them to do. Same with the circle there, and even with the polygon, so the image map feature allows you to define regions of an image as links. You can define rectangular areas, circular areas, and even polygons. This is a powerful and flexible feature.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104241 Viewers
56 Video lessons · 116178 Viewers
71 Video lessons · 85386 Viewers
131 Video lessons · 40886 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.