圖像地圖圖像替換onMouseOver

我期待有一個完整的頁面圖像，圖像的一部分，當盤旋時，將圖像更改爲原始黑色&白色圖像的彩色版本。我試圖用圖像地圖& onMouseOver做這件事，但沒有取得任何成功。只有兩個圖像被使用，一個顏色和一個黑色和白色的。圖像地圖圖像替換onMouseOver

我只想擁有它，這樣當你將鼠標懸停在黑白圖像的一部分上時，整個事物就變成了彩色版本，並且onMouseOut恢復爲黑色和白色。我將此作爲博客的啓動畫面，並且懸停部分將作爲該網站的鏈接。

感謝您的幫助

來源

2010-07-23 flash

只是想讓你知道我發現了一些需要調整CSS以調整效果才能正常工作的IE錯誤（我注意到IE會激活超出'a'標記大小的鏈接）。看到我編輯的CSS的變化。 – ScottS 2010-07-26 13:47:21

如果你不介意你的懸停區域是「方」，然後使用純CSS這應該工作（注意，你適當的圖像更換背景顏色和對a的border是隻是爲了說明）。經測試在Firefox，IE7，IE8：

HTML：

<a href="#"><span class="img"></span></a>

CSS （編輯以IE7-8 BUGS）：

body { 
margin: 300px 218px 178px 400px; /*see explanation below css*/ 
width: 22px; /*total width of a tag including padding and borders*/ 
height: 22px; /*total height of a tag including padding and borders*/ 
} 

a { /*warning, do not give this position: use margin to position it*/ 
width: 20px; 
height: 20px; 
display: block; 
border: 1px solid red; 
overflow: visible; 
/*deleted margin from this: moved to body*/ 
} 
a span.img { 
position: absolute; /*this gives it block display by default*/ 
top: 0; 
left: 0; 
z-index: -1; 
background-color: yellow; /*bw image here*/ 
width: 640px; /*image width*/ 
height: 500px; /*image height*/ 
} 
a:hover span.img { 
background-color: blue; /*color image here*/ 
} 
/*deleted the a:hover span.img:hover as it was not needed after all*/

當然，如果IE6是一個問題，那麼你需要用JavaScript來做點什麼來識別span:hover。

添加於編輯：我發現a標籤有時會懸停在IE瀏覽器定義區域之外。爲了避免這種情況，身體必須邊緣放置在使得lefttop和位置a標記和right和bottom必須彌補在圖像大小減去a標籤的總寬度的差。

來源

2010-07-23 21:38:27 ScottS

圖像地圖圖像替換onMouseOver

回答

相關問題