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

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Распакуйте скачанный архив в отдельную папку. В папке stickytooltip Вы обнаружите папку с изображениями img, папку css с файлом стилей stickytooltip.css, папку js с ява скриптом stickytooltip.js и НТML-файл demo.html. Откройте последний в вашем браузере и проверьте работу скрипта. Интернет в это время должен быть подключен! Последняя версия библиотеки jQuery (Файл jquery.min.js) грузится с сайта Google API.

Примечание: если Вы не желаете, чтобы файл jquery.min.js грузился с вышеупомянутого сайта, скачайте его последнюю версию в библиотеке Jquery (//jquery.com) и разместите в папке js, пропишите путь к нему в индексном файле, например, вместо строки:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>    

у Вас будет строка:

	

<script type="text/javascript" src="js/jquery.min.js"></script> 	

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

Шаг 1: подберите изображения и разместите их в папке img и закачайте в одноименную папку сайта.

Шаг 2: содержимое папок js и css закачайте в соответствующие папки сайта, которые, в свою очередь, находятся в корневой папке.

Шаг 3: в разделе head на вашей HTML-странице подключите библиотеку jQuery, а так же коды вызова скрипта и стилей:

<script type="text/javascript" 
src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript" 
src="js/stickytooltip.js">
</script>
<link rel="stylesheet" type="text/css" href="css/stickytooltip.css">  

Шаг 4: вставьте коды элементов в раздел body вашей страницы:

<p>Содержание страницы здесь...</p>
<p><a href="//www.catgallery.ru/breed/cats/" target="_blank"
 data-tooltip="sticky1">Породы кошек</a></p>
<p><a href="//vetinfo.com.ua/sobaki/porody-sobak" target="_blank" 
data-tooltip="sticky2">Породы собак</a></p>
<p><img src="img/mycat.gif" data-tooltip="sticky3" alt=""></p>
<p><a href="//www.catgallery.ru/breed/cats/" target="_blank">
<img src="img/mycat.gif" data-tooltip="sticky3" alt=""></a></p>
<p>Содержание страницы здесь...</p>

Пояснения:

          Адрес в Интернет, куда попадает пользователь, кликнув по ссылке или баннеру;

          Название элемента, например, ссылки;

          Файл изображения, на которое наводят мышь (небольшого размера, такое же, но размером побольше указано в «HTML для подсказки»).

Шаг 5: вставьте ниже приведенный код подсказок в раздел body вашей страницы:

<!--HTML для подсказки-->

<div id="mystickytooltip" class="stickytooltip">
<div style="padding:7px">

<div id="sticky1" class="atip" style="wclassth:300px">
<img src="img/korat3.jpg" alt=""><br>
<p align=center>Породы кошек</p>
</div>

<div id="sticky2" class="atip"  style="wclassth:280px">
<img src="img/dog1.jpg" alt=""><br>
<p align=center>Породы собак</p>
</div>

<div id="sticky3" class="atip">
<img src="img/mycat1.gif" alt="">
</div>


<div id="sticky4" class="atip" style="wclassth:256px">
<img src="img/site_172635.jpg" alt=""><br>
<p align=center>Источник урока</p>
</div>

</div>

<div class="stickystatus"></div>
</div>

<!--ссылка на источник урока-->
<a href="http://www.dynamicdrive.com" data-tooltip="sticky4" 
target="_blank">Dynamic Drive</a>

Пояснения:

          Размер контейнера для подсказки;

          Файлы изображений, которые появляются в контейнерах с подсказками при наведении курсора мыши. Размеры изображений должны быть корректными;

          Текст в контейнере с подсказкой.

Всё! На этом можно закончить. Успехов в освоении материала! До новых уроков! Л.М.