Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, am going to be discussing about the Html image links. In my previous tutorial guide i treated Html text links and how they can be used to connect various webpages to form a complete website and also how to link the various sections of a particular webpage.
So quickly let us take a look at the Html image links, lets consider the example below.
Example
it's very simple to use an image as hyperlink. All you need do is to use the image inside the hyperlink at the piece of text as shown below;
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click the following link</p>
<a href="https://www.webdesigntutorialz.com" target="_self">
<img src="/images/nova.jpg" alt="web design tutorialz" border="2"/>
</a>
</body>
</html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click the following link</p>
<a href="https://www.webdesigntutorialz.com" target="_self">
<img src="/images/nova.jpg" alt="web design tutorialz" border="2"/>
</a>
</body>
</html>
The above example will produce a result where you can click on the image that will take you directly to web design tutorialz home page. You can try that out yourselves and take note that it is adviceable to store all the images which you will make use of for your web design project in one folder.
RECOMMENDED: Html Tables
Mouse-Sensitive Images
The Html and XHTML standards provides a feature that allows you embed various links inside a single image. What i mean by that is that different links can be created on a single image based on different coordinates which are available on the image. Once different links are attached to different coordinates, we can then click various parts of the image in order to open target documents. Such mouse-sensitive images are known as image maps.
There are two ways in which we can 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 the corresponding <map> and <area> tag.
Server-Side Image Maps
Here you simply put your image inside a hyper link and use ismap attribute which makes it a 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 makes use of the mouse-pointer coordinates to determine which document to deliver back to the browser.
when ismap is been used, the href attribute of the containing <a> tag must contain the URL of a server application like a cgi or PHP script etc, for the incoming request to be processed based on the passed coordinates.
The mouse position coordinates are screen pixels counted from the upper-left corner of the image, that begins with (0,0). The coordinates, preceded by a question mark, are added to the end of the of the URL.
For example, if a user clicks on 20 pixels up and 30 pixels down from the upper-left side of the following image; which has been generated by the following code snippet:
RECOMMENDED: Html Element
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click the following link</p>
<a href="/cgi-bin/ismap.cgi" target="_self">
<img src="/images/nova.jpg" alt="Web design tutorialz" border="2"/>
</a>
</body>
</html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click the following link</p>
<a href="/cgi-bin/ismap.cgi" target="_self">
<img src="/images/nova.jpg" alt="Web design tutorialz" border="2"/>
</a>
</body>
</html>
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 link whatever documents you like to these coordinates; /cgi-bin/ismap.cgi?20, 30
This way you can assign different links to various coordinates of the image and when the coordinates are clicked, the linked document will be opened.
Note: Cgi programming is not part of our tutorial courses, at least not yet so you will learn cgi when you study Perl programming. You can write some script to process these passed coordinates using PHP or any other script as well. For now lets concentrate on html.
Client-Side Image Maps
The client side image maps are enabled by the usemap attribute of the <img/> tag and is defined by <map> and <area> extension tag.
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 usemap attribute is the value which will be used in a <map> tag to link map and image tags. The <map> with <area> tags defines all the image coordinates as well as the corresponding links.
The <area> tag inside the map tag, is used in specifying the shapes and the coordinates to define the boundaries of each clickable hotspot available on the image. Below is an example of the image map:
RECOMMENDED: Html Tags
<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src="/images/nova.jpg" alt="Web design tutorialz" border="2" usemap="#html"/>
<!-- Create Mappings-->
<map name="html">
<area shape="circle" coords="80,80,20"
href="/html/index.html" alt="HTML Link" target="_blank" />
<area shape="rect" coords="4,6,60,60" alt="CSS Link"
href="/CSS/index.html" target="_blank" />
</map>
</body>
</html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src="/images/nova.jpg" alt="Web design tutorialz" border="2" usemap="#html"/>
<!-- Create Mappings-->
<map name="html">
<area shape="circle" coords="80,80,20"
href="/html/index.html" alt="HTML Link" target="_blank" />
<area shape="rect" coords="4,6,60,60" alt="CSS Link"
href="/CSS/index.html" target="_blank" />
</map>
</body>
</html>
Coordinate System
Actual value of the coordinate is totally dependent on the shape in question. Here is a summary to be followed by detailed examples:
rect=X1, Y1, X2, Y2
x1, y1 are the coordinates of the upper left-corner of the rectangle; x2, y2 are the coordintates 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 defines the 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 related to the upper-left corner of the image. Each shape has a related URL. You can use any image software to know the coordinates of various positions.
RECOMMENDED: Html Text Links
HTML Email Tag
Html <a> tag provides you option to specify an email address to send an email. While using <a> tag as an email tag, you will use mailto; email address along with href attribute. Following is the syntax of using mailto instead of using http.
<a href="mailto: abc@example.com">Send Email</a>
This code will generate the following link which you can use to send email.
Send Email
If a user clicks this link, it launches one Email client (like Lotus Notes, Qutlook Express etc.) installed on the user's system. There is another risk to use this option to send email because if user does not have email client installed on their computer then it would not be possible to send emails.
Default settings
You can specify a default email subject and email body along with your email address. Folloowing is the example to use default subject and body.
<a href="mailto:abc@example.com?
subject=feedback&body=message">
Seend Feedback
</a>
subject=feedback&body=message">
Seend Feedback
</a>
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be studying about Html Frames
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.