IMHO.WS - Заменяющиеся кнопки

IMHO.WS (https://www.imho.ws/index.php)

- Веб-программирование (https://www.imho.ws/forumdisplay.php?f=29)

- - Заменяющиеся кнопки (https://www.imho.ws/showthread.php?t=94626)

Заменяющиеся кнопки

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

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

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

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. Такие простые штуки уже много раз на форуме спрашивались...

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

Можно в 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>

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