Ещё о тултипе (подсказке), движущейся вместе с курсором.

Недавно я разрабатывал сайт primaphoto.ru

В процессе возникла необходимость показывать томбнейлы (превьюшки) изображений продукции при наведении на соответствующие строки прайс-листа.

Решил задачу путем небольшой модификации скрипта из предыдущей статьи:

Во-первых, присваиваем таблице с прайс-листом уникальный ID, который будет передаваться в скрипт Tooltip.js, например: <table id="glass1">
Затем делаем названия продуктов ссылками, в которых title'ом является адрес соответствующей картинки, например: <a href='javascript:void(null);' title='../img/content/$s.jpg'> Это продукт $s </a>

далее, вносим изменения в файл Tooltip.js:

function enableTooltips(id){
var links,i,h;
if(!document.getElementById) return;
AddCss();
h=document.createElement("span");
h.id="btc";
h.setAttribute("id","btc");
h.style.position="absolute";
document.getElementsByTagName("body")[0].appendChild(h);
links=document.getElementById(id).getElementsByTagName("a");
for(i=0;i

Создаем следующую таблицу стилей bt.css:

.tooltip{width: 200px; text-decoration:none;text-align:center}
.tooltip span.top{padding: 30px 8px 0;}
.tooltip b.bottom{padding:3px 8px 15px;}

В папку img закачиваем картинки с соответствующими названиями.

Результат в действии можно посмотреть на странице: Фото в стекле

Вроде всё! ))))))

Вернуться в категорию: JavaScript и Ajax

Блог ленивого вебмастера

Ещё о тултипе (подсказке), движущейся вместе с курсором.