Заменяющиеся кнопки - Веб-программирование

Antilogic · 23.10.2005, 06:39

Напомните плиз, как сделать так, чтобы кнопки при наведении на них подменялись на другие =)

Hubbitus · 24.10.2005, 09:52

Что именно должно подменяться? Текст, какртинка на них, назавние...?

Antilogic · 27.10.2005, 00:39

Hubbitus, ну кнопки сделаны в виде картинок, и они должны заменяться при наведении на них

ЕЖ · 27.10.2005, 01:20

Antilogic
Если элементарно, то так

Код HTML:

<a href="http://site.ru" onmouseout="document.mypic.src='pic1.gif'" onmouseover="document.mypic.src='pic2.gif'">
	<img name=mypic src=pic1.gif>
</a>

если с прелоадом картинок, то примерно так

Код HTML:

<script language="JavaScript">
function preload()
{
	btn1 = new Image();
	btn1.src = 'pic1.gif';
	btn2 = new Image();
	btn2.src = 'pic2.gif';
}
</script>

<body onload="preload()">
	<img name=mypic onmouseout="document.mypic.src=btn1.src" onmouseover="document.mypic.src=btn2.src" src="pic1.gif">
</body>

P.S. Такие простые штуки уже много раз на форуме спрашивались...

strocks · 27.10.2005, 20:03

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

Можно в CSS ещё сделать, что более модно

Вот например.

Код:

a { background: url(/images/x.jpg) no-repeat left top; display: block; height: 50px; width: 100px; }
<a href="/">Кнопка</a>

но в этом случае в IE будет мигать курсор на wait подменяться, это bug у него. и надпись будет видна. Надпись можно убрать как ниже показано:

Код:

 a { background: url(/images/x.jpg) no-repeat left top; display: block; height: 50px; width: 100px; }
a:hover { background: url(/images/x2.jpg); }
b { display: none; }
<a href="/"><b>Кнопка</b></a>

если ссылок больше чем одна на сайто можно назначить class или id для ссылок.

Код:

 a.button { background: url(/images/x.jpg) no-repeat left top; display: block; height: 50px; width: 100px; }
a.button:hover { background: url(/images/x2.jpg); }
.button b { display: none; }
<a href="/" class="button"><b>Кнопка</b></a>

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

Код:

 a.button { background: url(/images/x.jpg) no-repeat left top; display: block; height: 50px; width: 100px; }
a.button:hover { no-repeat left bottom; }
.button b { display: none; }
<a href="/" class="button"><b>Кнопка</b></a>

пиши в приват если вопросы

23.10.2005, 06:39	# 1
Antilogic Full Member Регистрация: 17.07.2004 Пол: Male Сообщения: 553	Заменяющиеся кнопки Напомните плиз, как сделать так, чтобы кнопки при наведении на них подменялись на другие =) __________________ Именно то, как вы собираете, организуете и используете информацию, определяет, победите вы или проиграете. (c) Билл Гейтс

24.10.2005, 09:52	# 2
Hubbitus мод IMHO Кодер-200(6,7,8) Регистрация: 29.03.2003 Адрес: Saint-Petersburg, Russia Пол: Male Сообщения: 2 734	Что именно должно подменяться? Текст, какртинка на них, назавние...? __________________ Я делаю Линукс! Присоединяйтесь к свободным людям! Связаться со мной всегда можно по джабберу: Hubbitus@jabber.ru Pahan-Hubbitus.

27.10.2005, 00:39	# 3
Antilogic Full Member Регистрация: 17.07.2004 Пол: Male Сообщения: 553	Hubbitus, ну кнопки сделаны в виде картинок, и они должны заменяться при наведении на них __________________ Именно то, как вы собираете, организуете и используете информацию, определяет, победите вы или проиграете. (c) Билл Гейтс

27.10.2005, 20:03	# 5
strocks Newbie Регистрация: 21.08.2005 Адрес: Таллин Сообщения: 46	Почему же простые? тут много нюансов. Кешит ли картинки твои скрипт или нет? Может подгружает когда наводишь каждый раз, это напрягает. Можно в CSS ещё сделать, что более модно Вот например. Код: a { background: url(/images/x.jpg) no-repeat left top; display: block; height: 50px; width: 100px; } <a href="/">Кнопка</a> но в этом случае в IE будет мигать курсор на wait подменяться, это bug у него. и надпись будет видна. Надпись можно убрать как ниже показано: Код: a { background: url(/images/x.jpg) no-repeat left top; display: block; height: 50px; width: 100px; } a:hover { background: url(/images/x2.jpg); } b { display: none; } <a href="/"><b>Кнопка</b></a> если ссылок больше чем одна на сайто можно назначить class или id для ссылок. Код: a.button { background: url(/images/x.jpg) no-repeat left top; display: block; height: 50px; width: 100px; } a.button:hover { background: url(/images/x2.jpg); } .button b { display: none; } <a href="/" class="button"><b>Кнопка</b></a> ещё можно вообще обходиться одной картинкой, что лучше всего. т.е. в одну картинку нарисовать 2 кнопку и менять их позицию при событии Код: a.button { background: url(/images/x.jpg) no-repeat left top; display: block; height: 50px; width: 100px; } a.button:hover { no-repeat left bottom; } .button b { display: none; } <a href="/" class="button"><b>Кнопка</b></a> пиши в приват если вопросы Последний раз редактировалось strocks; 27.10.2005 в 20:17.

Опции темы
Версия для печати Отправить на email