| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 8.0+ | 2.0+ | 1.0+ |
Завдання
Зробити підказку при наведенні на картинку, оформлення підказки повинно управлятися через стилі.
Рішення
Спливаюча підказка, що додається до зображень через атрибут title тега <img>, є системним елементом, тому вид підказки залежить від використовуваного браузера, операційної системи і її параметрів. Хоча безпосередньо змінити оформлення підказки не можна, допустимо піти обхідним шляхом і імітувати спливаючу підказку з допомогою JavaScript.
Для початку створимо порожній елемент <div> з ідентифікатором floatTip і визначимо його стиль. Обов'язковими мають бути три стильових властивості position зі значенням absolute, воно задає абсолютне позиціонування елемента, display зі значенням none приховує елемент і width задає ширину підказки. Інші властивості виступають за бажанням розробника і призначені для зміни оформлення шару (приклад 1).
Приклад 1. Стиль для підказки
#floatTip {
position: absolute; /* Абсолютне позиціонування */
width: 250px; /* Ширина блоку */
display: none; /* Ховаємо від показу */
border: 1px solid #000; /* Параметри рамки */
padding: 4px; /* Поля навколо тексту */
font-family: sans-serif; /* Рубаний шрифт */
font-size: 9pt; /* Розмір шрифту */
color: #333; /* Колір тексту */
background: #ffe5ff; /* Колір фону */
}
Сам скрипт складається з двох функцій — moveTip відстежує рух миші і у відповідності з координатами курсор змінює положення елемента, і toolTip управляє видимістю елемента і виводить в ньому бажаний текст (приклад 2).
Приклад 2. Скрипт для виведення шару
document.onmousemove = moveTip;
function moveTip(e) {
floatTipStyle = document.getElementById("floatTip").style;
w = 250; // Ширина підказки
// Для браузера IE6-8
if (document.all) {
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop;
// Для інших браузерів
} else {
x = e.pageX; // Координата X курсору
y = e.pageY; // Координата Y курсору
}
// Показувати шар праворуч від курсору
if ((x + w + 10) Тіло.clientWidth) {
floatTipStyle.left = x + 'px';
// Показувати шар зліва від курсору
} else {
floatTipStyle.left = x - w + 'px';
}
// Положення від верхнього краю вікна браузера
floatTipStyle.top = y + 20 + 'px';
}
function toolTip(msg) {
floatTipStyle = document.getElementById ("floatTip").style;
if (msg) {
// Виводимо текст підказки
document.getElementById ("floatTip").innerHTML = msg;
// Показуємо підказку
floatTipStyle.display = "block";
} else {
// Ховаємо підказку
floatTipStyle.display = "none";
}
}
Для зручності і універсальності скрипт слід винести в окремий файл і підключати його через атрибут src тега <script>. Остаточний код показано в прикладі 3.
Приклад 3. Створення підказки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset="utf-8">
<title>Підказка</title>
<style>
#floatTip {
position: absolute;
width: 250px;
display: none;
bordor: 1px solid #000;
padding: 4px;
font-family: sans-serif;
font-size: 9pt;
color: #333;
background: #ffe5ff;
}
</style>
<script src="scripts/tooltip.js"></script>
</head>
<body>
<p><img src="images/img.jpg" alt="Фотографія" onMouseOver="toolTip('Камера: Canon EOS 350D<br>Об’єктив: Canon EF 24-105 f/4L IS USM<br>Спалах: Canon Speedlite 580 EX<br>Витримка: 1/125<br>Діафрагма: 5.6')"
onMouseOut="toolTip()"></p>
<div id="floatTip"><div id="floatTip"></div>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Спливаюча підказка, що виводиться за допомогою JavaScript