Форум PHP программистов > Изменение яркости рисунка

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Изменение яркости рисунка

TopRider

4.12.2010 - 02:54

Хлопцы!!! Подскажите какими способами можно реализовать выделение кнопки при наведении и нажатии мышки:
- изменением прозрачности
- изменением рисунка на другой(объемно)
- увеличение яркости(склоняюсь к этому, но затрудняюсь в реализации)

Если не трудно, прошу описать процесс увеличения яркости, если таковой существует, более подробно.

Кнопа описана css:

#Login 
input.button {
background-image:url(../images/Button.png);
background-repeat:  no-repeat; /* здесь указываем расположение рисунка */
background-color:transparent;
position:relative;
border:hidden;
width:71px; /* ширина рисунка */
height:20px; /* высота рисунка */
cursor:pointer; 
border:none; 
}

Изначально думал о прозрачности, только она под руку попалась:

<script src="script/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="script/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>


<div>
<input name="Enter" 
          type="submit" 
          value="Вход" 
          class="button" 
          onmouseover="$('div.button').fadeTo('slow',1)"
          onmouseout="$('div.button').fadeTo('slow',0.1)"
/>
</div>

Кстати которая тоже толком не фурычит - события mouse не ппроисходят, хотя если описать пустой класс в css и объявить не <div> а <div class=имя> и прописать 'div.имя'.fade..... то работает, объясните кто в силах плз!!

Спустя 2 часа, 12 минут, 20 секунд (4.12.2010 - 04:06) kirik написал(а):

Если поможет - это можно решить псевдоклассами:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
input.button {
     color: #000;
}
input.button:hover {
     color: #ccc;
}
input.button:active  {
     color: #af0000;
}
</style>
</head>
<body>
<input name="Enter" type="submit" value="Вход" class="button"/>
</body>
</html>

Спустя 7 часов, 20 минут, 46 секунд (4.12.2010 - 11:27) TopRider написал(а):

Это да, но я бы хотел использовать плавное увеличение яркости

Спустя 6 минут, 7 секунд (4.12.2010 - 11:33) vital написал(а):

А с чего вы решили, что фейды будут работать на инпуте? Это эффект, для блочного элемента, которым див и является. А инпут нет(по-моему).
Но у инпута есть opacity. А у джквери есть $.animate()
^^Это подсказка типа.

Спустя 6 минут, 46 секунд (4.12.2010 - 11:40) vital написал(а):

а и еще
разве

$('div.button')

Будет работать?

Спустя 3 минуты, 55 секунд (4.12.2010 - 11:44) kirik написал(а):

TopRider
А зачем? Чтобы красиво было? А почему нигде никто этого не использует? Потому что это:
- 10 минут времени на разработку
- никому не нужно
- смысловой нагрузки не несет
- без JS не работает
- profit'а не добаваляет
.. все вышесказанное это чисто моё ИМХО.

Спустя 1 минута, 25 секунд (4.12.2010 - 11:45) vital написал(а):

Цитата

А зачем? Чтобы красиво было?

Дизайнеры они такие, да.. Я еле своего от всякого бреда ограничивал.

Спустя 27 минут, 41 секунда (4.12.2010 - 12:13) TopRider написал(а):

В том то и дело, что div.button не работает...отдельный клас описать нада...ну то такое..

а про animate() где почитать можно!?!?

Спустя 23 минуты, 1 секунда (4.12.2010 - 12:36) vital написал(а):

Цитата

В том то и дело, что div.button не работает

там надо как минимум пробел.

Цитата

а про animate() где почитать можно!?!?

В документации по джквери пробовали?
ваш к.о.

Спустя 34 минуты, 32 секунды (4.12.2010 - 13:11) TopRider написал(а):

[QUOTE=vital,4.12.2010 - 09:36] [QUOTE]В том то и дело, что div.button не работает[/QUOTE]
там надо как минимум пробел.
Какой еще пробел

Спустя 1 день, 11 часов, 3 минуты, 22 секунды (6.12.2010 - 00:14) TopRider написал(а):

Вот это работает точно:

<input name="Enter" type="submit" value="Вход" class="button" style="left:5px" onmouseover="$(this).fadeTo('slow',1)" onmouseout="$(this).fadeTo('slow',0.1)" />

Быстрый ответ:

Здесь расположена полная версия этой страницы.