HTML Image Insert
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 −
<html>
<head>
<title>Image
Hyperlink Example</title>
</head>
<body>
<p>Click
following link</p>
<a
href = " https://nac-mit.blogspot.com/"_self">
<img src = "/images/logo.png" alt = "NACMIT " border
= "0"/>
</a>
</body>
</html>
Mouse-Sensitive Images
The HTML and XHTM standards
provides 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 is map 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 use map 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 link 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 mouse-pointer coordinates
to determine which document to deliver back to the browser.
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 upper-left corner of the following
image −
Which has been generated by the
following code snippet −
Example
<html>
<head>
<title>
Hyperlink</title>
</head>
<body>
<p>Click
following link</p>
<a
href = https://nac-mit.blogspot.com/"
target = "_self">
<img ismap src = "/images/logo.png" alt = "Computer"
border = "0"/>
</a>
</body>
</html>
No comments:
Post a Comment