| |
|
|
| | Здравствуйте Уважаемое сообщество.
Ни подскажете как сделать смену рисунка кнопки при наведении указателя мыши. | |
| |
|
|
| |
|
|
| |
для: pautina
(09.12.2010 в 13:45)
| | | Изменяйте имя класса, либо удаляйте из класса имя класса определяющее фон по наведению:
e.className = 'main' //для события onmouseover
e.className = e.className.replace(/[\s]?main/g, ""); //для события onmouseout
|
где: e - элемент, для которого происходит смена, main - имя класса определяющее фон по наведению. | |
| |
|
|
| |
|
|
| |
для: sim5
(09.12.2010 в 14:29)
| | | Если у меня будет 2 рисунка для кнопки (1 рисунок - фон кнопки, 2 рисунок - фон кнопки при наведении)
html
<form action="" method="post">
<p>
<input type="text" class="input_text" value="Введите номер телефона" onfocus="this.value=''" >
<input type="button" class="butt_text" value="Перезвонить">
</p>
</form>
|
css
.input_text { width:245px; height:35px; background:url(images/bg_input_text.jpg) left top no-repeat; text-align:center; font:10pt Verdana, Arial, Helvetica, sans-serif; color:#5b5858; border:none; }
.butt_text { width:130px; height:30px; text-align:center; font:10pt Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; background-color:#0000FF; border:none; }
|
Как связать это с Вашим участком кода? | |
| |
|
|
| |
|
|
| |
для: pautina
(09.12.2010 в 16:08)
| | |
<style>
.input_text {
width:245px;
height:35px;
background:url(images/bg_input_text.jpg) 0 0;
text-align:center;
font:10pt Verdana, Arial, Helvetica, sans-serif;
color:#5b5858;
border:none;
}
.hover {
background:url(images/bg_input_text.jpg) 0 -21px;
}
</style>
<script>
function hoverBack(e,d) {
e.className = d ? e.className + " hover" : e.className.replace(/[\s]?hover/g, "");
}
</script>
<form action="" method="post">
<input onmouseover="hoverBack(this,1)" onmouseout="hoverBack(this,0)"
type="text" class="input_text">
</form>
|
Свяжите изображения для кнопок в одно (спрайт) и указывайте его в стилях, указывая необходимую позицию как по умолчанию так и по событиям. Например, у вас изображения по 21рх высотой, вы их соеденили оба так, что верхняя часть, это изображение по умолчанию, а нижняя (ниже 21рх) это изображениие по наведению. Это и указывается в стиле hover для кнопки. Ну а далее работа скрипта - обработка событий. Одна функция, в которую передается тип события, ну и.... | |
| |
|
|
| |
|
|
| |
для: sim5
(09.12.2010 в 16:22)
| | | Спасибо большое. | |
| |
|
|
| |
|
|
| |
для: pautina
(09.12.2010 в 13:45)
| | | Если не секрет, то зачем вам для столь простой задачи JavaScript, когда все реализуется на чистом CSS? | |
| |
|
|
| |
|
|
| |
для: mihdan
(13.12.2010 в 02:24)
| | | для кнопки вряд-ли чистым css возможно. а если и можно то не кроссбраузерно :( | |
| |
|
|
