Замена картинки, при клике на другую.

[Alexey Menshikov]

Приветствую!

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

Покажите примером пожалуйста!

Еще наверное возникнет сложность с тем, что картинки начнут подгружаться, может быть их можно подгрузить сразу в начале загрузки страницы, или это плохой вариант?

[homm]

Покажите примером пожалуйста!

auto.ru

[Dimitry Wolotko]

/* homm жжот */

[Alexey Menshikov]

Покажите примером пожалуйста!

auto.ru

Как раз сижу разбираю auto.ru )))

но у них очень сложно все закручено, видимо что-бы еще картинки не воровали.

[Alexey Menshikov]

Накопал, но не работает. Где косяк?

<SCRIPT language=JavaScript> 
<!-- 
var img_id = new Array(5-0,5-1,5-2,5-3,5-4,5-5); 
var img_url = new Array('http://www.ostauto.ru/fotos/5-0-big.jpg','http://www.ostauto.ru/fotos/5-1-big.jpg','http://www.ostauto.ru/fotos/5-2-big.jpg','http://www.ostauto.ru/fotos/5-3-big.jpg','http://www.ostauto.ru/fotos/5-4-big.jpg','http://www.ostauto.ru/fotos/5-5-big.jpg'); 
var img_arr = new Array(); 
function preloadImages() 
{ 
 for (var id in img_url) { 
 img_arr[id] = new Image; 
 img_arr[id].src = img_url[id]; 
 } 
} 
preloadImages(); 
function setMainImage(id) 
 { 
 big = document.getElementById('main_image'); 
 small = document.getElementById('b' + id); 
 bg = document.getElementById('i' + id); 
 if (big && small && bg) 
 { 
 var id_img = 0; 
 for (var index in img_id) { 
 if (img_id[index] == id) { 
 id_img = index; 
 } 
 } 
 big.src = img_arr[id_img].src; 
 var regExp = /i[0-9]{1,}/; 
 var images = document.getElementsByTagName('img'); 
 for(i = 0; i < images.length; i++) { 
 if(regExp.test(images.item(i).id)) { 
 if (images.item(i).id == ('i' + id)) { 
 images.item(i).style.backgroundImage = 'url(/images/card_unselect.gif)'; 
 } else { 
 images.item(i).style.backgroundImage = 'url(/images/clear.gif)'; 
 } 
 } 
 } 
 return false; 
 } 
 return false; 
 } 
//--> 
</SCRIPT>

Далее основная картинка которая должна меняться:

<img id=main_image src="/fotos/5-0-big.jpg">

Маленькие, нажатие на которые должны менять большую:

<A onmouseover="window.status=(' ');return true;" 
 onclick="return setMainImage(5-0);" 
 onmouseout="window.status=('');return true;" 
 href="http://www.ostauto.ru/index.php?page=2"> 
 <IMG src="http://www.ostauto.ru/fotos/5-0.jpg" border=0> 
 </A>

 <A onmouseover="window.status=(' ');return true;" 
 onclick="return setMainImage(5-1);" 
 onmouseout="window.status=('');return true;" 
 href="http://www.ostauto.ru/index.php?page=2"> 
 <IMG src="http://www.ostauto.ru/fotos/5-1.jpg" border=0> 
 </A>

[homm]

/* homm жжот */

Ты же знаешь, в вопросе 80% ответа.

[Dimitry Wolotko]

Ну да, согласен.

[BoozyWoozy]

Зарегестрировался только для того чтобы ответить вам. Но возможно я здесь задержусь.

Вот собственно ответ:

