Using html to Create a Linked Image Map

Call me old-fashioned, but sometimes, there’s just something about coding in straight html that is so refreshing to me. Granted, with all the software out now, many html-illiterate folks can create amazing web masterpieces. I, however, was always someone who took pride in being able to write my own code from scratch and I still do on a fairly regular basis.

There are a couple of reasons why I stick to coding my own html:

  1. It’s reliable. The more you mess with a WYSIWYG html editor, the more the code gets scrambled and the higher your potential is for having unexpected results. It’s kind of like purifying a bottle of dirty water with bleach—it may be “clean” but it’s still full of dirt particles.
  2. It’s good to know what’s behind the scenes. If you notice a glitch on your website, how can you fix it? This is especially if you have a WYSIWYG editor or CSS that wants to override the html. If you are able to look at the raw coding and know where to look, you can fix the problem a lot easier.
  3. You control the coding. Sure, I don’t always put values in “quotations” as I should and I don’t always close out my coding in table cells, but when I code, I put only what I need in there so I know exactly what I will end up with. It’s like using a recipe that I created to suit my particular taste.

This week, I decided to go back to my late 90s html roots and create an image map. You’ve seen these before: it’s one image, but if you click in different areas, you will go to different links rather than having the entire image linked to only one site.

So take a second to see what I created in this link, then I will tell you how you can do it yourself.

NOTE: A great free html editor is the Coffee Cup Free HTML Editor.  I use this regularly so I can quickly view my coding without having to save a Notepad file as html and go back and forth between txt and html files.

First, I created my banner in Photoshop creating two distinct categories at the bottom: Leather and Composite. Rather than lead the viewer to a general page, I wanted to lead them directly to the page for each category.

Then, I wanted to find the coordinates. Now depending on which type of image map you plan on using, you will need a different set of coordinates. And don’t worry, the coordinates are probably the easiest part of this process—just open the image in Paint, mouse over the points and the coordinates will show up on the bottom right of the screen. So here’s the image map types and the coordinates needed:

  • RECT: This is a rectangle shape and all you need is the top right and bottom left coordinates, in that order. It’s what I used for my image map and is simple if you need a rectangular area.
  • CIRCLE: This type creates a circle around one coordinate point and the distance if the link created is indicated by the radius of the circle .
  • POLYGON: This is a very specific map that allows you to select several points around an area. Just make sure the points are selected in order (i.e. clockwise or counter-clockwise) to ensure a proper image map area.

So decide what type of image map you want to create, locate the coordinates, then come up with a name for the map. NOTE: If you are linking to multiple parts of the image, be sure to collect all coordinates needed, keep them separate for each location and keep them in order. I named mine “cover” in reference to the cover materials of the balls. Name it whatever you want.

NOTE: A great free html editor to test your coding in is Coffee Cup Free HTML Editor.  The free version only allows you to code and preview, but it is much faster than coding in Notepad, saving in html and viewing it that way.

Now you are ready to code! Here’s how I did mine:

<img src=”http://www.sallyu.com/VB-Banner.jpg&#8221; usemap=”#cover” border=”0″>
<map name=”cover”>
<area shape=”rect” coords=”268,199,39,235″ href=”http://goo.gl/bZiu9″></area&gt;
<area shape=”rect” coords=”621,197,331,235″ href=”http://goo.gl/u8kda”></area&gt;
</map>

  1. The first line is the image link: <img src=”http://www.sallyu.com/VB-Banner.jpg&#8221; usemap=”#cover” border=”0″>
  2. Second line is the map name: <map name=”cover”>
  3. Third line is the first link: <area shape=”rect” coords=”268,199,39,235″ href=”http://goo.gl/bZiu9″></area&gt;
  4. Fourth line is the second link: <area shape=”rect” coords=”621,197,331,235″ href=”http://goo.gl/u8kda”></area&gt;
  5. The fifth line is the map closure: </map>

Image maps aren’t limited to just page links, try them for page anchors and email addresses too! You can include a Facebook “like” or Twitter “follow” or whatever you can link to! This is a fun way to create a more interactive image without using tables or slicing to create the links.

As always, be sure to test your image map in different browsers and have friends or coworkers test it as well to ensure it works correctly. The purpose of straight coding html is to control maximum output so the last thing you want to do is take the time to create an image map that does not work.

Enjoy and happy coding!

Advertisements

What do you think?

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s