HTML – HOW TO LINK IMAGE AREAS IN HTML TAG

1 112

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.

 

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.

For coords uste this one tool In Adobe Fireworks I’m using Slice Tool (2) to get x and y coordinates.

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.

You might also like More from author

1 Comment

  1. raushan kumar says

    this article is very nice i am loving it and i want to learl all the articles provided by you and i will make our best result by this…

Leave A Reply

Your email address will not be published.