在html/jquery/javascript中選擇堆疊圖像的部分

我有一張英國地圖，分解成不同的地理區域。我想這樣做是爲了當用戶將鼠標懸停在該部分上時，會出現一些文字。在html/jquery/javascript中選擇堆疊圖像的部分

我的問題是，什麼是讓圖像做到這一點的最佳方式。

我嘗試過的一種方法是在固定大小的畫布內爲每個區域的正確位置創建一個png文件，並帶有完全透明的背景。這可以將所有區域顯示爲一個完整的地圖。但是不允許我在每個圖像部分添加一個句柄，因爲它們堆疊在一起，因此只有最上面的一個可用。

我也試圖在上面放置一個「區域」來嘗試定義一個熱點。然而，這還沒有工作的形狀太複雜......

下面是HTML/CSS標記

<script type="text/javascript"> 
$(document).ready(function() { 
     $('#scot').hide(); 
     $('#wales').hide(); 

     $('#scotmap').click(function() { 
      $('#scot').show(); 
     }); 
     $('#img2').click(function() { 
      $('#wales').show(); 
     }); 
    }); 
</script> 

<div id="wrapper"> 
    <div id="img1" class="mappiece"> 
     <img src="Images/map/scotland.png" alt="Scotland"> 
    </div> 
    <div id="img2" class="mappiece"> 
     <img src="Images/map/nw.png" alt="Scotland"> 
    </div> 
    <div id="img3" class="mappiece"> 
     <img src="Images/map/se.png" alt="Scotland"> 
    </div> 
    <div id="img4" class="mappiece"> 
     <img src="Images/map/wales.png" alt="Scotland"> 
    </div> 
    <div id="img5" class="mappiece"> 
     <img src="Images/map/ireland.png" alt="Scotland"> 
    </div> 
    <div id="img6" class="mappiece"> 
     <img src="Images/map/yarmouth.png" alt="Scotland"> 
    </div> 
    <div id="img7" class="mappiece"> 
     <img src="Images/map/york.png" alt="Scotland"> 
    </div> 
    <div id="map" class="mappiece"> 
     <area id="scotmap" shape="poly" coords="76,9,76,50,87,50,87,92,96,92,96,101,105,101,105,132,120,132,120,122,132,124,137,120,151,124,154,128,160,127,163,129,171,125,173,119,164,92,147,76,164,37,144,7" nohref alt="Scotland Map" /> 
</div> 
</div> 
<div id="text"> 
    <div id="scot"> 
     <p>Hello Scotland</p> 
    </div> 
    <div id="wales"> 
     <p>Hello Wales</p> 
    </div> 
</div> 


body{background-color:#fff;} 

#wrapper{ 
width:237px; 
height:258px; 
position: relative; 
} 

.mappiece { 
position: absolute; 
width:237px; 
height:258px; 
top:0; 
left:0; 
} 

#img1 { 
z-index:80; 
} 
#img2 { 
z-index:20; 
} 
#img3 { 
z-index:30; 
} 
#img4 { 
z-index:40; 
} 
#img5 { 
z-index:50; 
} 
#img6 { 
z-index:60; 
} 
#img7 { 
z-index:70; 
}

在正確的方向的點，不勝感激。根據鼠標懸停/鼠標/點擊jquery事件，我對這些都可以。這只是我正在努力的圖像處理。

親切的問候

來源

2012-06-18 Stevo_300

看看http://stackoverflow.com/questions/4546275/selecting-regions-of-an-image-in-a-jquery-wizard/4546453#4546453 –

我認爲你可以使用HTML <區> COORDS屬性在這裏。有關更多詳細信息，請參閱鏈接http://www.w3schools.com/TAGS/att_area_coords.asp。

來源

2012-06-18 15:54:11 sushil

謝謝Sushil，我試圖做一個從上面的代碼中可以看到，有很多座標，所以我要麼座標太多，要麼在CSS中出現錯誤。不幸的是我不確定哪個。 –

我看到你的代碼與我提供的鏈接完全不同。在鏈接中，我提供了一個單獨的地圖，其中爲每個地理區域定義了座標，點擊該地圖將打開該地區的放大圖像。同樣，在這裏您可以使用單個地圖，您可以在其中指定所有地區的座標，而不是嘗試組合每個地理區域。 – sushil

感謝您的建議，問題與我的HTML代碼和使用區域標記完美工作。 –

什麼ü意味着與

但是這也沒有工作的形狀太複雜......

如果你的意思是他們太複雜的代碼，你可以使用這樣的工具：

http://www.image-maps.com/

這將允許您創建多邊形區域並獲取生成的html，只需單擊以創建所需的形狀。

然後你可以有相關的這些事件偵聽器（點擊，超過等）來處理文本顯示

來源

2012-06-18 15:47:01 Luca

在html/jquery/javascript中選擇堆疊圖像的部分

回答

相關問題