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

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

Главная » JavaScript » 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; }
Собственно и все.
logo
Просмотров: 6 108
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5,00 out of 5)
Загрузка...

5
  • Константин:

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

  • Константин:

    Сам разобрался. Спасибо за скрипт!:)

  • Константин:

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

  • source:

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

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

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

Яндекс.Метрика