function level(level){
var url="img/l"+level+".gif";
var code=level+'<div style="background-image:url('+"'"+url+"'"+');" class="leveltddiv">'+level+'/10</div>';
return code;
}
function myGetElementsByClassName(str){var list = new Array();var nodes = document.getElementsByTagName('*');for (i = 0; i<nodes.length; i++){if (nodes[i].nodeType==1){if (nodes[i].className.indexOf(str)!=-1 ){list.push(nodes[i]);}}}return list;}
function showHint(show,text,e){
var obj=document.getElementById('tooltip');
if(show==true){
obj.innerHTML=text;
var browserName=new String(navigator.appName);
if(browserName.indexOf('IE')!=-1){
var html = document.documentElement;
xMove=html.scrollLeft;
yMove=html.scrollTop;
}
else{
if(navigator.appName.indexOf('Opera')!=-1){
var html = document.documentElement;
xMove=html.scrollLeft;
yMove=html.scrollTop;
}
else{
xMove=window.screenX;
yMove=window.screenY;
}
}
obj.style.display='block';
obj.style.position='fixed';
obj.style.left=(e.clientX+5)+'px';
obj.style.top=(e.clientY+5)+'px';
}
else{
obj.style.display='none';
}
}
function repl(text){
var out=new String(text);
var index=out.indexOf('hint:')+5;
out=out.substr(index,out.length-index);
return out;
}
function initialize(){
var arr=myGetElementsByClassName('leveltd');
for(i=0;i<arr.length;i++){ var obj=arr[i];obj.innerHTML=level(obj.innerHTML); }
var tt=document.createElement('div');
tt.id='tooltip';
document.body.appendChild(tt);
var arr=document.getElementsByTagName('*');
j=0;
for(i=1;i<arr.length;i++){
var obj=arr[i];
j++;
document.getElementById('tooltip').innerHTML=j;
if(obj.title){
var hint=new String(obj.title);
obj.title='';
obj.className+=',hint:'+hint;
var text=obj.innerHTML;
if(obj.innerHTML!=''){
obj.innerHTML='<div onmousemove=\"showHint(true,repl(this.parentNode.className),event);\" onmouseout=\"showHint(false);\">'+text+'<\/div>';
}
}
}
}
<html>
<head>
...
<script src="путь к вышеуказанному скрипту"></script>
....
</head>
<body onload="initialize();">
<script type="text/javascript" src="scripts/sorttable.js"></script>
<table class="sort" align="center">
<thead>
<tr>
<td>Название</td>
<td>Категория</td>
<td>Уровень</td>
</tr>
</thead>
<tbody>
<tr>
<td title="Весьма неплохой язык для создания десктопных приложений.<br \/>Позволяет быстро строить базы данных и различные утилиты почти любого уровня сложности.">
delphi
</td><td title="Создание программ почти любого профиля - от баз данных до игр и вирусов">
<span title="Создание почти любых приложений - от баз данных до вирсов и системных утилит">Общее программирование</span>
</td><td class="leveltd">9</td></tr>
<tr><td title="Прекрано подходят для попыток создания кроссплатформенных программ, т.к. их варианты существуют если не для всех, то почти для всех популярных ОС, т.е. при правильном проектировании программу можно перенести на многие ОС">
C,C++
</td><td>
<span title="Создание почти любых приложений - от баз данных до вирсов и системных утилит">Общее программирование</span>
</td><td class="leveltd">8</td></tr>
<tr><td title="Языки (на мой взгляд) мало пригодны для создания серьёзных программ, но часто используются в мелких проектах. Также важны т.к. именно их импользет некоторе количество программистов">
BASIC,VB,VB.NET
</td><td>
<span title="Создание почти любых приложений - от баз данных до вирсов и системных утилит">Общее программирование</span>
</td><td class="leveltd">10</td></tr>
<tr><td title="Весьма нелохо подходят для создания серверной части веб-приложений из-за :<br \/>1) доступности (почти все хостинг-провайдры позволяют использовать эту связку<br \/>2) универсальности - можно создавать веб-приложения любого типа">
PHP & MySQL
</td><td>
<span title="Создание интерактивных веб-сайтов (соц.сети, форумы, и т.д.) а также более специлизированных веб-приложений, таких как Google.Документы и прочие.">Веб-программирование</span>
</td><td class="leveltd">8</td></tr>
<tr><td title="Язык в основном используется для написания веб приложений или консольным программ. Мощный, но сложный язык. Большинство часто нужных его возможностей можно реализоватьи н на PHP">
PERL
</td><td>
<span title="Создание интерактивных веб-сайтов (соц.сети, форумы, и т.д.) а также более специлизированных веб-приложений, таких как Google.Документы и прочие.">Веб-программирование</span>
</td><td class="leveltd">5</td></tr>
<tr><td title="Язык используется для создания флеш-заставок, приложений и сатов. Также не редко используется по техническим причинам.">
ActionScript
</td><td>
<span title="Создание интерактивных веб-сайтов (соц.сети, форумы, и т.д.) а также более специлизированных веб-приложений, таких как Google.Документы и прочие.">Веб-программирование</span>
</td><td class="leveltd">7</td></tr>
<tr><td title="Язык используется для динамического изменения веб-страниц в процессе их работы. Например - вывод информации, получаемой от сервера через определённые промежутки времени.">
JavaScript
</td><td>
<span title="Создание интерактивных веб-сайтов (соц.сети, форумы, и т.д.) а также более специлизированных веб-приложений, таких как Google.Документы и прочие.">Веб-программирование</span>
</td><td class="leveltd">8</td></tr>
<tr><td title="Язык используется для динамического изменения веб-страниц в процессе их работы. Например - вывод информации, получаемой от сервера через определённые промежутки времени.">
VBScript
</td><td>
<span title="Создание интерактивных веб-сайтов (соц.сети, форумы, и т.д.) а также более специлизированных веб-приложений, таких как Google.Документы и прочие.">Веб-программирование</span>,<span title="Надоело запускать программы по 20 раз подряд с оддинаковыми паметрами?. Тогда это - то, что надо">Автоматизация простых задач под Windows</span>
</td><td class="leveltd">7</td></tr>
<tr><td title="Система технологий для описания структуры и дизайна веб-страницы">HTML(DHTML) & CSS</td><td><span title="Создание интерактивных веб-сайтов (соц.сети, форумы, и т.д.) а также более специлизированных веб-приложений, таких как Google.Документы и прочие.">Веб-программирование</span></td><td class="leveltd">10</td></tr>
<tr><td title="Автоматизированная командная строка">BAT</td><td><span title="Надоело запускать программы по 20 раз подряд с оддинаковыми паметрами?. Тогда это - то, что надо">Автоматизация простых задач под Windows</span></td><td class="leveltd">9</td></tr>
</tbody>
</table>
</body>
</html>
Итак. Скрипт делает вот что - во всех элементах с классом leveltd вместо указанной цифры отображает шкалу из div-a с текстом и шкалой в фоне. А также находит все элементы с title и удаляет им title, дописывая в className им что - то типа hint:содержимое title. После чего всем этим элементам ставит в onmousemove="showHint(true,repl(this.className),ev ent);" а в onmouseout="showHint(false);". Это в теории. Т.к. в IE никакое нормальное назначение событий не пахало, то он добавляет в элемент div который в onmousemove подсовывает className родителя.
Должно быть,
есть.
Почему бы плыли td со шкалами?
Сори, чувак, я не хотел
