需要链接留页面上约束相对于图像

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玩弄这些链接以正确运行。

首先，你有图像标记。使用usemap属性必须是'#mapname'。在这段代码中，我的地图名称是'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 =“”属性是基于图像文件的图像像素，而不是实际的显示大小。因此，他们不会偏离基于缩放的图像覆盖范围的预期区域。