鼠標懸停在圖像特定部分的圖像更改

<img src="C:/Users/ma/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png"width="453" height="453" alt="Planets" usemap="#planetmap"> 
<map name="planetmap"> 
<area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" alt="Sun" onmouseover="this.src='C:/Users/ma/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch12.png'" width="453" height="453" onmouseout="this.src='C:/Users/ma/Desktop/start_new_coin/rebulid from scratch/chaptermap/ch01ch01.png'" width="453" height="453"/> 
</map>

我試圖在鼠標懸停在圖像的特定區域時更改圖像。但它不會改變。這是我的代碼。我已經嘗試過，但它不會改變圖像懸停。鼠標懸停在圖像特定部分的圖像更改

來源

2016-02-22 Karen

呃...我沒有看到代碼？也許你需要添加它。 – Script47

歡迎來到StackOverflow！您的代碼尚不可見，請編輯帖子並添加源代碼。 – gariepy

可能[地圖標記]（https://developer.mozilla.org/en/docs/Web/HTML/Element/map）和[區域標記]（https://developer.mozilla.org/en/docs/Web/HTML /元素/區域） –

您正在使用this參照圖像，但this實際上是指觸發鼠標事件這是<area>的要素; <area>標記沒有可以使用JavaScript設置的src屬性。

您需要參考圖像不同，例如使用一個類或ID：

<img src="image1.png" id="image1" width="453" height="453" alt="Planets" usemap="#planetmap"> 
<map name="planetmap"> 
    <area shape="poly" coords="..." alt="Sun" 
     onmouseover="document.getElementById('image1').src='image2.png'" 
     onmouseout="document.getElementById('image1').src='image1.png'"/> 
</map>

（和溝上<area>標籤width和height屬性也一樣）

來源

2016-02-22 15:26:27

這個工作。是否有可能根據瀏覽器大小來改變圖像？我很困惑，因爲圖像地圖使用座標。 – Karen

是否有可能通過id而不是'image1'來獲得動態getelement。如果用戶在圖像停留時點擊圖像，並且當他再次懸停時，圖像會改變，並在此時鼠標移出，而不是圖像1 – Karen

對於響應式佈局，我會使用多個圖像有自己的圖像映射定義。 –

您可以使用圖像映射。例如：

<img src="path/to/picture.gif" width="374" height="162" usemap="#map1" id="image" /> 
<map name="panneaux"> 
    <area shape="rect" coords="92,19,261,66" onmouseover="action1()" alt="john" /> 
</map>

的Et勒JS：

action1() { 
    document.getElementbyId("image").src = "new image"; 
}

來源

2016-02-22 15:14:30 n1c01a5

我已經在我的代碼中嘗試過onmouseover，但它不起作用 – Karen

是否可以根據瀏覽器大小來改變圖像？我很困惑，因爲圖像地圖使用座標。 – Karen

對不起，我沒有測試過這個代碼...'coords'很糟糕 – n1c01a5

鼠標懸停在圖像特定部分的圖像更改

回答

相關問題