<table width=20 height=70 cellspacing=0 cellpadding=4 align="center" valign="top" class="class" bgcolor="#81df47" border=0><tr><td align="center" valign="top" width=384><table border=0 cellspacing=0 cellpadding=0><tr><td colspan=4><img name="bigtitle" style="border-width:4px 4px 3px 4px;border-style:solid;border-color:#000000;cursor:crosshair;" src="IMAGES/384x384_01.jpg" width=384 height=384></td></tr><tr><td><img onMouseOver="bigtitle.src='IMAGES/384x384_01.jpg'" src="IMAGES/96x96_01.jpg" width=96 height=96 style="border-width:1px 1px 4px 1px;border-color:#000000;border-style:solid;cursor:crosshair;"></td><td><img onMouseOver="bigtitle.src='IMAGES/384x384_02.jpg'" src="IMAGES/96x96_02.jpg" width=96 height=96 style="border-width:1px 1px 4px 1px;border-color:#000000;border-style:solid;cursor:crosshair;"></td><td><img onMouseOver="bigtitle.src='IMAGES/384x384_03.jpg'" src="IMAGES/96x96_03.jpg" width=96 height=96 style="border-width:1px 1px 4px 1px;border-color:#000000;border-style:solid;cursor:crosshair;"></td><td><img onMouseOver="bigtitle.src='IMAGES/384x384_04.jpg'" src="IMAGES/96x96_04.jpg" width=96 height=96 style="border-width:1px 1px 4px 1px;border-color:#000000;border-style:solid;cursor:crosshair;"></td></tr></table>

Изображения лежат в папке IMAGES

96x96 это миниатюры, 384x384 выводимое при наводке на миниатюру изображение.

Надеюсь я помог.

Edited October 16, 2008 by BoozyWoozy

[Elendor]

<table width=20 height=70 cellspacing=0 cellpadding=4 align="center" valign="top" class="class" bgcolor="#81df47" border=0><tr><td align="center" valign="top" width=384><table border=0 cellspacing=0 cellpadding=0><tr><td colspan=4><img name="bigtitle" style="border-width:4px 4px 3px 4px;border-style:solid;border-color:#000000;cursor:crosshair;" src="IMAGES/384x384_01.jpg" width=384 height=384></td></tr><tr><td><img onMouseOver="bigtitle.src='IMAGES/384x384_01.jpg'" src="IMAGES/96x96_01.jpg" width=96 height=96 style="border-width:1px 1px 4px 1px;border-color:#000000;border-style:solid;cursor:crosshair;"></td><td><img onMouseOver="bigtitle.src='IMAGES/384x384_02.jpg'" src="IMAGES/96x96_02.jpg" width=96 height=96 style="border-width:1px 1px 4px 1px;border-color:#000000;border-style:solid;cursor:crosshair;"></td><td><img onMouseOver="bigtitle.src='IMAGES/384x384_03.jpg'" src="IMAGES/96x96_03.jpg" width=96 height=96 style="border-width:1px 1px 4px 1px;border-color:#000000;border-style:solid;cursor:crosshair;"></td><td><img onMouseOver="bigtitle.src='IMAGES/384x384_04.jpg'" src="IMAGES/96x96_04.jpg" width=96 height=96 style="border-width:1px 1px 4px 1px;border-color:#000000;border-style:solid;cursor:crosshair;"></td></tr></table>

отфарматируй код

[killall]

манать, от всех "продвинутых" только и слышно "Ты же знаешь, в вопросе 80% ответа. ", "/* homm жжот */ " и все в таком духе, и первый же человек. который реально ответил на вопрос получил плеуху: "angry.gif отфарматируй код " эта ппц. акуетительный сайтик у вас ребята

[killall]

Elendor, отфАрматируй пишется через Ю

[Searcher]

Elendor, отфАрматируй пишется через Ю

Ну так раз вступился, так отформатируй код BoozyWoozy, тобы всем понятно было! Или сударю просто понадобилось излить желчь?

[Verder]

Да, тут много таких советчиков

Alexey Menshikov, тебе что-то вроде этого надо - http://freeway-design.ru/example/ ?

[sigma77]

Alexey Menshikov, тебе что-то вроде этого надо - http://freeway-design.ru/example/ ?

Думаешь ему еще актуально?

[Verder]

Думаешь ему еще актуально?

Да откуда я знаю. Был примерчик вот и выложил. Может кому еще пригодится, чтобы не искать.