in Web Development

How to Link Image Areas in HTML Tag

Advertisement

One of the most common parts in web development is the way how we create and handle images, from design to HTML/CSS conversion.

Do you know what is image map yet? Well, image map is a picture in which areas within the picture are links, sounds amazing right? One picture and can contains one or more links to other site pages or website.

I’m not really fan in HTML map tag but I’m truly amazed of how easy to create and implement complex images with ease without much knowledge in CSS and HTML and it save your time, I’m not saying CSS can’t do this, yes of course CSS can. In this tutorial I will share my way/technique of how to work with HTML map.

Demo

View the demo here

Attributes

Shape
Define a shape for the clickable area.

  • default
  • rect
  • circle
  • poly

cords
Specify the coordinates of the clickable area.

  • rect: left, top, right, bottom
  • circle: center-x, center-y, radius
  • poly: x1, y1, x2, y2, …

HTML

This contain only single image with map tag.


<img src="images/html-map-tag.jpg" alt="Planets" usemap="#sharer-icon" />

<map name="sharer-icon">
<area title="Wordpress" alt="Wordpress" coords="0,47,56,119" shape="rect" href="http://www.wordpress.org" />
<area title="Twitter" alt="Twitter" coords="123,0,179,72" shape="rect" href="http://www.twitter.com/ryansutana" />
<area title="Flickr" alt="Flickr" coords="245,46,300,119" shape="rect" href="http://www.flickr.com" />
<area title="Blogger" alt="Blogger" coords="122,134,178,206" shape="rect" href="sun.htm" />
<area title="RSS" alt="RSS" coords="0,219,56,291" shape="rect" href="http://feeds.feedburner.com/sutanaryan" />
<area title="Stumble Upon" alt="Stumble Upon" coords="123,269,179,340" shape="rect" href="http://www.stumbleupon.com/" />
<area title="Youtube" alt="Youtube" coords="245,219,300,291" shape="rect" href="http://www.youtube.com/user/ryscript" />
</map>

The above HTML code, result something like this.

html-map

In the demo, I’m using rect for shape and to get pair of coordinates I’m using Adobe Fireworks or if you don’t have one or don’t like fireworks you can use your preferred development tool.

In Adobe Fireworks I’m using Slice Tool (2) to get x and y coordinates, see below for example.

Press Ctrl + ] to display Tooltips, point the arrow in Left (x), Top(y), Right(x2), Bottom(y2) to get pair of coordinates.

If you want to use other shape, there’s no difference just point the arrow on every sides and follow the cords attributes above because it depends on the shape you want to use with.

That’s it, hope you like this article.

Advertisement

Related Articles