19.01.2008, 14:29
|
|
Познавший АНТИЧАТ
Регистрация: 02.06.2006
Сообщений: 1,187
С нами:
10495046
Репутация:
2642
|
|
Код:
<style>
input[type="image"]
{
width: 100;
height: 100;
background: url(image1.png);
}
input[type="image"]:hover
{
width: 100;
height: 100;
background: url(image2.png);
}
</style>
<form method="GET">
<input type="image">
</form>
Не забудь изменить ширину и высоту картинок. |
|
|
19.01.2008, 15:14
|
|
Флудер
Регистрация: 21.06.2006
Сообщений: 3,193
С нами:
10467746
Репутация:
4738
|
|
Сообщение от NOmeR1
Код:
<style>
input[type="image"]
{
width: 100;
height: 100;
background: url(image1.png);
}
input[type="image"]:hover
{
width: 100;
height: 100;
background: url(image2.png);
}
</style>
<form method="GET">
<input type="image">
</form>
Не забудь изменить ширину и высоту картинок. Ага, спасиб, я уже тоже реализовал: (три состояния)
Код:
<a href="#" class="button"><span><img src="images/none.gif" width="180" height="180" /></span></a>
CSS
Код:
a.button {
background: url(images/logo_4.gif);
outline: none;
}
a.button span {
display: block;
background: url(images/logo_4.gif);
}
a.button:hover {
background: url(images/logo_4.gif)
}
a.button:hover span {
background: url(images/logo_4_turn.gif)
}
a.button:active {
background: url(images/logo_4_turn.gif)
}
a.button:active span {
background: url(images/logo_4_click.gif)
}
Вопрос такой, если такая кнопка внутри формы, то её действие такое-же как и у type=submit ? Т.е при нажатии будет отправка данных из формы на сервер?
UP: в ссылке пишем тогда то же что и в action формы, например:
Код:
<a href="<?=$_SERVER['PHP_SELF']?>" class="button"><span><img src="images/none.gif" width="180" height="180" /></span></a>
так ?
Последний раз редактировалось -=lebed=-; 19.01.2008 в 18:13..
|
|
|
|
19.01.2008, 15:46
|
|
Познавший АНТИЧАТ
Регистрация: 02.06.2006
Сообщений: 1,187
С нами:
10495046
Репутация:
2642
|
|
Сообщение от -=lebed=-
Вопрос такой, если такая кнопка внутри формы, то её действие такое-же как и у type=submint ? Т.е при нажатии будет отправка данных из формы на сервер?
UP: в ссылке пишем тогда то же что и в action формы, например:
Код:
<a href="<?=$_SERVER['PHP_SELF']?>" class="button"><span><img src="images/none.gif" width="180" height="180" /></span></a>
так ? Нет. Отправки на сервер не будет. Будет тупой переход на страницу скрипта.
|
|
|
|
19.01.2008, 17:49
|
|
Флудер
Регистрация: 21.06.2006
Сообщений: 3,193
С нами:
10467746
Репутация:
4738
|
|
Сообщение от NOmeR1
Нет. Отправки на сервер не будет. Будет тупой переход на страницу скрипта.
Как тогда это организовать (отправку данных из формы обработчику на стороне сервера) по нажатии на кнопку?
|
|
|
|
19.01.2008, 15:43
|
|
Постоянный
Регистрация: 14.01.2007
Сообщений: 459
С нами:
10169427
Репутация:
589
|
|
Можно и ссылку:
При нажатии ничего не произойдет
UPD: имелось в виду с помещенным в нее input type=button || image
Последний раз редактировалось Helios; 19.01.2008 в 17:36..
|
|
|
|
20.01.2008, 01:46
|
|
Флудер
Регистрация: 21.06.2006
Сообщений: 3,193
С нами:
10467746
Репутация:
4738
|
|
Вообщем решили вопрос вместе с Basurman.
Вот кнопка в форме:
Код:
<form method="post" action="<?=$_SERVER['PHP_SELF']?>">
<button type="submit" id="subm"></button>
</form>
Вот стиль для неё:
Код:
#subm {
width: 170px;
height: 170px;
margin: 0;
padding: 0;
border: 0;
background: url(images/logo1.gif);
cursor: pointer;
}
#subm:hover{
width: 170px;
height: 170px;
margin: 0;
padding: 0;
border: 0;
background: url(images/logo2.gif);
cursor: pointer;
}
#subm:active{
width: 170px;
height: 170px;
margin: 0;
padding: 0;
border: 0;
background: url(images/logo3.gif);
cursor: pointer;
}
В Опере при наведении курсора на кнопку картинка меняется на logo2, при нажатии на logo3. В осле шестом остаётся всегда logo1 (не меняется) Как исправить?
IE версии 6.0 и ниже не воспринимает псевдо-класс :hover для всех элементов, кроме тега <a>. Для решения этой проблемы советую прочитать статью CSS:hover для любого элемента...
Последний раз редактировалось -=lebed=-; 20.01.2008 в 01:49..
|
|
|
|
20.01.2008, 12:12
|
|
Познавший АНТИЧАТ
Регистрация: 02.06.2006
Сообщений: 1,187
С нами:
10495046
Репутация:
2642
|
|
Чем тебе не угодил JS? Вот код.
Код:
<script>
$normal = 'img1.jpg';
$hover = 'img2.jpg';
$active = 'img3.jpg';
</script>
<form method="GET">
<input type="image" onmouseover="this.src=$hover;" onmouseout="this.src=$normal" onmousedown="this.src=$active;" src="img1.jpg">
</form>
Последний раз редактировалось NOmeR1; 20.01.2008 в 12:18..
|
|
|
|
20.01.2008, 13:39
|
|
Постоянный
Регистрация: 14.01.2007
Сообщений: 459
С нами:
10169427
Репутация:
589
|
|
Сообщение от NOmeR1
Чем тебе не угодил JS? Вот код.
Код:
<script>
$normal = 'img1.jpg';
$hover = 'img2.jpg';
$active = 'img3.jpg';
</script>
<form method="GET">
<input type="image" onmouseover="this.src=$hover;" onmouseout="this.src=$normal" onmousedown="this.src=$active;" src="img1.jpg">
</form>
В JS, как и в сях, переменная не может начинаться с знака $
UPD: но работает о_О
Последний раз редактировалось Helios; 20.01.2008 в 13:43..
|
|
|
|
20.01.2008, 14:04
|
|
Постоянный
Регистрация: 30.08.2007
Сообщений: 773
С нами:
9840758
Репутация:
808
|
|
Думаю, это пригодится больше: http://www.xs4all.nl/~peterned/htc/csshover.htc
Это делает возможным использовать :hover для любых элементов в IE6.
Подключается, например, так:
Код:
<style type="text/css">
body
{
behavior:url("csshover.htc");
}
</style>
Пример работы: http://www.xs4all.nl/~peterned/examples/cssmenu.html
Последний раз редактировалось astrologer; 21.01.2008 в 02:48..
|
|
|
|
21.01.2008, 11:26
|
|
Участник форума
Регистрация: 26.02.2007
Сообщений: 259
С нами:
10107625
Репутация:
67
|
|
Сообщение от NOmeR1
Чем тебе не угодил JS? Вот код.
Код:
<script>
$normal = 'img1.jpg';
$hover = 'img2.jpg';
$active = 'img3.jpg';
</script>
<form method="GET">
<input type="image" onmouseover="this.src=$hover;" onmouseout="this.src=$normal" onmousedown="this.src=$active;" src="img1.jpg">
</form>
еще есть onClick , типа "при нажатии"
|
|
|
|
|
 |
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
|
|
Похожие темы
Комбинированный вид
