Появление картинки при наведении курсора на ссылку
Автор: Андрей Краснокутский
Дата: 2012-03-12
Скрипт, выводящий указатель при наведении курсора
В этом уроке мы разберем работу JavaScript (скрипта) для сайта, позволяющего вывести графический указатель при наведении курсора на ссылку. Проще говоря когда Вы наводите мышку на ссылку, напротив этой ссылки появляется небольшая картинка.
Где можно применить этот Скрипт? Например можно сделать небольшую стрелочку (картинку), которая будет указывать на какую из ссылок в данный момент наведен курсор. Подобный эффект реализуется в сервисе Яндекса: Телепрограмма и мне всегда было интересно, как это сделано.
Еще один пример реализации на сайтах данного скрипта: использование в боковых сайтбарах (в меню сайтов) навели курсор на ссылку и сбоку появляется графический указатель, красиво и наглядно.
Живой пример работы данного скрипта Вы видите ниже. Наведите курсор на ссылки ниже: Ссылка 1, Ссылка 2, Ссылка 3. Слева от ссылки появится графический указатель (картинка), указывающая на ссылку, находящуюся в зоне действия курсора.
Подключаем данный файл link.css таблицы стилей к web-странице. Для этого прописываем код Листинга 2 между тегами <head> и </head>:
Листинг 2.
<link rel="stylesheet" href="ПУТЬ К ФАЙЛУ/link.css" type="text/css" />
Если на Вашем сайте уже есть таблица стилей, можно добавить код Листинга 1 в существующую таблицу CSS. Тогда Шаг 1 пропустите!
Шаг 2. Создаем файл самого скрипта: link.js и записываем в него код Листинга 3:
Листинг 3.
var bulletimg1=["Путь к файлу/st3.gif", 20, 2, -8]
var bulletimg2=["Путь к файлу/st3.gif", 20, 2, -8]
var bulletimg3=["Путь к файлу/st3.gif", 20, 2, -8]
//цифра идущая сразу после пути к файлу, отвечает за ширину изображения
var classnameRE=/(^|\s+)ddbullet($|\s+)/i //regular expression to screen for classname within element
function caloffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function displaybullet(linkobj){
var reltovar=window[linkobj.getAttribute("rel")]
bulletobj.setAttribute("src", reltovar[0])
bulletobj.style.left=caloffset(linkobj, "left")-reltovar[1]-reltovar[2]+"px"
bulletobj.style.top=caloffset(linkobj, "top")-reltovar[3]+"px"
bulletobj.style.visibility="visible"
}
function modifylinks(){
bulletobj=document.createElement("img")
bulletobj.setAttribute("id", "bulletimage")
bulletobj.className="bulletimagestyle"
document.body.appendChild(bulletobj)
for (i=0; i
if (typeof document.links[i].className=="string" && document.links[i].className.search(classnameRE)!=-1){
document.links[i].onmouseover=function(){displaybullet(this)}
document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"}
}
}
}
if (window.addEventListener)
window.addEventListener("load", modifylinks, false)
else if (window.attachEvent)
window.attachEvent("onload", modifylinks)
else if (document.getElementById || document.all)
window.onload=modifylinks
Подключаем JavaScript (файл link.js) к web-странице. Для этого прописываем код Листинга 4 между тегами <head> и </head>:
Листинг 4.
<script language="JavaScript" type="text/javascript" src="ПУТЬ К ФАЙЛУ/link.js"></script>
Шаг 3. Теперь необходимо доработать сами ссылки, напротив которых Вы планируете выводить графическое изображение, в соответствии с Листингом 5:
В Листинге 5 Вы видите всего три ссылки. На реальном сайте, ссылок конечно же будет больше. И каждой из ссылок необходимо прописать свои значения идентификатор и класс ("#1" class="ddbullet" rel="bulletimg1").
Теперь давайте разберем часть кода Листинга 3, а именно первые три строчки:
var bulletimg1=["Путь к файлу/st3.gif", 20, 2, -8]
var bulletimg2=["Путь к файлу/st3.gif", 20, 2, -8]
var bulletimg3=["Путь к файлу/st3.gif", 20, 2, -8]
Здесь Вы видите, что в данный момент скрипт работает всего на три ссылки. Для каждой новой ссылки необходимо дописать новую строчку var bulletimg3=["Путь к файлу/st3.gif", 20, 2, -8]. Здесь же прописывается путь до графических файлов (картинок), которые конечно же нужно создать и закачать на сайт.
Первая цифра (20) определяет ширину графического файла. Вторая и третья цифры (2 и -8) определяют позицию картинки по горизонтали и вертикали, они подбираются экспериментально и могут быть со знаками минус (-).
"Играясь этими параметрами" например сместить картинку (графический файл) на правую сторону от ссылок. Наведите курсор на ссылки ниже: Ссылка 4, Ссылка 5, Ссылка 6. Справа от ссылки появится графический указатель (картинка), указывающий на ссылку, находящуюся в зоне действия курсора.
В этом случае первые три строчки Листинга 3 будут выглядеть вот так:
var bulletimg4=["Путь к файлу/st2.gif", 20, -130, -8]
var bulletimg5=["Путь к файлу/st2.gif", 20, -130, -8]
var bulletimg6=["Путь к файлу/st2.gif", 20, -130, -8]
Вот собственно говоря и все. Закачиваем все на сервер и радуемся.
а помоему можно то же самое сделать на css или нет? команда :after и :before (content) - позволяют выводить картинки или только текст?
Комментарии добавил(а): Николай Гижицкий Дата: 2012-03-12
Спасибо!
Полезная информация. Уже подумываю, где бы применить на своем блоге.
Комментарии добавил(а): Нина Дата: 2012-03-12
А зачем нагружать страницу сайта скриптом, если все то же можно сделать на CSS?
Комментарии добавил(а): Александр Дата: 2012-03-13
Спасибо!
Комментарии добавил(а): Роман Дата: 2012-03-13
А для SEO это не создаст проблем?
Робот поймет такое меню сайта?
Комментарии добавил(а): АндрейК Дата: 2012-03-13
В сайтостроении, так же как в других компьютерных областях, многие задачи можно решать разными способами. В этом уроке (как и во многих других уроках) я рассказываю лишь об одном пути реализации задачи. А Вы уже вольны выбирать сами, что и когда использовать на своих ресурсах. На SEO этот скрипт не отразится никак (роботы все прекрасно проиндексируют), ведь ссылкам мы присваем только идентификатор и стиль офомления.
Комментарии добавил(а): Олег Гузь Дата: 2012-03-13
Спасибо, Андрей!
Комментарии добавил(а): semen74 Дата: 2012-04-08
Что-то у меня не получается. Кажется пути к гифкам не могу прописать...Бы пример какой -то для Dle
Комментарии добавил(а): АндрейК Дата: 2012-04-09
Ivan,:Первая цифра (20) определяет ширину графического файла. Вторая и третья цифры (2 и -8) определяют позицию картинки по горизонтали и вертикали, они подбираются экспериментально и могут быть со знаками минус (-).
Комментарии добавил(а): ivan Дата: 2012-04-09
Почему-то в опере графический указатель справа отображается выше ссылки. Подскажите, пожалуйста.
Комментарии добавил(а): Виталий Дата: 2012-09-25
Спасибо за урок. А подскажите пожалуйста как это можно сделать в CMS Joomla. Опишу подробнее: есть список материалов и для каждого материала разное изображение, нужно чтобы при наведении курсора на название из списка слева появлялось определённое изображение. Заранееспасибо.
Комментарии добавил(а): Сергей Дата: 2013-05-14
Огромное спасибо за урок!
Только вот не знаете как это организовать в виртуалмарте?