需要鏈接留頁面上約束相對於圖像

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 =「」屬性是基於圖像文件的圖像像素，而不是實際的顯示大小。因此，他們不會偏離基於縮放的圖像覆蓋範圍的預期區域。