Главная » 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; }
Собственно и все.

Похожие записи
Просмотр паролей скрытых за звездочками в браузере... Чтобы просмотреть пароли скрытые за звёздочками в браузере, вставьте этот скрипт в адресную строку вашего браузера и нажмите Enter. javascript:(f...
This entry was posted in JavaScript and tagged , , . Bookmark the permalink.

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

  1. Константин говорит:

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

  2. Константин говорит:

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

  3. Константин говорит:

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

  4. source говорит:

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

  5. Роман говорит:

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *