CSS - как исправить зависание?

Question

мне нужно изменить фоновое изображение из id=main_touch, когда кто-то парит над class=buttontpt

следующим образом парения не работает.

<style> 
    #main_touch { 
     background: url(custom12/<?=$this->mylanguage;?>.jpg) 0 0 no-repeat; 
    } 
    #main_touch:hover { 
     background: url(custom12/<?=$this->mylanguage;?>.hover.jpg) 0 0 no-repeat; 
    }  
</style> 

<img src="custom12/<?=$this->mylanguage;?>.jpg" width="1024" height="768" border="0" usemap="#map" id="main_touch" />   
    <map name="map"> 
     <area shape="rect" coords="26,72,405,194" nohref="nohref" class="buttontpt" /> 
     <area shape="rect" coords="26,240,405,362" nohref="nohref" class="buttontpt" /> 
     <area shape="rect" coords="26,403,405,525" nohref="nohref" class="buttontpt" /> 
     <area shape="rect" coords="26,555,405,677" nohref="nohref" class="buttontpt" /> 
    </map> 

Answer 1

Использование JQuery, это очень просто:

$(document).ready(function() { 

    $(".buttonpt").mouseover(function() { 
     $("#main_touch").attr("src", "path/to/other/image"); 
    }); 

    $(".buttonpt").mouseout(function() { 
     $("#main_touch").attr("src", "path/to/original/image"); 
    } 
}); 

Использование чистого CSS, это немного сложнее. Если вы хотите изменить фон #main_touch, когда .buttonpt зависает, вам нужно убедиться, что изображение #main_touch появится ПОСЛЕ .buttonpt в HTML.

Затем вы можете сделать что-то вроде этого:

.buttonpt:hover ~ #main_touch { 
    background: url("path/to/other/image"); 
} 

Answer 2

Ваше изображение имеет SRC. Вы должны удалить это и сделать это только с фоном и div. Не используйте недопустимый html! И тогда вы можете позиционировать DIV, где вы любите .:

#first { 
 
     background: url(http://lorempixel.com/400/200/) 0 0 no-repeat; 
 
     width:400px; 
 
     height:200px; 
 
    } 
 
    #second:hover #first{ 
 
     background: url(http://lorempixel.com/600/200/) 0 0 no-repeat; 
 
    }

 
<div id="second">hover on it to change it 
 
<div id="first"><div> 
 
</div>