Назад Вперед Зміст

Графічні посилання

Щоб зробити зображення посиланням, елемент <img /> потрібно розмістити між відкриваючим і закриваючим тегами елемента <a>.

Приклад графічного посилання

Клацання мишкою по зображенню відкриває вказану сторінку:

HTML-код для графічного посилання:

<!-- Просте графічне посилання -->
<a href="Kisa.html">
    <img src="kisa.png" alt="Іконка котика">
</a>
        

Розширений варіант з CSS-стилями:

<style>
    .image-link {
        display: inline-block;
        border: 1px solid #ddd;
        padding: 10px;
        transition: transform 0.3s;
    }
    .image-link:hover {
        transform: scale(1.05);
    }
</style>

<a href="Kisa.html" class="image-link">
    <img src="zima.png" alt="Kотика" 
         title="Натисніть, щоб відкрити сторінку про котиків">
</a>
        

Важливі атрибути:

• href - вказує URL-адресу, на яку веде посилання
• src - шлях до зображення
• alt - альтернативний текст (важливо для доступності)
• title - текст підказки при наведенні