如何在懸停時進行圓形映射圖像更改？

我有一個圓形的圖像，我設法找到如何在先前的問題中映射。我現在想知道當我將鼠標懸停在圖像上時，如何改變圖像。它有一個映射區域。我有一個問題。如何在懸停時進行圓形映射圖像更改？

HTML版本，而CSS在那裏我相信「USEMAP =」＃imagechange」「是造成問題：

<img src="1.png" 
    onmouseover="this.src='2.png'" 
    onmouseout="this.src='1.png'" 
    width="100" height="100" 
    alt="usemap" border="0" 
    usemap="#imagechange"/> 
<map name="imagechange"> 
    <area shape="circle" coords="50,50,50" href="image.com" /> 
</map>

它的時候，我的區域（= 100×100面積減去圈區域內只能）。我也有一個css版本，根本不起作用。

HTML版本的CSS：

div class="imagechange" > 
<img src='foundation/images/Twitter.png' 
      title="Map Image" 
      alt="usemap" border="0" 
      usemap="#imagechange"/> 
<map name="imagechange"> 
    <area shape="circle" coords="50,50,50" href="index.html" /> 
</map>

CSS

 .imagechange { 
width: 100px; 
height:100px; 
display:block; 
overflow:hidden; 
border-radius:50px; 
-webkit-border-radius:50px; 
} 

.imagechange:hover { 
border-radius:0px; 
-webkit-border-radius:0px; 
}

來源

2013-10-13 Apolo Radomer

我想補充一點，上面給出的網址圖像源都在我的原始代碼中更正。這不是問題。 –

使用此：

<a href='http://www.google.com/'> 
    <img src='1.png' onmouseover="this.src='2.png'" onmouseout="this.src='1.png'" style='border:0px; border-radius:999px; -webkit-border-radius:999px;'/> 
</a>

來源

2013-10-13 12:10:32 Mobo

我編輯我的代碼。現在檢查。我的腳本和你一樣版本二代碼 – Mobo

我做到了。我看不到代碼中的任何地方，當我懸停（鼠標懸停）時，將顯示第二個圖像。我必須在CSS代碼上添加背景嗎？ –

編輯你的問題並說出你的地圖區域是什麼？還要說你什麼時候想要它。我的意思是默認或懸停？ – Mobo

如何在懸停時進行圓形映射圖像更改？

回答

相關問題