While working on a SIF project we had a task where we needed to add information on an archival Image. When hovered on particular part of image for example a symbol, the title for the symbol needs to be popped up. This blog is a report on how to use image maps.
HTML is a client side markup language, which is executed by browser. It has tags in the content to direct the browser about how to display the content on the screen. These tags start with < TAG > and end with where TAG is the TAG name. Images are displayed by image tag and you can specify the image URL and the height and width of the image etc. There is a special tag with which you can create “Clickable” areas in the image that is
Map is a set of tags, which are tags, which has a “shape” attribute and size attribute for that specific shape. We can create the shapes in the image and the positions of these shapes or clickable areas are relative to the image and not the screen size. Here is an example image and map tag.
<img src=”planets.gif” width=”145″ height=”126″ alt=”Planets”usemap=”#planetmap”>
<map name=”planetmap”>
<area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”>
<area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”>
<area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”>
</map>
The shapes and their coordinates can be easily understood according to their properties in geometry. We can use “title” tag to specify a title, which can be shown when the mouse is hovered over that “AREA”.
This is how the image maps are used in the application.
