[英]Change color when onmouseover
我想在onmouseover
但未收到時更改圖像中的一塊顏色:
我的代碼:
<img src="demo_usa.png" width="960" height="593" alt="Planets" usemap="#planetmap">
<map name="planetmap" id="map">
<area id="myMap" shape="rect" coords="0,0,120,126" alt="Sun" href="#"
onMouseOver="colorSwitch(this.id, '#ff9999');" />
</map>
<script type="text/javascript">
function colorSwitch(id, color) {
element = document.getElementById(id);
element.style.background = color;
}
</script>
我究竟做錯了什么?
區域不能有背景顏色; 嘗試這個:
<div id="planetmap">
<img id="backgroundimage" src="demo_usa.png" width="960" height="593" alt="Planets"/>
<div id="planet.1" class="planetmarker" style="left:0px;top:0px;width:120px;height:126px;">
</div>
</div>
<style type="text/css">
.planetmarker {
position: absolute;
z-index:1;
}
.planetmarker:hover {
background-color: #ff9999;
}
</style>
您也可以使用 JavaScript:
<script type="text/javascript">
function setOpacity(id, level) {
element = document.getElementById(id);
element.style.opacity = level;
}
</script>
<style type="text/css">
.planetmarker {
position: absolute;
z-index:1;
background-color: #ff9999;
opacity: 0;
}
</style>
<div id="planetmap">
<img id="backgroundimage" src="demo_usa.png" width="960" height="593" alt="Planets"/>
<div id="planet.1" class="planetmarker" style="left:0px;top:0px;width:120px;height:126px;" onMouseOver="setOpacity(this.id, 1);" onMouseLeave="setOpacity(this.id, 0);">
</div>
</div>
試試這個代碼..
HTML:
<area shape="rect" coords="0,0,120,126" alt="Sun" href="#"
onMouseOver="colorSwitch('map', '#ff9999');" />
Javascript:
<script type="text/javascript">
function colorSwitch(id, color)
{
element = document.getElementById( id );
element.style.background = color;
}
</script>
請注意, this.id
將發送元素<area..>
的 id,即代碼中的 null。您需要將字符串作為map
元素的 id 發送
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.