Есть примерно такой код, необходимо сделать так, что бы div не закрывался по клику на нём.
Разбираюсь довольно плохо, спёр с другого сайта, но для себя применить смог. Так что по возможности - максимально доступно.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type='text/css'>
.d {position:absolute;visibility:hidden;border:1px solid #00A;background-color:#EED;padding:2px}
</style>
<script type='text/javascript'>
var info=[], clicked=-1;
// создание массива подсказок:
function init(){
var i=0;
while (document.getElementById('sk'+i)!=null){
info[i]=document.getElementById('sk'+i);
i++;
}
}
// массив координат [X,Y]:
function findPos(obj){
var pos=[0,0];
if (obj.offsetParent) while (obj.offsetParent){
pos[0]+=obj.offsetLeft;
pos[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
else if (obj.x || obj.y){
if (obj.x) pos[0]+=obj.x;
if (obj.y) pos[1]+=obj.y;
}
return pos;
}
// показать подсказку:
function show(num, e){
hide();
var pos=findPos(document.getElementById('skbut'+num));
info[num].style.visibility='visible';
info[num].style.left=pos[0]+'px';
info[num].style.top=pos[1]+25+'px';
if(clicked!=num){
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
clicked=num;
}
else{
clicked=-1;
}
}
// спрятать подсказку:
function hide(){
for (var i=0; i<info.length; i++) info[i].style.visibility='hidden';
}
</script>
</head>
<body leftmargin='0' topmargin='0' marginheight='0' marginwidth='0' onload='init();' onclick='hide();'>
<!-- Очень хочется вынести контейнеры сюда -->
<div id='sk0' class='d'>000000000</div>
<div id='sk1' class='d'>111111111</div>
<div id='sk2' class='d'>222222222</div>
<div id='sk3' class='d'>333333333</div>
<div id='sk4' class='d'>444444444</div>
<!-- Очень хочется вынести контейнеры сюда -->
<button id='skbut0' onclick="show('0', event);">Button 1</button>
<br><br><center>
<button id='skbut1' onclick="show('1', event);">Button 2</button>
</center><br><br>
<button id='skbut2' onclick="show('2', event);">Button 3</button>
<br><br><center>
<button id='skbut3' onclick="show('3', event);">Button 4</button>
</center><br><br>
<button id='skbut4' onclick="show('4', event);">Button 5</button>
</body>
</html>
Простой
