突出顯示圖像區域 - 點擊鏈接時

我在網頁上有一個圖像（可以說是美國地圖），我在它下面有各種鏈接（可以說狀態名稱）（與圖像分開）。突出顯示圖像區域 - 點擊鏈接時

當我點擊州名鏈接時，圖像中的狀態區域（美國地圖圖像）應該突出顯示（或更改顏色等）。

我看到的所有示例都是關於將鼠標懸停在圖像區域上時突出顯示的圖像區域，但是我想單擊單獨的鏈接，結果突出顯示圖像區域。

與代碼示例或想法，請諮詢......

我的問題是與此類似： Highlight Section of Mapped Image when Mouseover Text on Webpage
，但我不明白的是一個......

來源

2013-07-12 Jasper

其中是html和css源代碼??? – falguni

http://stackoverflow.com/help/how-to-ask + http://stackoverflow.com/help/dont-ask – Paritosh

它是什麼樣的圖像？我會爲這樣的事情推薦一個svg。也許使用像raphael.js（例如參見http://raphaeljs.com/australia.html），如果我沒有記錯，它使用svg。 –

-2

有此問題的兩種方法，

首先是拍攝完整圖像並使用HTML創建圖像映射，否則這個http://www.image-maps.com/將使您的生活更容易創建圖像映射。單擊鏈接時，只需在圖像映射部分應用樣式。

第二個也是最好的解決方案是使用Google Maps API，您可以在Google地圖文檔中找到完整的文檔。

但期待完整的來源這個要求對我來說沒有意義:)，請嘗試使用上面的任何選項。

來源

2013-07-12 05:52:36 Exception

此代碼必須有幫助，我想!!!!與我們的類（例如.usaMap）或ID（例如#usaMap）

img:hover, img:focus { 
opacity:1; 
background-color:red; 
} 
img:not(:hover), img:not(:focus){ 
opacity:0.5; 
background-color:black; 
}

來源

2013-07-12 06:23:50 GilbertOOl

突出在鼠標懸停的地圖區域已經由提供更好：jquery.maphilight.js。在圖像本身上有很多使用鼠標懸停突出顯示的示例。

爲了突出圖像區域，從單獨的文本鏈接，這裏是我們能做些什麼：

假設你的圖像映射是：

<map name="mymapname"> 
    <area id="myAreaId" href="#" shape="poly" coords="32,71,116,77,142,81,145,125,34, 
    106" alt="Link" title="Default behavior"> 
... 
</map>

然後，你可以模仿的圖像區域的鼠標懸停從HREF鏈接：

<a id="mylink" href="#" onmouseover="$('#myAreaId').trigger('mouseover');" 
onmouseout="$('#myAreaId').trigger('mouseout');">My Link</a>

這不是最巧妙的解決方案，但做這項工作。

來源

2013-07-12 07:19:13 Jasper

突出顯示圖像區域 - 點擊鏈接時

回答

相關問題