1. Як зробити картинку посиланням в HTML
2. Картинка-посилання на CSS
3. Як картинку зробити посиланням Вконтакте
4. Крок 1. Готуємо картинку
5. Крок 2. Вставляємо посилання в ВК
6. Крок 3. Вставляємо зображення
7. Як зробити картинку посиланням на форумі
8. візуальні редактори

Сьогодні ми займемося перетворенням зображень в активні посилання. Ви знаєте, що інтернет повністю заснований на гіперпосиланнях, що дозволяють кліком миші переміщатися з одних сторінок на інші. У цьому плані, використання в якості посилань картинок має перевагу перед звичайними текстовими лінками, так як дає можливість красиво і органічно вписати все в дизайн сайту.

зміст

Зображення часто застосовуються в якості кнопок замовлення на комерційних ресурсах, ця ж модель застосована в рекламних банерах, інші приклади ви зустрічали в інтернеті самі безліч разів.

Я розповім про те, як зробити зображення посиланням на основі традиційного HTML коду та альтернативної CSS варіації. Також, ми торкнемося перетворення картинки на заслання для соціальної мережі Вконтакте (там все не так просто). І в завершальній частині статті я розповім про форумах, там нерідко використовується кодування відмінна від HTML і вставка зображень і посилань там відбувається інакше.

Як зробити картинку посиланням в HTML

Для формування посилань в HTML використовується простий механізм. Існує спеціальний тег <a> </a>, що позначає посилання. Об'єкти, що знаходяться всередині нього є посиланнями. Обов'язковим атрибутом тега <a> є параметр href, оперделяющій цільову сторінку, на яку посилання буде вести.

Для створення картинки-посилання, досить всередині посилального тега помістити будь-яке зображення. Зображення в HTML вставляються за допомогою тега <img> з атрибутом src, що вказує шлях до зображення.

Результуючий код для вставки зображення-посилання виглядає ось так:

<a href="http://kuda-vedet-ssylka"> <img src = "https: //gde-lezhit-kartinka/kartinka.png"> </a>

По тексту зрозуміло, що kuda-vedet-ssylka - це адреса цільової сторінки, а gde-lezhit-kartinka / kartinka.png - це шлях до файлу зображення і його назва.

Для настройки такого зображення можна використовувати всі стандартні html і css функції, що дозволяють змінювати розміри, місце розташування, прописувати всілякі атрибути.

Для тега <a> часто застосовується атрибут target = "_ blank", що відкриває посилання в новій вкладці.

А тег <img> часто містить alt = "альтернативний текст, що показується, якщо картинка не завантажилася", title = "назва зображення", height = "вказується висота в пікселях", width = "вказується ширина в пікселях".

Результуючий код може бути таким (логотип мого блогу, провідний на його головну сторінку):

<a href="https://biznessystem.ru" target="_blank"> <img src = "https://biznessystem.ru/img/logo-bs.png" title = "Логотип BiznesSystem.ru" alt = "BiznesSystem.ru - Створення Сайтів, Просування і Заробіток в Інтернеті" height = "160" width = "600"> </a>

А ось так він працює:

Картинка-посилання на CSS

Що стосується CSS, то це невід'ємна частина сучасного сайту. Таблиці стилів допомагають позбавитися від зайвої повторення однотипних ділянок коду, одного разу прописуючи властивості певних елементів, а далі тільки вказуючи тільки їх назви.

Для того, щоб зробити картинку-посилання на CSS нам потрібно пройти 2 етапи:

1. Створюємо клас об'єкта і прописуємо його в таблиці стилів (файл style.css).

Загальний код виглядає ось так:

# Link-img {display: block; width: 323px; height: 232px; background: url (https: //gde-lezhit-kartinka/kartinka.png) no-repeat; }

В даному випадку link-img - це клас об'єкта, width і height - розмір зображення, background - фон об'єкта (в якості фону ми встановлюємо зображення).

2. Вставляємо в потрібне місце сайту html посилання з атрибутом, що вказує, що вона відноситься до класу link-img. Для цього використовується той же тег <a>, що і в попередньому варіанті. Код виглядає ось так:

