Web Design for Beginner Web design tutorial Html Part-012

We are Completed our Web design short time

HTML Image Links

We have seen how to create hypertext link using text and we also learnt how

to use images in our webpages. Now we will learn how to use images to create

hyperlinks.

Example

It's simple to use an image as hyperlink. We just need to use an image inside

hyperlink at the place of text as shown below:

<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.toneysoft.com" target="_self">
<img src="/images/new.png" alt="toneysoft" border="0"/>
</a>
</body>
</html>

This will produce following result, where you can click on the images to reach
to the home page of Tutorials Point.

Click following link

This was the simplest 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 a single image. You can create different links on the

single image based on different coordinates available on the image. Once

different links are attached to different coordinates, we can click different

parts of the image to open target documents. Such mouse-sensitive images

are known as image maps.

There are two ways to create image maps:

 Server-side image maps - This is enabled by the ismap attribute of

the <img> tag and requires access to a server and related image-map

processing applications.

 Client-side image maps - This is created with the usemap attribute

of the <img> tag, along with corresponding <map> and <area> tags.

Server-Side Image Maps

Here you simply put your image inside a hyperlink and use ismap attribute

which makes it special image and 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 web server. The server uses the mousepointer

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 a cgi or PHP 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 20 pixels over and 30 pixels down from the upperleft

corner of the following image:

It has been generated by the following code snippet:

<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="/cgi-bin/ismap.cgi" target="_self">
<img ismap src="/images/logo.png" alt="Tutorials Point" border="0"/>
</a>
</body>

</html>

Click following link

Then the browser sends the following search parameters to the web serversear>

Coordinate System

The actual value of coords is totally dependent on the shape in question. Here
is a summary, to be followed by detailed examples:
rect = x1 , y1 , x2 , y2
x1 and y1 are the coordinates of the upper left corner of the rectangle; x2 and
y2are the coordinates of the lower right corner.
circle = xc , yc , radius
xc and yc 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
attribute coords="200,50,25"
poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn
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
attribute coords="20,20,40,40,20,60,0,40".
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.

TONEYSOFT