HTML+CSS+JavaScript

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

function ChangeImg() {     if(document.images) {       eval("document."+ChangeImg.arguments[0]+       ".src=('"+ChangeImg.arguments[1]+"')");     } }

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

function ChangeImg() {      if(document.images) {      eval("document."+ChangeImg.arguments[0]+      ".src=('"+ChangeImg.arguments[1]+"');document."+ChangeImg.arguments[0]+".style.position='absolute';");     }  }

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

<a href="1.htm"         onmouseover="ChangeImg('image1','2.jpg')"         onmouseout="ChangeImg('image1','12.jpg')"><img src="12.jpg" name="image1" alt="image1" /></a>

поставь фиксированые рамеры картинки

<img  src="12.jpg" name="image1" alt="image1" width="111" height="111"/></a>

чуть поправил код, сделал картинку как hiddenlink

<a href="javascript:;" class="hiddenlink"         onmouseover="ChangeImg('image1','2.jpg')"         onmouseout="ChangeImg('image1','12.jpg')"><img src="12.jpg" name="image1" alt="image1" width="30" height="30" border="0" /></a>

поставил фиксированные размеры, после этого она перестала увеличиваться при наведении на тамбнейл, но они все-равно наползают друг на друга и в итоге оказываются все в левом верхнем углу друг на друге

не до конца понятно, можешь код для таблнейлов сбросить? или если сайт в инете дай ссылку

вот, скинул сюда
http://affected.times.lv/test/1.html
при наведении на первый тамб сдвигается второй итд

я бы советовал тебе рисунки засунуть в <div></div> и с ним работать.

засунул в дивы - все равно сдвигаются. полагаю что это из-за style.position='absolute'; в функции ChangeImg, но если убрать это, то большая картинка сдвигает все тамбы и мы возвращаемся к тому, от чего начали

а теперь в функции прописать позиционирование элементов при наведении мыши и уведении ;)

или работай со слоями, то есть при наведении на картинку уровень слоя на один увеличивай, а после наведения возвращай уровень слоя на место

добавил 2ю функцию для уведения мыши, где изменил позицию на relative (интуитивно ибо мой опыт работы с джавой ограничивается сегодняшним днем)

function ChangeImg() {       if(document.images) {       eval("document."+ChangeImg.arguments[0]+       ".src=('"+ChangeImg.arguments[1]+"');document."+ChangeImg.arguments[0]+".style.position='absolute';");      }   } function ChangeImg2() {       if(document.images) {       eval("document."+ChangeImg2.arguments[0]+       ".src=('"+ChangeImg2.arguments[1]+"');document."+ChangeImg2.arguments[0]+".style.position='relative';");      }   }

теперь при наведении курсора тамб убирается, открывается большая картинка, но остальные тамбы сдвигаются на 1. при уведении мыши возвращается обратно. но выглядит убого. обновил страницу http://affected.times.lv/test/1.html

так попробуй с абсолютной позицией.

а обсолютная была до этого (была одна функция и для наведения и для уведения). тогда тамбы налезали друг на друга и не возвращались обратно, сбиваясь в левый верхний угол

сделай так дял дивов

<div id="id" style="position:absolute;left:0; top:0; width:auto; height:auto; z-index=1;"></div>

для каждого дива меняй left & top если надо.
при наведении мыши

document.getElementById("id").style.z-index = 2; // или document.getElementById("id").style.zIndex = 2;

при уведении

document.getElementById("id").style.z-index = 1; // или document.getElementById("id").style.zIndex = 1;

zIndex - правильно

ээ щас попробую. а вот что мне еще посоветовали

--[23:39:42]-- <Vl> ты не меняй позишн на абсолют
--[23:39:48]-- <Vl> ты на каждую фотку сделай ДВЕ
--[23:40:06]-- <Vl> у одной абсолют, у другой ничего
--[23:40:19]-- <Vl> ту что абсолют сначала display:none
--[23:40:31]-- <Vl> а при наведении display:block

если ты мне подскажешь как это выглядит в коде буду благодарен до конца жизни

function ChangeImg() {        if(document.images) {        eval("document."+ChangeImg.arguments[0]+        ".src=('"+ChangeImg.arguments[1]+"');document."+ChangeImg.arguments[0]+".style.position='absolute';");      document.getElementById("id").style.display = "block";     }

в другой функции меняй на document.getElementById("id").style.display = "none";

пасиба, разобрался