| |
|
|
| | Помогите, пожалуйста. Есть карта, поделенная на области. При наведении на каждую область должна появляться подсказка.
Сейчас в приведенном ниже коде я сделала так, что подсказка появляется в фиксированном месте - в правом верхнем углу картинки. Хотелось бы, чтобы подсказка появлялась немного ниже и справа от курсора мыши. Что мне добавить в код, чтобы это получилось?
title в теге area мне не подходит.
Код у меня такой:
<head>
<script type="text/javascript" src="javascripts/jquery/jquery-1.3.2.js"></script>
<script>
$(document).ready(function(){
$('#epicentr').hover(function() {$('#ep').css({'visibility' : 'visible'});},
function() {$('#ep').css({'visibility' : 'hidden'});})
$('#nova_linija').hover(function() {$('#nl').css({'visibility' : 'visible'});},
function() {$('#nl').css({'visibility' : 'hidden'});})
});
</script>
<style>
#container{
display: block;
background-color:#DCE8FA;
padding: 5px 0;
width: 800px;
}
#ep,#nl{
visibility: hidden;
position:absolute;
left:500px;
top: 10px;
background-color: #CBDEF9;
width: 300px;
height: 300px;
opacity:0.9; /*** Mozilla,Opera **/
filter: alpha(opacity=90); /*** IE **/
padding: 20px;
}
</style>
</head>
<body>
<div id="container">
<img src="map1 copy_dom.gif" width="800" height="474" border="0" usemap="#testMap">
<map name="testMap">
<area coords="146,169,191,213" nohref id="epicentr">
<area coords="344,129,395,177" nohref id="nova_linija">
</map>
</div>
<div id="ep">Текст появляется при наведении курсора</div>
<div id="nl">Текст появляется при наведении курсора222222</div>
</body>
|
| |
| |
|
