Question

我正在学校里尝试将图像转换为链接，但到目前为止链接并未包含在图像中，而是整个行，我尝试查看几个示例，但到目前为止没有一个对我有效。这是我的代码

＆＃13;

<!DOCTYPE html>
<html>

<body>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <meta charset="utf-8">
  <title>Alpha page</title>
  </head>
  <p>The image is a link. You can click on it.</p>

  <a href="https://www.youtube.com">
    <img src="youtube.png" alt="Youtube">
  </a>

  <p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.</p>

</body>

</html>

＆＃13;

Answer 1

我想我知道你的意思，但如果我错了就启发我。

您尝试使用png图片，但如果您在可见图片外单击，则链接也会正常工作。（白色区域）这是因为链接是H x W

的完整图像

示例

<!DOCTYPE html> <html> <body> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <meta charset="utf-8"> <title>Alpha page</title> </head> The image is a link. You can click on it. <a href="https://www.youtube.com"> <img src="https://cdn3.iconfinder.com/data/icons/social-icons-5/607/YouTube_Play.png" alt="Youtube"> </a> We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image. </body> </html>

如果您只想要某个区域，则必须使用image-map。 W3 LINK

我使用this site来缩短时间。

示例

<!DOCTYPE html> <html> <body> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <meta charset="utf-8"> <title>Alpha page</title> </head> The image is a link. You can click on it. <map name="image-map"> <area target="" alt="youtube" title="" href="https://www.youtube.com" coords="304,303,302" shape="circle"> </map> <img src="https://cdn3.iconfinder.com/data/icons/social-icons-5/607/YouTube_Play.png" usemap="#image-map"> </a> We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image. </body> </html>

将图像转换为链接

1 个答案: