HTML Image Links

Previous chapters has tought you how to create hyper text link using text and how to use images in your web page. Now we will learn how to use images to create hyper links. See example below:

<a href="http://www.tutorialspoint.com/index.htm" target="_self" > <img src="/images/home.gif" alt="Tutorials Point Home" border="0"/> </a>

This will create following hyperlink at tutorialspoint.com home.

This was the simpletest way of creating hyperlinks using images. Next we will see how we can create Mouse-Sensitive Image Links.

Mouse-Sensitive Images:

The HTML and XHTML standards provide a feature that lets you embed many different links inside the same image. Clicking different areas of the image causes the browser to link to different target documents. Such mouse-sensitive images known as image maps.

There are two ways to create image maps:

• A server-side image maps: is enabled by the ismap attribute for the <img> tag and requires access to a server and related image-map processing applications.
• A client-side image maps: is created with the usemap attribute for the <img> tag, along with corresponding <map> and <area> tags.

Server-Side Image Maps:

You add an image to an anchor simply by placing an <img> tag within the body of the <a> tag. Make that embedded image into a mouse-sensitive one by adding the ismap attribute to the <img> tag. This special <img> attribute tells the browser that the image is a special map containing more than one link.

When the user clicks some place within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the <a> tag to the document server. The server uses the mouse-pointer coordinates to determine which document to deliver back to the browser.

When ismap is used, the href attribute of the containing <a> tag must contain the URL of a server application like amap file or cgi script etc. to process the incoming request based on the passed coordinates.

The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image, beginning with (0,0). The coordinates, preceded by a question mark, are added to the end of the URL.

For example, if a user clicks 50 pixels over and 30 pixels down from the upper-left corner of the image displayed from the following link:

<a href="/cgi-bin/logo.map" target="_self" > <img ismap src="/images/html.gif" alt="HTML" border="0"/> </a>

Then the browser sends the following search parameters to the HTTP server which can be processed by cgi script or map file and you can link whatever you like to these coordinates:

/cgi-bin/logo.map?50,30

To Become more comfortable - Do Online Practice

NOTE: Converting the coordinates into a specific document is handled by the server side application, either cgi programme or special map files provided by seb server. For more detail Check Using HTML ismap.

Client-Side Image Maps:

Client side image maps are enabled by the usemap attribute for the <img /> tag and defined by special <map> and <area> extension tags.

The image that is going to form the map is inserted into the page using the <img /> element as normal, except it carries an extra attribute called usemap. The value of the usemap attribute is the value of the name attribute on the <map> element, which you are about to meet, preceded by a pound or hash sign.

The <map> element actually creates the map for the image and usually follows directly after the <img /> element. It acts as a container for the <area /> elements that actually define the clickable hotspots. The <map> element carries only one attribute, the name attribute, which is the name that identifies the map. This is how the <img /> element knows which <map> element to use.

The <area> element specifies the shape and the coordinates that define the boundaries of each clickable hotspot. Here's an example from the image map:

<img src=/images/html.gif alt="HTML Map" border="0" usemap="#html"/> <!-- Create Mappings --> <map name="html"> <area shape="circle" coords="154,150,59" href="link1.htm" alt="link 1" target="_self" /> <area shape="poly" coords="272,79,351,79,351,15,486,15,486,218,272,218, 292,166,292,136,270,76" alt="link 2" href="link2.htm" target="_self" /> <area shape="rect" coords="325,224,488,286" alt="link 3" href="link3.htm" target="_self" /> </map>

The actual value of coords is totally dependent on the shape in question. Here is a summary, to be followed by detailed examples:

rect = x₁ , y₁ , x₂ , y₂

x₁ and y₁ are the coordinates of the upper left corner of the rectangle; x₂ and y₂ are the coordinates of the lower right corner. Therefore, a rectangle which goes from 10,5 to 20,25 would have the attribute coords="10,5,20,25". A rectangle which defines the upper-left quarter of an image might use coords="0,0,50%,50%".

circle = x_c , y_c , radius

x_c and y_c are the coordinates of the center of the circle, and radius is the circle's radius. A circle centered at 200,50 with a radius of 25 would have the attributecoords="200,50,25"; one centered at the image's center and having a diameter of half the image would be defined by coords="50%,50%,25%".

poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

The various x-y pairs define vertices (points) of the polygon, with a "line" being drawn from one point to the next point. A diamond-shaped polygon with its top point at 20,20 and 40 pixels across at its widest points would have the attributecoords="20,20,40,40,20,60,0,40". A "line" is always drawn from the coordinates of the last point to the coordinates of the first point in order to close the polygon.

All coordinates are relative to the upper-left corner of the image (0,0). Each shape has a related URL.You can use any image software to know the coordinates of different positions.