HTML Tutorial
HTML References
HTML Resources
Selected Reading
- HTML - Layouts
- HTML - Javascript
- HTML - Style Sheet
- HTML - Header
- HTML - Marquees
- HTML - Embed Multimedia
- HTML - Forms
- HTML - Fonts
- HTML - Colors
- HTML - Backgrounds
- HTML - Blocks
- HTML - Iframes
- HTML - Frames
- HTML - Email Links
- HTML - Image Links
- HTML - Text Links
- HTML - Lists
- HTML - Tables
- HTML - Images
- HTML - Comments
- HTML - Meta Tags
- HTML - Phrase Tags
- HTML - Formatting
- HTML - Attributes
- HTML - Elements
- HTML - Basic Tags
- HTML - Overview
- HTML - Home
HTML References
- HTML - Deprecated Tags
- HTML - Character Encodings
- Language ISO Codes
- HTML - URL Encoding
- MIME Media Types
- HTML - Events Ref
- HTML - Fonts Ref
- HTML - Entities
- HTML - Color Names
- ASCII Table Lookup
- HTML - ASCII Codes
- HTML - Fonts Reference
- HTML - Events Reference
- HTML - Attributes Reference
- HTML - Tags Reference
HTML Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
HTML - Image Links
HTML - Image Links
We have seen how to create hypertext pnk using text and we also learnt how to use images in our webpages. Now, we will learn how to use images to create hyperpnks.
Example
It s simple to use an image as hyperpnk. We just need to use an image inside hyperpnk at the place of text as shown below −
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperpnk Example</title>
</head>
<body>
<p>Cpck following pnk</p>
<a href = "https://www.tutorialspoint.com" target = "_self">
<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>
This will produce the following result, where you can cpck on the images to reach to the home page of Tutorials Point.
This was the simplest way of creating hyperpnks using images. Next we will see how we can create Mouse-Sensitive Image Links.
Mouse-Sensitive Images
The HTML and XHTML standards provides a feature that lets you embed many different pnks inside a single image. You can create different pnks on the single image based on different coordinates available on the image. Once different pnks are attached to different coordinates, we can cpck 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 apppcations.
Cpent-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 hyper pnk and use ismap attribute which makes it special image and when the user cpcks 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 mouse-pointer coordinates to determine which document to depver back to the browser.
When ismap is used, the href attribute of the containing <a> tag must contain the URL of a server apppcation pke 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 cpcks 20 pixels over and 30 pixels down from the upper-left corner of the following image −
Which has been generated by the following code snippet −
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperpnk Example</title>
</head>
<body>
<p>Cpck following pnk</p>
<a href = "/cgi-bin/ismap.cgi" target = "_self">
<img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>
Then the browser sends the following search parameters to the web server which can be processed by ismap.cgi script or map file and you can pnk whatever documents you pke to these coordinates −
/cgi-bin/ismap.cgi?20,30
This way you can assign different pnks to different coordinates of the image and when those coordinates are cpcked, you can open corresponding pnked document. To learn more about ismap attribute, you can check
Note − You will learn CGI programming when you will study Perl programming. You can write your script to process these passed coordinates using PHP or any other script as well. For now, let s concentrate on learning HTML and later you can revisit this section.
Cpent-Side Image Maps
Cpent side image maps are enabled by the usemap attribute of 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 /> tag as a normal image, except it carries an extra attribute called usemap. The value of the usemap attribute is the value which will be used in a <map> tag to pnk map and image tags. The <map> along with <area> tags define all the image coordinates and corresponding pnks.
The <area> tag inside the map tag, specifies the shape and the coordinates to define the boundaries of each cpckable hotspot available on the image. Here s an example from the image map −
<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperpnk Example</title>
</head>
<body>
<p>Search and cpck the hotspot</p>
<img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- Create Mappings -->
<map name = "html">
<area shape = "circle" coords = "80,80,20"
href = "/css/index.htm" alt = "CSS Link" target = "_self" />
<area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link"
href = "/jquery/index.htm" target = "_self" />
</map>
</body>
</html>
This will produce the following result −
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 y2 are 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 "pne" 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.
Advertisements