Недавно я разрабатывал сайт www.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;i0) d.removeChild(d.firstChild);
  }
  // В этой функции задаём прозрачность картинки в разных браузерах. 
  function setOpacity(el){
  el.style.filter="alpha(opacity:95)"; // 0 - прозрачная, 100 - непрозрачная
  el.style.KHTMLOpacity="0.95"; //
  el.style.MozOpacity="0.95"; //  0 - прозрачная, 1.0 - непрозрачная
  el.style.opacity="0.95"; //
  }
  
  function CreateEl(t,c){
  var x=document.createElement(t);
  x.className=c;
  x.style.display="block";
  return(x);
  }
  
  function AddCss(){
  var l=CreateEl("link");
  l.setAttribute("type","text/css");
  l.setAttribute("rel","stylesheet");
  l.setAttribute("href","../bt.css"); //подключаем таблицу стилей
  l.setAttribute("media","screen");
  document.getElementsByTagName("head")[0].appendChild(l);
  }
  
  function Locate(e){
  var posx=0,posy=0;
  if(e==null) e=window.event;
  if(e.pageX || e.pageY){
      posx=e.pageX; posy=e.pageY;
      }
  else if(e.clientX || e.clientY){
      if(document.documentElement.scrollTop){
          posx=e.clientX+document.documentElement.scrollLeft;
          posy=e.clientY+document.documentElement.scrollTop;
          }
      else{
          posx=e.clientX+document.body.scrollLeft;
          posy=e.clientY+document.body.scrollTop;
          }
      }
  document.getElementById("btc").style.top=(posy-140)+"px"; //смещение картинки по вертикали
  document.getElementById("btc").style.left=(posx-230)+"px"; //смещение картинки по горизонтали
  }
  

• Создаем следующую таблицу стилей 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 закачиваем картинки с соответствующими названиями.

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

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