需要链接在与图像相关的页面上保持受限

Question

好的，所以我需要一些输入来放置文本链接以保持页面上图像的静态.. 该图像基本上是一朵云，产品带有徽标，现在每个产品都附有文本链接。

最好的方法是什么？

目前我正在考虑创建一个 div，设置所需的宽度和高度。 然后从那。我将img绝对定位在div中，以及所有链接都绝对定位在同一个div中...... 这听起来对吗？

还有其他方法吗？

<div id="subheaderhome">

    <p class='hptext' id='wcp'> W</p>
    <p class='hptext' id='rp'> R</p>
    <p class='hptext' id='mp'> Meo</p>
    <img id="shopsol" src="images/solshairpiece.png" />
</div>

Answer 1

是的，该方法可行，但如果您希望仅根据图像定位链接，则应使用位置：相对位置：绝对位置。 position:absolute 从文档的正常流程中删除要定位的元素，并将其放置在页面上的确切位置。这意味着即使您在浏览器上放大或缩小，您的案例中的链接也将保持在相同的位置而页面的其余部分在视图中发生变化。这也会使您的页面在与您不同大小的屏幕上看起来很混乱。

Answer 2

我想您正在创建带有链接的图像。这是另一种开箱即用的解决方案。将链接措辞融入图像设计本身，并使用图像映射告诉浏览器图像的哪些部分将被视为可点击链接。然后，链接的位置实际上是图像本身的一部分，您可以跳过使用 CSS 来让这些链接正常运行。

首先，您有图像标签。使用必须为“#mapname”的 usemap 属性。在这段代码中，我的地图名称是“home”，所以我的 usemap 属性是“#home”。

<nav>
    <img class="navbar" src="./images/navbar.gif" usemap="#home" alt="Home, Auto     Service, Hours & Location, Contact Info, Image Gallery" />

然后，您以像素对的形式编写地图。在我的页面上，我有一个长按钮图像，而不是放置 5 次按钮图像，我用 5 个按钮副本制作了一张图像。每个区域标签覆盖图像的一个矩形 (shape="rect") 段。在这里的第一个，我从图像的左上角“0,0 ...（x，y）开始。矩形的右下角向右186像素，向下40像素第一点，所以它是 ...186, 40" href 应该是不言自明的，表示这些边界链接到它。

<map name="home">
        <area shape="rect" coords=" 0, 0, 186, 40" href="index.html" alt="Mortensen Motors Homepage" />
        <area shape="rect" coords=" 186, 0, 372, 40" href="auto_service.html" alt="Tullahoma Auto Service" />
        <area shape="rect" coords=" 372, 0, 558, 40" href="hours_and_location.html" alt="Located in Tullahoma, Tennessee" />
        <area shape="rect" coords=" 588, 0, 744, 40" href="contact_info.html" alt="Contact info" />
        <area shape="rect" coords=" 744, 0, 930, 40" href="image_gallery.html" alt="Mortensen Motors image gallery" />
    </map>
</nav>

所以我使用了一张图片，并制作了 5 个链接。这对于您正在做的事情来说是完美的，因为 coords="" 属性基于图像文件的图像像素，而不是实际显示尺寸。因此，它们不会因缩放而偏离预期的图像覆盖区域。