При наводе на кнопку, как менять картинку?

InnaTcv · 28.08.2006

Здравствуйте. Подскажите, как сделать так:

При наведении на кнопочку в окошке рядом должна меняться картинка.
Например, наводим на кнопку "Игрушки", в окошке рядом появляется фото игрушки
Наводим на кнопку "Торты", в этомже окошке появляется фото торта и т. д.

Только напишите, плиз, подробно, а то я начинающий програмер

Всем спасибо

Derik · 29.08.2006

Имхо, такое делать на CSS, посмотрите вот эту ссылку, немного переделаете под себя и должно получится.
http://cssplay.co.uk/menu/lightbox3.html

InnaTcv · 29.08.2006

Мне нужно, как на этом сайте
http://www.mps.com.tr/

Здесь все сделано слоями, а можно каким-нибудь другим методом.
Может кто кусочек кода даст?
Спасибо

Derik · 30.08.2006

хм думаю что при таком раскладе вам как раз подойдет мой вариант выше, там есть html-код и css. Хм, больше как с абсолютным позиционированием и z-index мне в голову ничего не приходит. Может кто другой что придумает.
P.s. Можно посоветовать флеш, но я портив него.

deMone · 30.08.2006

уже придумали по аське. несколько <div>-ов, а при наведении на ссылку менять style.display.

Derik · 31.08.2006

deMone сказал(а):
уже придумали по аське. несколько <div>-ов, а при наведении на ссылку менять style.display.

=) не сомневался что еще кто-нибудь подскажет))) Может код сюда кинуть, вдруг кому еще понадобится... :blush:

Mr.Andrew · 31.08.2006

да
интересно было бы узнать...

deMone · 01.09.2006

ну, если интересно.

Код:

<table border=0>
<tr>
 <td onmouseover="java script:document.getElementById('div1').style.display='block'; document.getElementById('div2').style.display='none'; document.getElementById('div3').style.display='none';">пункт 1</td>
 <td onmouseover="java script:document.getElementById('div1').style.display='none'; document.getElementById('div2').style.display='block'; document.getElementById('div3').style.display='none';">пункт 2</td>
 <td onmouseover="java script:document.getElementById('div1').style.display='none'; document.getElementById('div2').style.display='none'; document.getElementById('div3').style.display='block';">пункт 3</td>
</tr><tr><td colspan="3">
<div id="div1">текст первой вкладки</div>
<div id="div2" style="display: none;">текст второй вкладки</div>
<div id="div3" style="display: none;">текст третьей вкладки</div>
</td></tr></table>

При наводе на кнопку, как менять картинку?

InnaTcv

Member

Derik

Well-Known Member

InnaTcv

Member

Derik

Well-Known Member

deMone

Злой страшный дядька

Derik

Well-Known Member

Mr.Andrew

Member

deMone

Злой страшный дядька

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей