Изменение цвета при OnMouseOver

Question

Я хочу, чтобы изменить цвет детали из изображения, когда 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> 

Что я делаю неправильно?

Answer 1

Области не могут иметь цветов фона; попробуйте это:

<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> 

Answer 2

Попробуйте этот код ..

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 ..>, который нуль в коде .. Вам нужно отправить строку как идентификатор map элемента