|
Скрипт на javascript, выводящий сообщения-подсказки при наведении на объект, в народе называемый "ToolTip"
После установки скрипта, для какого либо объекта достаточно задать событие и указать функцию, буть то дескриптор span, img, p, или любой другой...
Чтобы не обьяснять на пальцах его работу, приведу пример: Наведите курсор на эту надпись или на эту...
Теперь тоже самое с иконками и изображениями:
Скрипт был взят из стандартного набора Dreamweaver`a скорее для меня самого, потому как постоянно забываю где он есть, приходилось искать различные варианты реализации в интернете. Но этот скрипт мне понравился больше, даже не знаю почему :) Теперь я точно буду знать где он есть!
Как установить скрипт на сайт?
Это можно сделать несколькими способами:
1. Вставить полностью весь скрипт в страницу. Этот вариант подойдёт в тех случаях, когда скрипт у вас используется только на одной странице и больше нигде не востребован. В других случаях лучше его не использовать. К тому же, в случае с Joomla у вас скорее всего код будет вырезан из страницы. "Обрезалку" конечно можно выключить (Материалы-> Менеджер материалов -> Параметры -> Параметры фильтрации -> Указать "Группы для фильтра" как "Зарегистрированный" или кого нужно из административной группы и установить "Тип фильтрации" на "Чёрный список") но это не всегда и не всем :) помогает.
2. Вставить код скрипта внутри тега <head>. Нет плюсов у этого метода, но тем не менее он будет работать :) Кстати, можно совместить этот метод с первым.
3. Поместить скрипт в отдельный файл, например tooltip.js, и подключить его, вставив в заголовке (внутри тега <head>) вставив строку:
<script type="text/javascript" src="/tooltip.js"></script> На мой взгляд, это самый правильный и удобный способ.
Таким образом, вы не будете захламлять страницу лишним кодом, что положительно скажется на оптимизации сайта, файл скрипта кешируется браузером при первой загрузке, увеличив тем самым скорость открытия странички посетителем сайта. И такой способ наиболее подходит для "шаблонных" сайтов, какими является большинство сайтов на CMS, в том числе и Joomla!
Поскольку третий способ так хорош, рассмотрим именно его:
- Скачиваем файл скрипта, разархивируем и заливаем его на сервер. Например в корневую директорию сайта, или в папку шаблона (если это Joomla! то в templates/НазваниеВашегоШаблона/), вообщем туда, куда вам удобней. Главно правильно на него сослаться потом :)
- Внутри тега <head> подключаем наш скрипт, вставляя строчку:
<script type="text/javascript" src="/tooltip.js"></script> - Если скрипт в корневой директории сайта
<script type="text/javascript" src="tooltip.js"></script> - Если сайт находится в папке отличной от корневой
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/tooltip.js"></script> - Если у вас сайт на Joomla! и вы поместили скрипт в папку вашего шаблона, то в файл index.php вставляете эту строчку.
- После тега <body> вставляем сам слой и инициализируем функцию:
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
<script language="JavaScript"><!--
initToolTips(); //--></script>
- Скрипт готов к работе, осталось установить события в те места, где нам необходимо вывести подсказку:
- Упрощенный способ, использует оформление, заданное по умолчанию.
onMouseOver="toolTip('tool tip text here')";
onMouseOut="toolTip()";
- Или используем полный способ, вызов функции с тремя параметрами:
текст, цвет текста, цвет фона
onMouseOver="toolTip('Тут пишем текст', '#FFFF00', 'orange')";
onMouseOut="toolTip()";
- Пример использования событий:
<span onmouseout="toolTip()" onmouseover="toolTip('Привет я скрипт ToolTip','red','#FFFFFF')">
Наведите курсор мыши на эту надпись
</span>
- У вас должен получится примерно такой код:
<html>
<head>
<link rel="stylesheet" href="/css.css" type="text/css" />
<script type="text/javascript" src="tooltip.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
<script language="JavaScript"><!--
initToolTips(); //--></script>
<h1 align="center" onmouseout="toolTip()" onmouseover="toolTip('Привет я скрипт ToolTip','red','#FFFFFF')">Скрипт ToolTip</h1>
</body>
</html>
Просьба при копировании материала ставить ссылочку на этот сайт
Файл скрипта ToolTip: tooltip.rar
Размер: 1.68 кб
Скачать скрипт ToolTip
Скачивание будет происходить бесплатно, с нашего сервера и не требует какой либо регистрации, или СМС |
Комментарии
спасибо), будем пробовать...
RSS лента комментариев этой записи