Html 简明教程
HTML - Image Links
图像也可以在 HTML 中用作链接,这意味着通过单击图像,我们可以导航到其他网页或资源。HTML 图像链接在创建诸如照片库、作品集、在线商店等网站时非常有用。在本文中,我们将学习如何使用图像创建超链接。它类似于 * HTML - Text Link* 。
Images can also be used as links in HTML which means by clicking the images we can navigate to another web pages or resources. HTML Image links are very useful in creating websites like photo galleries, portfolio, online stores and so on. In this article, we will learn how to use images to create hyperlinks. It is simmlar to the HTML - Text Link.
To create an HTML image link, we need <img>*tag and an *anchor element. The image element is used to display the image on the web page, and the anchor element is used to specify the destination URL of the link.
Here, the href attribute of <a> element contains the destination link and src attribute of <img> tag contains the path of image.
Syntax
此处,<a> 元素的 href 属性包含目标链接,<img> 标签的 src 属性包含图像路径。
Here, the href attribute of <a> element contains the destination link and src attribute of <img> tag contains the path of image.
<a href=" destination URL">
<img src="image URL" alt="alternative text">
</a>
Examples of HTML image link
以下是解释 HTML 中图像链接用法的一些示例代码。
Here are some example codes that explains the usage of image links in HTML.
Create hyperlink for an Image
在以下示例中,我们正在使用一个图像作为超链接。如果您执行以下代码,一个图像将显示,如果点击它,页面将跳转到 Tutorials Point 的主页。
In the following example, we are using an image as hyperlink. If you execute the below code, an image will be displayed and if we click on it the page will redirect to the home page of Tutorials Point.
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<a href="https://www.tutorialspoint.com">
<img src="/html/images/logo.png"
alt="Tutorials Point"
border="0" />
</a>
</body>
</html>
Mouse-Sensitive Images
HTML 和 XHTML 标准提供了一个允许我们在一个图像内部嵌入多个不同链接的功能。我们可以在单幅图像上基于图像上的不同可用坐标创建不同的链接。
The HTML and XHTML standards provides a feature that lets us embed several different links inside a single image. We can create different links on the single image based on different coordinates available on the image.
一旦链接附加到所有坐标,点击图像的不同部分会将我们重定向到目标文档。这样的对鼠标敏感的图像被称为图像地图。
Once the links are attached to all coordinates, clicking on the different parts of the image redirect us to target documents. Such mouse-sensitive images are known as image maps.
有两种创建图像地图的方法:
There are two ways to create image maps:
在 server-side image maps 中,我们只是将图像放在超链接里面,并且使用 ismap 属性,这使其成为特殊图像,而且当用户单击图像中的某些地方时,浏览器将鼠标指针的坐标与 <a> 标签中指定的 URL 一起传递到网页服务器。服务器使用鼠标指针坐标来确定向浏览器传送哪个文档。
In the server-side image maps, we simply put the 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.
当使用 ismap 时,容器 <a> 标签的 href 属性必须包含一个服务器应用程序的 URL,例如一个 CGI 或 PHP 脚本,以基于传递的坐标处理传入请求。
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 to process the incoming request based on the passed coordinates.
鼠标位置的坐标是屏幕像素,从图像的左上角开始计数,从 (0,0) 开始。坐标在问号之前,被添加到 URL 的末尾。
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.
以下代码片段演示了服务器端图像地图的使用。
The following code snippet demonstrates the use of server-side image maps.
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>
Click on the Image to get its coordinates.
</p>
<a href="#" target="_self">
<img src="/images/logo.png"
alt="Tutorials Point"
ismap/>
</a>
</body>
</html>
在执行以上代码时,tutorialspoint 徽标将显示。当我们点击徽标时,地址栏将显示相应的坐标,如下所示。
On executing the above code, tutorialspoint logo will be displayed. When we click on the logo, the address bar will show the respective coordinate as shown below.
这样我们就能为图像的不同坐标指定不同的链接,并且当点击那些坐标时,我们将被重定向到链接的文档。要了解有关 ismap 属性的更多信息,请查看 @ How to use Image ismap?
This way we can assign distinct links to different coordinates of the image and when those coordinates are clicked, we will be redirected to the linked documents. To learn more about ismap attribute, check How to use Image ismap?
@ Client side image maps 由 <img /> 标签的 usemap 属性启用,并且由特殊 <map> 和 <area> 扩展标签定义。<map> 与 <area> 标签一起定义所有图像坐标和相应的链接。map 标签内部的 <area> 标签,指定形状和坐标以定义图像上的每个可点击热点区域的边界。
Client side image maps are enabled by the usemap attribute of the <img /> tag and defined by special <map> and <area> extension tags. The <map> 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 to define the boundaries of each clickable hotspot available on the image.
将构成地图的图像使用 <img /> 标签像普通的图像一样插入到页面中,只不过它带有称为 usemap 的额外属性。
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.
运行以下代码时,将显示一张带有可点击区域的图像。如果您单击其中一个区域,您将被重定向到该部分的教程。
On running below code, an image with clickable areas will be displayed. If you click one of the area you will be redirected to tutorial of that part.
要了解 coords 属性的值是如何计算的,您可以访问 @ coords attribute 的说明。
To know how the value of coords attribute is calculated, you can visit explanation of coords attribute
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Welcome to our interactive map!</h1>
<p>
Click on a region to visit the
respective language page:
</p>
<img src="/html/images/lang.jpg"
usemap="#langmap"
alt="language Map" />
<map name="langmap">
<area shape="rect"
coords="0,0,180,165"
alt="HTML"
href="html/index.htm"
target="_blank"
hreflang="en" />
<area shape="rect"
coords="180,0,375,167"
alt="JavaScript"
href="javascript/index.htm"
target="_blank"
hreflang="en" />
<area shape="rect"
coords="0,166,180,338"
alt="PHP"
href="/php/index.htm"
target="_blank" hreflang="en" />
<area shape="rect"
coords="180,165,375,338"
alt="ReactJS"
href="reactjs/index.htm"
target="_blank"
hreflang="en" />
</map>
</body>
</html>
Coordinate System in HTML Images
@ coordinates 的实际值完全取决于可点击区域的形状。让我们了解不同形状的坐标。
The actual value of coordinates is totally dependent on the shape of the clickable area. Let us understand the coordinates of different shapes.
Shape |
Coordinates |
Description |
Rectangle |
x1 , y1 , x2 , y2 |
Where, 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 |
Where, xc and yc are the coordinates of the center of the circle, and radius is the circle’s radius. A circle centred at 200,50 with a radius of 25 would have the attribute coords="200,50,25". |
Polygon |
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". |