Sunday, 24 June 2018

Chaudhari Karan

HTML – Image & Email Links


HTML – Image  & Email Links

Hello friends, In this lecture, we will discuss HTML Image & Email Links.

HTML – Image  & Email Links

Image Links

In Text links, we have seen how to create hypertext link using text. Now, we will learn how to create a hyperlink using images.


In this example use an image to create the hyperlink.

HTML Image Links

HTML Image Links

If you click on the images to reach to the home page of alwaysspot.

Mouse-Sensitive Images

The HTML standards provide a feature that embeds many different links inside the single image. Create different links on the single image which is based on different coordinates available on the image. Once different links are attached with different coordinates, you can click different parts of the image to open target documents. These mouse-sensitive images are known as image maps.

Two ways to create image maps −
  •         Server-side image maps – It is enabled by the ismap attribute of the img tag. It requires access to a server and related image-map processing applications.
  •     Client-side image maps – It is created by the usemap attribute of the img tag, along with the corresponding map and area tags.

Server-Side Image Maps

Here simply put the image inside a hyperlink and use ismap attribute. It makes the special image and when clicks on the image, the browser passes the coordinates of the mouse pointer with the URL specified in the tag to the web server. The web server uses the mouse-pointer coordinates to determine which document to deliver back to the web browser.

When ismap attribute is used, the href attribute of the contain a tag which contains the URL of a server application like a CGI or PHP script etc. to process the incoming request which is based on the passed coordinates.

Mouse position coordinates are counted in pixels from the upper-left corner of the image, coordinates beginning with 0,0. The coordinates preceded by the question mark, which is added to the end of the URL.


HTML Server-Side Image Maps

HTML Server-Side Image Maps

If a user clicks anywhere on the image –

HTML Server-Side Image Maps

Client-Side Image Maps

Client-side image maps are created by the usemap attribute of the img tag and it is defined by special map and area extension tags.

The image is going to form the map is inserted to the page using the img tag as the normal image, it carries an extra attribute called usemap. The value of the usemap attribute is used in a map tag to link map and image tags. The map tag along with area tags define all the image coordinates and corresponding links.

The area tag inside the map tag specifies the shape and the coordinates. Here's an example from the image map –


HTML Client-Side Image Maps

Coordinate System

The coordinate(coords) value is dependent on the shape.


rect = x1 , y1 , x2 , y2

Here x1 and y1 are the coordinates of the upper left corner of the rectangle; x2 and y2 are the coordinates of the lower right corner of the rectangle.

circle = xc , yc , radius

Here xc and yc are the coordinates of the center of the circle, and the radius is the circle's radius. For example, A circle centered at 100,50 with a radius of 25 the attribute coords = "100,50,25"

poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn

The x-y pairs vertices points of the polygon, with the "line" drawn from one point to the next point.
For example, A diamond-shaped polygon with top point at 10,10 and 20 pixels across at its widest points which have the attribute coords = "10,10,20,20,10,30,0,20".

Each coordinate is relative to the upper-left corner of the image 0,0. Each shape has a related URL. You use any image software to know the coordinates of different positions.

Email Links

It is simple to put an HTML email link on a webpage but sometimes it can cause an unnecessary spamming problem for your email account.

We have another option to facilitate people to send emails. One option is to use HTML forms to collect user data and then use PHP or CGI script to send an email.

HTML Email Tag

HTML a tag provides an option to specify an email address to send an email. While using a tag as an email tag, use mailto: email address along with href attribute.

Here is the syntax of using mailto instead of using http.

HTML Email Tag

Default Settings

Specify a default email subject and email body along with email address.

Here is the example to use default subject and body.

HTML Default Settings

Subscribe to this Blog via Email :


Write comments
ajay ak
14 July 2018 at 02:12 delete

Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
Webdesining course in chennai

Ada Smith
17 January 2019 at 03:21 delete

A week ago I was looking for something to occupy myself on the Internet. And I stumbled upon a single site. I spend every evening. I’ve already created my own strategy and I’ll manage everything. I’m leaving a link. Would you like to take a chance? adorable safe online casino you will succeed