How to create an Image Map

Submitted on: 1/2/2015 2:33:00 PM
By: Matthew (from psc cd)  
Level: Beginner
User Rating: By 3 Users
Compatibility: Java (JDK 1.1), Java (JDK 1.2)
Views: 1271
     Shows how to create an Image Map.

				This article actully is HTML, not javascript.

In this tutorial, I will show you how to create an Image Map, but first let me explain a little about Image Maps. Image Maps are just one big image, with different sections of it defined for links. It is very easy and all you use is HTML. If you would like to see how to create a rollover in an image map, see my tutorial on that.

Right so lets get started. For an image map all you need is one big image. Then after you have that, you need to find the coordinates of where you want the link to be. To do this, open the image in Paint, Adobe PhotoShop, or some other image-editing program. The easiest way to do this I think is with Paint. So I will explain how to do it there. Take your mouse and click the crop button on the tool bar. Then take the crosshairs, and put the center on the upper left corner where you want the link to start, in the bottom right, there should be some numbers in the form of 0, 0, right them down or remember them. Then take your crosshair and do the same thing to the bottom right corner. Right those down as well. Now you have your coordinates. We can now start the actual coding. Every time I start coding and end coding I will put a dotted line, like this: --------------------
Ok so here we go!

<HTML> <HEAD> <TITLE> Your title here! </TITLE> </HEAD> <BODY>

<Map Name="Name">
<Area Shape="rect" Coords="0, 0, 0, 0" Href="yourpage.html">
</MAP> <IMG SRC="Map.gif" UseMap="#Name"<

There its as simple as that, know let me explain it. You start your document with the HTML and HEAD tags, then you put the title, end the title and head, and start the body. Then inside the body, I defined the map. I then put the Area shape (you can choose from rect for a rectangle, circle for a circle, and poly for an irregular shape), the coordinates (put the ones we got earlier in the tutorial) and the link. Put that line for each of the links on your image (of course with different coordinates, etc.!) Then I ended the image map, and put the code for the image that will be the map. Inside that I put UseMap="#Name" that says that theta image is the Image Map (Make sure you make your own name for the map). Then I ended the Body and Html. It is as simple as that!!!

Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this article (in the Beginner category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)

Other User Comments

 There are no comments on this submission.

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular article, please click here instead.)

To post feedback, first please login.