Блог о программировании, электронике и рыбалке

JavaScript скрипт для смены картинки при наведении мыши на “текст”

смены картинки при наведении мышиРеализовывал смену скриншота при наведении мыши на пункт в описании. В принципе, ничего сложного в этом нету и в интернете хватает примеров на JavaScript, но я все же опишу как я это делал – вдруг кому-то понадобится. Тем более, этот вариант работает без глюков во всех браузерах.

Основной скрипт вынесен в отдельный файл. Скачайте его и залейте на ваш сайт.

Далее добавьте в код странички этот скрипт:

<script type="text/javascript" src="http://XXXXX/mouse.js"></script>
<script type="text/javascript">
// JavaScript Document
$(document).ready(function(){
$('a').hover(
function(){
id = $(this).attr('id');
id = id.replace(/menu(\d+)/gi,'$1');
$('#img').attr('src','http://XXXXX/'+id+'.png');
},
function(){
$('#img').attr('src','http://XXXXX/default.png');
});
});
</script>

Не забудьте в нем указать свои пути к скрипту и картинкам. default.png – это картинка, которая будет отображаться изначально и после того, как курсор уйдет со ссылки.

Вывод самой картинки происходит так:

<img id="img" border="0" src="default.png" />

Ссылку, при наведении на которую будет меняться картинка, оформляем так:

<a id="scanner" class="instruments" href="#">Проверка</a>

Здесь id="scanner" – это имя файла картинки, который будет отображаться при наведении мыши – то есть scanner.png.

Единственное, что еще хочу описать – это class="instruments". Его я добавил в файл стилей темы блога для того, чтобы ссылки не смотрелись как ссылки, а были в виде обычного текста. То есть я убрал подчеркивание, определил цвет и поменял курсор. Реализовано это так:

a.instruments:link, a.instruments:active, a.instruments:visited, a.instruments:hover
{ color: #000000; text-decoration: none; cursor: default; }
Собственно и все.
Присоединяйтесь к нашей группе в Telegram @GeekElectronics
  • keyboard_arrow_downJavaScript скрипт для смены картинки при наведении мыши на “текст”
    • Автор:
    • Миниатюра: JavaScript скрипт для смены картинки при наведении мыши на “текст”
    • Рубрика: Веб-разработка
    • Обновлено: 13.12.2017
    • Комментариев: 5
    • Просмотров: 7 525
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars
    Загрузка...
  • Поделитесь с друзьями
Geek Electronics

Комментариев: 5

  • Avatar for source
    Константин:

    В результате работы данного скрипта при наведении на любую ссылку пытается появляться картинка. Как это исправить?

  • Avatar for source
    Константин:

    Мне для решения моей проблемы хватило сделать так, чтобы была проверка на существование id у изображения. Если id есть, то функция выполняется, а иначе ничего не происходит.

  • Avatar for source
    source:

    вот мне бы кто подсказал, а то после отпуска мозг еще не включился :)

  • Avatar for source
    Роман:

    А как сделать что бы только отдельная ссылка-картинка при наведении показывала другую картинку

Добавить комментарий

arrow_upward