моя цель, как javascriptера - это научиться делать выпадющие меню и работать с графикой. вот первый скрипт, который, я думаю, подведет меня к моей цели ближе. этот скрипт делает всплывающие подсказки. мне бы хотелось, чтобы кто-нибудь объяснил его. строки я укажу.
| Код |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.tool_tip {
font-family: Tahoma, verdana;
font-size: 8pt;
position: absolute;
visibility: hidden;
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
/* styles */
background-color: #EEEEEE;
border: 1px #999999 dashed;
}
</style>
|
а вот сам скрипт.
| Код |
<script type="text/javascript">
<!--
ToolTip.offsetX=20; //смещения подсказки от курсора
ToolTip.offsetY=15; //
function ToolTip(obj, text) {
if(!obj||obj.nodeType!=1) throw "Illigal argument exception"; //обьект к кому привязываем подсказку
//-- Разметка подсказки ---
var tip=document.createElement("DIV");
tip.className="tool_tip";
tip.innerHTML=text;
document.body.appendChild(tip);
//-- события --
obj.onmouseout=function (ev) {
tip.style.visibility="hidden";
};
obj.onmousemove=function(ev) { //если не нужно что бы подскасзка бегала, то onmouseover
tip.style.visibility="visible";
if(window.event) ev=window.event;
tip.style.left=ev.clientX + document.body.scrollLeft + ToolTip.offsetX;
tip.style.top=ev.clientY + document.body.scrollTop + ToolTip.offsetY;
};
}
//переберем заданные элементы, дадим подказку тем у кого есть аттрибут tooltip
//В аргументах передаем имена рассматриваемых тегов, * все теги
function initToolTips() {
// return;
var tags, tooltext;
for(var i=0; i<arguments.length; i++) {
tags=document.body.getElementsByTagName(arguments[i]);
for(var j=0; j<tags.length; j++)
if((tooltext=tags[j].getAttribute("tooltip"))) ToolTip(tags[j], tooltext);
}
}
//-->
</script>
|
| Код |
</head>
<body onload="initToolTips('SPAN','IMG')">
<span
tooltip="Медведь был добрый, но злой..."><a href=#>Пример</a></span>
</body>
</html>
|
собственно, тут строки нечего называть. необходимо объяснить каждую строку + эту вещь с onload в боди и как образовался tooltip. все остальные, вытекающие, вопросы задам потом. |
). Взглянув на функцию/конструктор ToolTip видим как создаёться этот слой методами DOM.
вообщем спасибо! 