<a id="link-img" href="http://kuda-vedet-ssylka"> </a>

id = "link-img" показує, що посилання не звичайна, а належить до даного класу, в результаті чого, об'єкт <a> приймає властивості цього класу (висоту, ширину і фон). Зверніть увагу, що всередині відкриває і закриває тега порожньо. Ми не прописували нічого, так як все необхідне вже міститься у властивостях класу і потрібне зображення задано фоном об'єкта.

Як картинку зробити посиланням Вконтакте

У соціальних мережах процедура створення посилань з зображень відрізняється від звичайних сайтів з тієї причини, що у вас немає доступу до вихідного коду і ми не можемо використовувати html теги, тому процедура нагадує танці з бубном.

Отже, давайте чаклувати додавати посилання до картинок (або картинки до посилань, кому як подобається) на стіну або в повідомлення в групах Вконтакте.

Крок 1. Готуємо картинку

У ВК зробити клікабельним можна тільки велике зображення, мінімальний розмір 537 на 240 пікселів, все що менше буде відображатися поруч з посиланням, але не буде вести на бажану сторінку.

Підтримувані формати - jpg, gif та png.

Крок 2. Вставляємо посилання в ВК

Коли ви додаєте лінк в вікно повідомлення, соціальна мережа автоматично отримує дані з сайту і висвічує назву сторінки (про це я згадував у статті як зробити гіперпосилання в ВК ), Невеликий опис і попереднє зображення (якщо воно є).

Крок 3. Вставляємо зображення

Мається на увазі, що автоматично сформований Вконтакте блок для посилання не підходить (там немає зображення, воно маленьке або вам не подобається) - треба міняти.

Для цього вибираємо кнопку «Вибрати свою ілюстрацію» (фотоапарат).

З'явиться вікно для вибору файлу, тут же, до речі, ви побачите вимоги до формату і розмірами зображень. Клікаєте «Вибрати файл» і вибираєте те, що ви підготували на першому кроці.

Після вибору, буде можливість злегка підкоригувати - обрізати зайве і повернути. Тиснемо «Зберегти зміни».

Після цього формат інформації, що публікується новини зміниться. Якщо ви все зробили правильно, то картинка займе всю ширину повідомлення і стане посиланням. Натискаєте «Відправити» і насолоджуєтеся результатом.

Як зробити картинку посиланням на форумі

У більшості випадків, при створенні повідомлень на форумах використовуються візуальні редактори, через які можна вставити зображення однією кнопкою і перетворити його на заслання інший.

Але, якщо такої можливості немає, то в справу вступають, BB-коди - це типова форумная розмітка, функціонально схожа на HTML (більшість функцій аналогічні), але, що має інший синтаксис.

Цікаво, що всі ці BB-коди в кінцевому підсумку перекладаються в HTML, так як браузери їх читати не вміють.

Зображення в BB-коді вказується ось так:

Вказується посилання на картинку.

А посилання формуються тегами [url] [/ url]. І для створення посилання-картинки на форумі треба загорнути одну конструкцію в іншу, вийде так:

Само собою, все це проробляється в текстовому режимі редактора, а не в візуальному. Ось і весь секрет.

візуальні редактори

Використовуючи різні графічні конструктори сайтів і сторінок реалізувати все, що описано вище, простіше і швидше, досить натиснути пару кнопок. І в WordPress, і в HTML редакторах, і на форумах принцип дію однаковий, схожі і кнопки.

Для того, щоб зробити зображення посиланням в графічному інтерфейсі необхідно виконати 2 дії:

1. Вставити зображення, ось такими кнопками (приклад з форумом був вище, тут я показую WordPress):

Там треба буде або додати посилання на картинку в інтернеті або завантажити з комп'ютера (можливість завантаження є не завжди).

2. Виділити вставлене зображення мишею (клікнути на нього), після чого натиснути кнопку схожу на ланцюжок і вставити адресу сторінки, на яку повинна посилатися картинка.

На цьому все. Бажаю удачі. Не забувайте оформити підписку на нові статті.

1. 5
2. 4
3. 3
4. 2
5. 1

(7 голосів, в середньому: 5 з 5)