Изменение стиля CSS при помощи JavaScript30.04.2009 13:08

Задача: изменять фоновый рисунок при наведении мышкой.

Одно из решений:

<div class="hot_offer" onmouseover="javascript: this.style.backgroundImage='url(img/bg_ho_active.jpg)'; "  onmouseout="javascript: this.style.backgroundImage='url(img/bg_ho.jpg)'; "  >

 

Соответственно, в классе прописано 

    background: transparent url('/img/bg_ho.jpg') no-repeat top left;        

Тонкость тут в размещении кода внутри тэга. Почему-то такая конструкция не работает:

 <div class="hot_offer" onmouseover="javascript: this.style.backgroundImage='url('img/bg_ho_active.jpg')'; "  onmouseout="javascript: this.style.backgroundImage='url('img/bg_ho.jpg')'; "  >

Кавычки, обрамляющие имя файла, лишние

 

 

<<< Использование специальных символов HTML
Использование специальных символов HTML
Модный Lightbox от Lokesh Dhakar >>>
Модный Lightbox от Lokesh Dhakar

Комментарии

1.
det 17.10.2010 10:53
Спасибо, воспользовался. действительно, проще так сделать, чем писать отдельно функцию
2.
29.10.2010 15:31
Не понял зачем так?
не проще ли использовать функцию?
3.
Александр 29.10.2010 15:40
Можно и функцию использовать, можно и JQUERY подключить. Я описал самый простой и быстрый способ. Не только в написании, но и в работе.
4.
volhv 21.12.2010 17:09
а еще проще в CSS прописать:
.hot_offer {background: url('img/bg_ho.jpg');}
.hot_offer:hover {background: url('img/bg_ho_active.jpg');}
5.
Дмитрий 25.06.2011 10:21
А при нажатии?
6.
Александр 25.06.2011 14:28
При нажатии можно попробовать onmousedown - onmouseup
Можно прочитать здесь - http://htmlbook.ru/html/attr/onmousedown
7.
Максим 07.05.2012 13:15
>Почему-то такая конструкция не работает
"javascript: this.style.backgroundImage='url('img/bg_ho_active.jpg')'; "
будет выполнена как код JavaScript
this.style.backgroundImage = 'url('img/bg_ho_active.jpg')';
обратите внимание на значение -- из-за одинаковых скобок код получился невалидный.


> А при нажатии?
Запихнуть в и определить :active
http://htmlbook.ru/css/active

8.
Александр 07.05.2012 13:27
Посмотрите, заметка написана в 2009 году. И посмотрите на поддержку этого свойства разными браузерами. :active - это для ссылки 100% правильно. А для или .

Этот пост мог устареть, как и все в нашей жизни :)

Добавление комментария

Имя:
Текст:
Введите цифры, изображенные на картинке
protect

Если вы хотите написать личное письмо- Обратная связь