How to make an Image Map Code


An Image Map Code is a code that tells what links you want a certain area of an image to link to. For instance, if you have 2 seperate images put together in one image file you can make each picture have a different link. When posting a banner on Youtube for instance, you can only upload a piture file. But you want to have several links on your banner like a link to your website, a link to your facebook, a link to your blog and a link to your twitter. Well, with an Image Map you can easily do this. But how do you make a code? What is the code? The code is basic HTML. It gives coordonites of where you want links.

Here is my banner along with my Image Map Code to give an example:

As you can see there are several different areas where i would want to put a different link. For example at the top Left Corner i would want a link to my facebook page, at the bottom left i would want a link to my site randallpstudios and to the far right i would want a link to my Vegie-Tables site. With just a simple image you can’t have multiple links, unless you add an Image Map Code.

My code for this image is as follows:

<map name=”Map”>
<area shape=”rect” coords=”0,0,253,69″ href=”
http://facebook.com/randallpstudios ” target=”_blank”>
<area shape=”rect” coords=”-1,69,253,117″ href=”
” target=”_blank”>
<area shape=”rect” coords=”-1,117,253,149″ href=”
http://randallpstudios.com ” target=”_blank”>
<area shape=”rect” coords=”251,1,750,148″ href=”
http://randallpstudios.com ” target=”_blank”>
<area shape=”rect” coords=”749,1,959,149″ href=”
http://vegie-tables.com ” target=”_blank”>
</map>

In this code each link area has its shape, coordinates, link, and destination window.Look at the first link: ”rect” means the shape is a rectangle. coords=”0,0,253,69″ is the coordinates of where the link will be. The coordinates of the rectangle shape give the top left corner and the bottom right corner. So this means this rectangles top left corner is 0px to the right and 0px down. The bottom right corner is 253px to the right and 69 px down. then link takes you to http://facebook.com/randallpstudios . target=”_blank” means that you open the link in a new window.  You can play around with this code, and change it to fit your image, or you can use a program like to make a code for you. I use Macromedia Dreamweaver MX 2004. Here’s the steps i use. The steps would be pretty much the same in a newer version of Dreamweaver and very similar in anyother html editing program.

  • Open a New Document (Basic Html)
  • Insert your banner image
  • Select the banner and go to your image properties
  • Find your HotSpot tool (I use Dreamweaver MX 2004, my properties/hotspot option is at the bottom left but it depends on your setup and which edition you have. They should all be similar)
  • Select the shape you want: Rectangle, Oval, or Polygon
  • On the Rectangle and Oval options drag the shape out to the size you want it. On the polygon option simply click where you want the corners to be. If you want to resize or reposition your shape after you have made it use the arrow tool right beside the rectangle option and drag the corners or the entire option. To delete the shape click the shape and hit the backspace key.
  • After you get the shapes where you want them, add the link and the target in the properties menu for the shape
  • Now copy your map code and insert it into the appropriate box in youtube. You do not need the entire html page code. you only need the part that starts: <map name=”Map”> and ends with </map>. make sure these parts are included in your code. Simply copy and paste it where you need it.


About admin

I am a halfway student in Graphic Design. I say halfway because its hard for me to get up the money and time to go to school. My long term goal is to be a professional animator with my own cartoon series. This blog is a diary of my attempt.
This entry was posted in Make an Image Map Code and tagged , , , , , , , , , , , , , . Bookmark the permalink .

Comments are closed.