При створенні сайту часто виникає необхідність в тому, щоб відобразити підказки до посилань при наведенні на них. Це не примха творців, це часом необхідність, покликана поліпшити огляд сторінок і полегшити користувачам пошук потрібної інформації на сайті.
Уявляю вашій увазі відмінне рішення по створенню підказки до посилань з допомогою таблиць каскадних стилів CSS і невеликого Javascript:
Крок 1.
Насамперед розглянемо, з чого складається сама підказка, точніше сказати код її виконання.
Що б ця функція заробила вам необхідно вставити в сторінку перед закриваючим тегом пару рядків такого змісту:
<script type="text/javascript" src="BubbleTooltips.js"> <script type="text/javascript">window.onload=function(){enableTooltips()}; |
window.onload=function(){enableTooltips()};
Крок 2.
Потім просто завантажити в корінь сайту файл стилів bt.css,
а так же файл картинки bt.gif в папку, де у вас знаходяться зображення, частіше вона обзивається типу img або images.
Ну і нарешті файл сценарію javascript BubbleTooltips.js теж вантажимо в корінь сайту або в папку з вашими сценаріями. Тільки в цьому випадку не забудьте прописати повний шлях до цього та інших файлів.
Крок 3
Файл bt.css:
.tooltip { width:200px; color:#000; font:lighter 11px/1.3 Arial,sans-serif; text-decoration:none; text-align:center; } .tooltip span.top { padding:30px 8px 0; background:url(bt.gif) no-repeat top; } .tooltip b.bottom { padding:3px 8px 15px; color:#548912; background:url(bt.gif) no-repeat bottom; } |
.tooltip {
width:200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;
text-align:center;
}.tooltip span.top {
padding:30px 8px 0;
background:url(bt.gif) no-repeat top;
}.tooltip b.bottom {
padding:3px 8px 15px;
color:#548912;
background:url(bt.gif) no-repeat bottom;
}
За бажанням вигляд картинки підказки можете поміняти на свою, а саме файл bt.gif.
Властивості background:url(bt.gif) no-repeat top; прописаний шлях до вашої картинці, тут і поміняєте при необхідності.
І не забувайте, якщо міняєте розташування файлу то прописуйте правильний шлях до нього.
Крок 4
Посиланнях або уривку тексту, у яких ми хочемо бачити спливаючу оформлену підказку, необхідно привласнити елементам атрибут title, і вже в ньому прописати зміст підказки.
Виглядати це буде приблизно так:
<a title="БЛА БЛА БЛА БЛА БЛА БЛА" href="http://#site/" class="tt">Ваше посилання</a> |
Ваше посилання
3аключение: Експериментуйте з формами і кольорами оформлення підказки, все у вас вийде.
З Повагою, Андрій .
Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: