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>Об&rsquo;єктив: 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