Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Главная

Рассылка

Магазин

Видео Курсы

Секрет

Услуги

Сегодня: Добавить в Избранное Написать Автору Обмен валют Оплата сервисов

Появление картинки при наведении курсора на ссылку

Автор: Андрей Краснокутский

Дата: 2012-03-12

Скрипт, выводящий указатель при наведении курсора

В этом уроке мы разберем работу JavaScript (скрипта) для сайта, позволяющего вывести графический указатель при наведении курсора на ссылку. Проще говоря когда Вы наводите мышку на ссылку, напротив этой ссылки появляется небольшая картинка.

Где можно применить этот Скрипт? Например можно сделать небольшую стрелочку (картинку), которая будет указывать на какую из ссылок в данный момент наведен курсор. Подобный эффект реализуется в сервисе Яндекса: Телепрограмма и мне всегда было интересно, как это сделано.

Еще один пример реализации на сайтах данного скрипта: использование в боковых сайтбарах (в меню сайтов) навели курсор на ссылку и сбоку появляется графический указатель, красиво и наглядно.

Живой пример работы данного скрипта Вы видите ниже. Наведите курсор на ссылки ниже: Ссылка 1, Ссылка 2, Ссылка 3. Слева от ссылки появится графический указатель (картинка), указывающая на ссылку, находящуюся в зоне действия курсора.

Ссылка 1
Ссылка 2
Ссылка 3

Теперь давайте разберемся с практической реализацией скрипта и внедрением его в код web-страницы.

Шаг 1. Создаем файл: link.css стилевой таблицы стилей CSS и записываем в него код Листинга 1:

Листинг 1.

.bulletimagestyle { position: absolute; left: -200px; }

Подключаем данный файл 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.

<a href="#1" class="ddbullet" rel="bulletimg1">Ссылка 1 </a>
<a href="#2" class="ddbullet" rel="bulletimg2">Ссылка 2 </a>
<a href="#3" class="ddbullet" rel="bulletimg3">Ссылка 3 </a>

В Листинге 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. Справа от ссылки появится графический указатель (картинка), указывающий на ссылку, находящуюся в зоне действия курсора.

Ссылка 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]

Вот собственно говоря и все. Закачиваем все на сервер и радуемся.

Если что-то непонятно скачайте исходник к уроку.

Всего Вам доброго.

Читайте так же другие наши материалы.

Как открыть новое окно уменьшенного размера

Плавное увеличение картинки при наведении курсора

Как создать эффект скругления углов изображения с помощью JavaScript

Как зарегистрироваться в качестве индивидуального предпринимателя (ИП)

Контекстная реклама Google AdSense. Практическое руководство.

Обучающий Видео Курс по созданию сайтов

Просмотров: 20967

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Комментарии добавил(а): Павел
Дата: 2012-03-12

а помоему можно то же самое сделать на 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

Огромное спасибо за урок! Только вот не знаете как это организовать в виртуалмарте?

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

Разработка полного пакета документов по Охране труда под "КЛЮЧ"
с учетом специфики работы вашей организации. СУОТ.
Сопровождение организаций по Охране труда
(очное или дистанционное).

Новости сайта

12.05.2015
Новая услуга! Изготовление графических элементов. Заказать: иллюстрации для книг, коллажи, подарочные и поздравительные открытки, 3D обложки, фантастические и сюрреалистические работы, зарисовки, баннеры и еще много, многое другое, быстро и дешево.

05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"

Реклама в Почтовых Рассылках.

Домены

Сервис мгновенной регистрации Доменов

Google Adsense

Навигация

Уроки HTML

Инструменты

Шаблоны сайтов

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

ОХРАНА ТРУДА

МОДУЛЬНЫЕ КАРТИНЫ

Почтовая Рассылка

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете

Заработает каждый
от Школьника до Пенсионера!
"Как?"
Узнать сейчас >>>

Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.

Последние заметки

Когда нужно пересматривать инструкции по Охране труда

Что должна содержать инструкция по охране труда?

Виды инструкций по Охране труда

Статистический отчет Форма № 7-травматизм "Сведения о травматизме на производстве и профессиональных заболеваниях"

Какие отчеты необходимо сдать Специалисту по охране труда за год

Новости сайта

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты

Проверить аттестат

Проверено Z-PAYMENT

Принимаем Z-PAYMENT

www.megastock.ru

HTML | CSS | Статьи | Инструменты | Шаблоны | Книги | Украшения | Сайт | Заработок | Обман
PHP | Услуги | Скрипты | Рассылка | SEO | jQuery | СОУТ | Online | Секрет| Написать Автору

Разрешается полное или частичное копирование материалов сайта с обязательным
указанием ссылки на автора материала и источник - www.LuksWeb.ru

Copyright Андрей Краснокутский © 2008 - 2020