код конечно корявый, но это только наброски и у меня возникла проблема.
<style>
#vkl {position: absolute; display: none; left: 300px; top: 0px; width: 200px; height: 350px; background-color: red;}
#div {position: absolute; left: 0px; top: 0px; width: 1010px; height: 50px;}
</style>
<div id = "div" align = "center">
<table>
<td>
<img src = "images/1.jpg" id = "img1" width = "200" height = "50" onmouseover = "show1()">
</td><td>
<img src = "images/2.jpg" id = "img2" width = "200" height = "50" onmouseover = "show2()">
</td><td>
<img src = "images/3.jpg" id = "img3" width = "200" height = "50" onmouseover = "show3()">
</td><td>
<img src = "images/4.jpg" id = "img4" width = "200" height = "50" onmouseover = "show4()">
</td>
</table>
<div id = "vkl" onmouseout = "hide()">
<img src = "images/1_1.jpg" width = "190" height = "100" onclick = "al1()"><br>
<img src = "images/1_2.jpg" width = "190" height = "100" onclick = "al2()"><br>
<img src = "images/1_3.jpg" width = "190" height = "100" onclick = "al3()">
</div>
</div>
<script>
function al1(){
alert("1");
}
function al2(){
alert("2");
}
function al3(){
alert("3");
}
function show1(){
document.getElementById("vkl").style.left = 100;
document.getElementById("vkl").style.top = 50;
document.getElementById("vkl").style.display = "block";
document.getElementById("im").src = "images/318.jpg";
}
function show2(){
document.getElementById("vkl").style.left = 300;
document.getElementById("vkl").style.top = 50;
document.getElementById("vkl").style.display = "block";
document.getElementById("im").src = "images/301.jpg";
}
function show3(){
document.getElementById("vkl").style.left = 500;
document.getElementById("vkl").style.top = 50;
document.getElementById("vkl").style.display = "block";
document.getElementById("im").src = "images/302.jpg";
}
function show4(){
document.getElementById("vkl").style.left = 700;
document.getElementById("vkl").style.top = 50;
document.getElementById("vkl").style.display = "block";
document.getElementById("im").src = "images/303.jpg";
}
function hide(){
document.getElementById("vkl").style.display = "none";
}
</script>
проблема состоит в этом блоке
<div id = "vkl" onmouseout = "hide()">
<img src = "images/1_1.jpg" width = "190" height = "100" onclick = "al1()"><br>
<img src = "images/1_2.jpg" width = "190" height = "100" onclick = "al2()"><br>
<img src = "images/1_3.jpg" width = "190" height = "100" onclick = "al3()">
</div>
если курсор выходит за див, то он должен скрыватся, что и делает благополучно, но вот он исчезает когда я выхожу за рамки первой картинки.
как можно поправить???
Спустя 1 час, 49 секунд (27.02.2011 - 18:14) ApuktaChehov написал(а):
Дело в том, что событие у тебя срабатывает на диве. При этом остальные картинки вообще тут ни причем. Формально, ты выходишь из дива когда заходишь на картинку по этому это и происходит. Я когда то тут уже задавал этот вопрос. Тоже меню делал. Решается он не совсем просто.
В ходе события необходимо проверить куда перешел курсор или откуда он пришел. Тогда можно очень тонко настраивать события.
Могу подкинуть кодец, для указания направления раскопок:
В ходе события необходимо проверить куда перешел курсор или откуда он пришел. Тогда можно очень тонко настраивать события.
Могу подкинуть кодец, для указания направления раскопок:
document.onclick = function(event)
{
var event = event || window.event;
var who = event.target || event.srcElement;
//Если кнопка была нажата не на элементе списка, то удаляем список
if(who !== '[dir HTMLOptionElement]')
input_obj.parentNode.removeChild(sel_div);
//Уничтожаем событие
document.onclick = null;
}
Спустя 30 минут, 50 секунд (27.02.2011 - 18:45) quickxyan написал(а):
спасибо, я впринципе понимал почему он скрывается и догадывался как можно обойти это, но оказалось, что только так)
спасибо за помощь
спасибо за помощь
_____________
печатаю со скоростью 320 минут в знак...
плюсуем карму не стесняемся