☰

是否可以在图像本身添加可点击的链接？

tag-icon • tag-icon images hyperlink links
是否可以在图像本身添加可点击的链接？

我有一张图片，我想在上面添加一个链接。当有人点击链接时，他们会转到指定的网站。可以这样做吗？

澄清我的问题

我正在上传图片，需要其中的链接

答案1

没有常见的图像格式可以在查看时通过点击自动进入网站。

您可以用 HTML 创建一个小型网页，该网页将引用该图像，并在用户点击该图像时转到另一个页面（或网站）。

该页面的代码如下所示：

<a href="Title"><img src="image.png"></a>

或者，您可以创建 SVG 文件，这是一种矢量图形文件。它们可以包含链接，但它们不是标准的光栅图像。

您还可以创建仅由静态图像组成的 Flash 动画。单击后，它可以指向另一个网站。但是，Flash 不是图像格式。

答案2

阅读本文让我了解到使用 SVG 图像可以实现这一点。

例如，您可以创建一个可点击矩形的图像，该图像可以引导您进入您的网站：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<a xlink:href="HTTP://YOURSITEGOESHERE.COM" target="_top">

<rect x="10" y="20" width="75" height="30" style="stroke: #333366; fill: #6666cc"/>

</a>

</svg>

将代码复制并粘贴到文本编辑器中，保存为文件.svg，然后在 Web 浏览器中打开该文件。

答案3

我不熟悉任何在其规范中包含链接的常见图像格式...除了SVG，即矢量图形。

在 SVG 中，你可以使用<a>元素。以下是示例：

<svg width="140" height="30"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG"
     target="_blank">
    <rect height="30" width="120" y="0" x="0" rx="15"/>
    <text fill="white" text-anchor="middle" 
          y="21" x="60">SVG on MDN</text>
  </a>

</svg>

您还可以使用以下方式嵌入光栅图像<image>元素和 base64 编码的图像数据，然后按照上述方法将其设为链接。但是，您可能要将图像上传到的任何服务都限制为 JPEG/PNG/GIF 等格式，并且不接受 SVG。

否则，如果您想要以 JPEG、PNG、BMP 或 GIF 格式存储和运行链接，那么据我所知这是不可能的，因为这根本不在他们的规格之内。

答案4

我想你可能正在寻找图像映射HTML 的功能。您可以使用它来定义图像中要视为链接的各个区域，或者请求浏览器在跟踪图像时将单击图像的位置报告为查询参数。但是，如果您无法提供必要的 HTML，这将不起作用。

除了简单图像之外，还需要其他格式（例如 SWF、SVG、IFRAMEd 页面小程序、Java 小程序等对象）来携带嵌入链接所需的附加信息。

相关内容