Одна кнопка - два рисунка

[L-e-o-n 0]

Каким образом можно сделать кнопку например к "Общем шаблоне форума"

 

Тоисть : Есть кнопка а когда на неё наводиш мышкой она изменяется на другую.

 

Пример : Кнопка в надпись "открыть", после того как наведёш на неё мышкой она измениться и будет написано там "Нажмите"

 

Пример2 : Кнопка на которой определенный ресунок - и как на неё наводиш мышкой - эта кнопка начинает переливаться или же выделяется.

 

Принцип работы как я понял -- две картинка, одна отвечает за просто кнопку а другой отвечает за то когда наводиш на неё мышкой.

 

 

Был бы благодарен за инструкцию как это создать, желательно пример кнопки подобного типа !

[Fisana 700]

Кнопка должна обозначать какое-то действие?

Это существующая кнопка, к которой привязано какое-либо действие?

 

То, что Вы описываете, похоже на то, что в темах у ника?

Просто в некоторых случаях это просто реализовать, а в некоторых не очень.

Но в любом случае кнопка "должна быть ссылкой".

Картинка должна быть в тегах кнопка

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

Кроме того, иногда используются java скрипты для реализации такого эффекта...

[L-e-o-n 0]

Кнопка должна обозначать какое-то действие?

Это существующая кнопка, к которой привязано какое-либо действие?

 

То, что Вы описываете, похоже на то, что в темах у ника?

Просто в некоторых случаях это просто реализовать, а в некоторых не очень.

Но в любом случае кнопка "должна быть ссылкой".

Картинка должна быть в тегах <a href="">кнопка</a>

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

Кроме того, иногда используются java скрипты для реализации такого эффекта...

да, кнопка должна означать определенное действие(открытие определенной ссылки) кнопки этой нет и действия тоже. То что у темах около ника - на это похоже частично, <a href="">кнопка</a> - таким образом получается просто обычная кнопка, а вот как задать с помощу css - чтобы она менялась при навидении мышкой на нее - это я и незнаю - вот в этом и проблемма.

Изменено 17 июня 2008 пользователем L-e-o-n

[Fisana 700]

Вы вначале один класс для кнопки создайте, оформите как нужно, потом напишите его сюда.

И скриншот кнопки + место ее в шаблоне.

[L-e-o-n 0]

Вы вначале один класс для кнопки создайте, оформите как нужно, потом напишите его сюда.

И скриншот кнопки + место ее в шаблоне.

<a href="http:///адрес перехода"><img src="адрес иконки" border="0" width="88" height="31" /></a> Вот мне нужно какие либо образом сделать, чтобы был один рисунок когда ненаводиш мышкой на эту кнопку, и чтобы был другой рисунок когда наводиш на эту кнопку. Вы немогли бы написать более подробно как это реализовать?

[Fisana 700]

Вариант для "потухания" кнопки в неактивном состоянии. Лишних картинок не надо.

В css допишите:

#button a img {opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=30);}
#button a:hover img {opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);}

 

В html:

<div id="button" align="center">
<a href="http://адрес перехода"><img src="адрес иконки" border="0" width="88" height="31" /></a></div>

[L-e-o-n 0]

Вариант для "потухания" кнопки в неактивном состоянии. Лишних картинок не надо.

В css допишите:

#button a img {opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=30);}
#button a:hover img {opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);}

 

В html:

<div id="button" align="center">
<a href="http://адрес перехода"><img src="адрес иконки" border="0" width="88" height="31" /></a></div>

Огромное спасибо, все работает. А вы немогли бы подсказать - как сделать чтобы под этим рисунком(иконкой) была надпись(обозначения) ?

[Fisana 700]

Может alt прописать?

Или я что-то не понимаю.. :)

[L-e-o-n 0]

Может alt прописать?

Или я что-то не понимаю.. :)

:) нее, не alt ! Вот предположем кнопки, просто рисунок, вот чтобы ПОД этим рисунком была надпись.

 

Но данную проблемму я уже решил, таким образом что надпись я прям на иконке написал, и выглядит довольно нормально с ксс (инструкцией которую вы написали выше) Вообще проблемма решена, ещё раз спасибо большое за помощь !)