Нужно было создать немного увеличенный превью изображений при движении мышки в галерее, вот так выглядит результат

Я решил проблему таким образом с помощью jQueryк ссылке прикреплено событие, привлекающее Тело скрытый различныйклонирует ссылку со встроенным в нее изображением, вычисляет положение ссылки, подгоняет новый div НАД маленьким изображением, включает видимость и при наведении мыши связывает функцию, удаляющую динамически созданный div

Галерея устроена следующим образом:

<div id="preview"> 
  <div> 
    <a href=" title="Faretti Veneziani 705 F"><img src="/fotos/thumb2/1242302304.15.jpg" alt="Faretti Veneziani 705 F"></a>
    <p >Faretti Veneziani 705 F</p> 
    <p >400 руб.</p> 
  </div> 
  <div> 
    <a href=" title="Faretti Veneziani 700 F"><img src="/fotos/thumb2/1242302093.69.jpg" alt="Faretti Veneziani 700 F"></a>
    <p >Faretti Veneziani 700 F</p> 
    <p >500 руб.</p> 
  </div> 
  <div> 
    <a href=" title="Faretti Veneziani 707 F"><img src="/fotos/thumb2/1242301917.06.jpg" alt="Faretti Veneziani 707 F"></a>
    <p >Faretti Veneziani 707 F</p> 
    <p >600 руб.</p>
  </div>
</div> 

Фактический размер миниатюр в два раза больше, чем они появляются, вот как:

#preview {}
#preview div{width:177px;height:135px;float: left;background:#f9e7bf;border:2px solid #361f11;margin-right:40px;margin-bottom:30px;}
#preview div a img{opacity:0.95;width:177px;height:90px; }
#preview div p{color:#361f11;font-size:80%;margin: 0px;padding-left:5px;padding-right:5px;}
#preview div .sr{text-align: right;color:#000;}
#preview div .nm{overflow:hidden;height:20px;}

А теперь сценарий я вставил в текст нагрузка=»инит_страница()»

function show_thumb(th){
    $("#thumb").remove();
    $("body").append('<div id="thumb"></div>')
    $("#thumb").hide()
    $("#thumb").append($(th).clone())
    $("#thumb").css("position","absolute")
    $("#thumb").css("z-index","2")
    var p = $(th).offset()
    $("#thumb").css("left",p.left-20).css("top",p.top-90)
    $("#thumb").show(150)
    $("#thumb").mouseout(function(){$(this).remove();});
    }
}
function init_page(){
  $("#preview a").mouseover(function(){show_thumb(this)} )
}

Вроде бы простой и понятный скрипт. Я собираюсь $(«#thumb»).remove(); внимание. Он используется для создания только одного блока большого пальца за раз, в противном случае он завершен.Если курсор движется быстро, вы можете легко настроить код, добавив стиль CSS блока #thumb и, таким образом, сократить код.

Проверено, работает ли ФФ3, Опера, хром и даже MSIE6 — Работает везде без проблем.

Для меня это совершенно бесполезная функция, так как для нее нет предварительного просмотра, но клиент очень этого хотел. Ну, он должен заплатить, чтобы выключить эту штуку, когда ему надоест.

Все так же jQuery Отличная штука, вроде bash для линукса или суперклея для сборки моделей самолетов.