Реализовывал смену скриншота при наведении мыши на пункт в описании. В принципе, ничего сложного в этом нету и в интернете хватает примеров на 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; }
Собственно и все.
В результате работы данного скрипта при наведении на любую ссылку пытается появляться картинка. Как это исправить?
Сам разобрался. Спасибо за скрипт!:)
Мне для решения моей проблемы хватило сделать так, чтобы была проверка на существование id у изображения. Если id есть, то функция выполняется, а иначе ничего не происходит.
вот мне бы кто подсказал, а то после отпуска мозг еще не включился :)
А как сделать что бы только отдельная ссылка-картинка при наведении показывала другую картинку