HTML地圖和區域沒有顯示

我一直在試圖放置在一張圖片上的地圖，使其可以點擊，但是，該區域無法正常工作。當我使用Chrome開發人員工具檢查頁面時，它顯示爲0x0區域。這是代碼。HTML地圖和區域沒有顯示

<div class="col-sm-12 col-xs-12"> 
 
    <img class="img-responsive envia" src="assets/envviar.png" usemap="#Map" > 
 
    <map name="Map" id="Map"> 
 
    <area shape="rect" coords="200,200,200,200" href="#" alt="aqui"> 
 
    </map> \t 
 
</div>

，我想可以點擊的部分地方說：「AQUI」。

我添加了ID，因爲我看到了一些瀏覽器（如IE）需要的建議。謝謝。

來源

2017-03-17 Paco Meraz

'shape =「rect」coords =「200,200,200,200」'描述了一個矩形的角落都是相同的位置，所以它不需要空間...... – Johannes

你coords是不正確的：

<div class="col-sm-12 col-xs-12"> 
 
    <img class="img-responsive envia" src="https://i.stack.imgur.com/FRpHw.png" usemap="#Map" > 
 
    <map name="Map" id="Map"> 
 
    <area shape="rect" coords="530,248,575,270" href="#" alt="aqui" /> 
 
    </map> \t 
 
</div>

This online tool將可以很容易產生coords您areas。

你的座標不工作的原因是你爲所有4點設置了相同的座標，這意味着你的座標沒有大小。對於rect area，4個座標是左上角和右下角的水平/垂直位置，因此它們需要是不同的值。

來源

2017-03-17 16:42:27 APAD1

這個工作完美，是的，這是因爲coords。但是，在小屏幕上它不會工作。但jquery可以用來改變小屏幕和XL屏幕的座標。 –

是的，我會用這個庫來解決這個問題：https://github.com/davidjbradshaw/image-map-resizer非常容易實現。 – APAD1

您需要定義圖像的大小以使圖像映射起作用，這意味着它不會響應。你最好在看一個插件，使其按照你嘗試的方式工作。在附註上，Chrome開發工具不會顯示它的位置，但如果您將鼠標懸停，您將會看到它，這正是您設置它的位置。

我建議https://github.com/stowball/jQuery-rwdImageMaps獲得您正在尋找的響應式設計。

這下了票？但我是正確的，所以不管你不喜歡我的答案是真的。

來源

2017-03-17 16:43:59 IDED

對不起，我沒有downvote。我正在尋找另一種方式來解決它與JQuery的，但它實際上是APAD的方式說。它可能不會根據屏幕大小自行移動，但現在我可以使用jquery $（window）.width（）根據屏幕大小重新定義座標。 –

HTML地圖和區域沒有顯示

回答

相關問題