Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2013, 15:17
Аспирант
Отправить личное сообщение для Lutsk Посмотреть профиль Найти все сообщения от Lutsk
 
Регистрация: 24.06.2011
Сообщений: 53

Смена изображения при наведении курсора
Есть такой код, где при наведении изображение меняется на другое (замена атрибута "src"):
<li>
	<a href="#">
		<img src="image.png" alt="" onmouseout="this.src='image.png'" onmouseover="this.src='image_hover.png'" />
	</a>
</li>

Как изменить его, чтоб "src" менялся при наведении на <li>?
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2013, 17:50
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Я думаю вам нужно использовать css:

<style>
    li a{
        display: block;
        width: 20px;
        height: 20px;
        background: url(http://javascript.ru/forum/images/smilies/sad.gif) no-repeat;
        white-space: nowrap;
        text-indent: 100%;
    }
    li:hover a{
        background-image: url(http://javascript.ru/forum/images/smilies/tongue.gif)
    }
</style>
<ul>
    <li>
        <a href="#">Текст для SEO и прочих нужд</a>
    </li>
</ul>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 06.10.2013, 18:00
Аспирант
Отправить личное сообщение для Lutsk Посмотреть профиль Найти все сообщения от Lutsk
 
Регистрация: 24.06.2011
Сообщений: 53

danik.js, css я знаю. Мне надо именно то, что спросил. Смену атрибута src при ховере на родительский <li>.
Ответить с цитированием
  #4 (permalink)  
Старый 06.10.2013, 20:19
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<li onmouseout="querySelector('img').src='image.png'" onmouseover="querySelector('img').src='image_hover.png'">
    <a href="#">
        <img src="image.png" alt="" />
    </a>
</li>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 06.10.2013, 21:02
Аспирант
Отправить личное сообщение для Lutsk Посмотреть профиль Найти все сообщения от Lutsk
 
Регистрация: 24.06.2011
Сообщений: 53

Во, вот это оно, спасибо! Плюс с меня, когда ресурс позволит!
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2024, 23:54
Кандидат Javascript-наук
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 143

А как добавить этому действию анимацию?
Ответить с цитированием
  #7 (permalink)  
Старый 23.04.2024, 09:23
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от StartGames
А как добавить этому действию анимацию?
Переделать на спрайт
https://learn.javascript.ru/css-sprite
https://html5css.ru/css/css_image_sprites.php

И решить как все это потом "анимировать". Т.е. нужен некий сценарий того, что ты хочешь видеть в итоге на экране...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена фона изображения при клике на иконку Letto Элементы интерфейса 2 16.06.2013 17:16
Запуск анимации при наведении курсора на ссылку в другом фрейме flasher167 Общие вопросы Javascript 0 11.04.2013 19:33
Смена картинок при наведении utb jQuery 0 06.04.2012 08:58
Скрипт для увеличения изображения при наведении курсора TypucT Javascript под браузер 1 10.10.2011 15:29
Смена контента из бд при наведении и подсветка. Madd Общие вопросы Javascript 3 05.07.2010 11:29