时间戳

首页 > 解决方案 > 需要帮助定位 HREF 图像

html - 需要帮助定位 HREF 图像

问题描述

我对 HTML 编码真的很陌生，但我参加了几年的几门课，所以我几乎不熟悉。我一直在查找代码来做任何我想做的事情。我无法定位带有链接的图像。

到目前为止，这是我的图像代码：

<a href="https://www.soundcloud.com/love_seat"><img src="https://i.imgur.com/OSe8qRJ.png" onMouseOver="this.src='https://i.imgur.com/HxtpEDz.png';" onMouseOut="this.src='https://i.imgur.com/OSe8qRJ.png';" width="200" height="200" title="music" alt="Music"></a>
<a href="https://grnbrier.bigcartel.com/"><img src="https://i.imgur.com/DwNXARK.png" onmouseover="this.src='https://i.imgur.com/rhseWJq.png';" onmouseout="this.src='https://i.imgur.com/DwNXARK.png';" class="image-margin" width="200" height="200" title="clothing" alt="Clothing"></a>
<a href="https://www.instagram.com/grnbrier/"><img src="https://i.imgur.com/QZetL5S.png" onmouseover="this.src='https://i.imgur.com/bxD1xCk.png';" onmouseout="this.src='https://i.imgur.com/QZetL5S.png';" width="200" height="200" title="socialmedia" alt="Socialmedia"></a>

这看起来像： 错误代码

我需要将 CD 磁盘盒放在人体模型的左侧。谁能帮我吗？

标签： html

解决方案

对于这种工作，您需要使用HTML Image Maps，这里我为您制作了这个

<img src="https://i.stack.imgur.com/kFQzW.png" alt="" usemap="#map" width="800" height="200">

  <map name="map">
    <area shape="rect" coords="6,54,115,154" title="music" alt="Music" href="https://www.soundcloud.com/love_seat">
    <area shape="rect" coords="477,52,572,158" title="clothing" alt="Clothing" href="https://grnbrier.bigcartel.com/">
    <area shape="rect" coords="587,49,712,158" title="socialmedia" alt="Socialmedia" href="https://www.instagram.com/grnbrier/">
  </map>

注意：

我已将图像的大小设置为 800x200，如果您想更改需要更改每个区域的坐标，只需进行一些计算即可。

这是更精确的地图

<img src="https://i.stack.imgur.com/kFQzW.png" alt="" usemap="#map" width="800" height="200">

  <map name="map">
    <area shape="poly" coords="6,54,118,63,113,155,7,143" title="music" alt="Music" href="https://www.soundcloud.com/love_seat">
    <area shape="poly" coords="508,70,509,53,524,53,524,71,538,74,537,101,544,102,549,121,539,110,536,116,548,124,565,143,573,159,536,158,559,146,521,121,483,143,483,153,476,139,488,124,499,188,496,114,491,117,492,104,498,97,493,75" title="clothing" alt="Clothing" href="https://grnbrier.bigcartel.com/">
    <area shape="poly" coords="615,48,685,48,700,55,711,68,711,131,708,145,688,161,613,160,598,153,588,136,588,75,597,57" title="socialmedia" alt="Socialmedia" href="https://www.instagram.com/grnbrier/">
  </map>

我觉得我正在用 SVG 重新创建图像：D

推荐阅读