Як зробити картинку в картинці посиланням? Як вставити посилання в картинку
Створюючи банери і карти сайту, початківці веб-майстри стикаються з такою проблемою, як вставити посилання в картинку, зробити з її допомогою меню яскравішим і цікавішим. Але як це здійснити? Немає нічого простішого, якщо знати мову HTML.
Давайте ж з`ясуємо, як можна втілити в реальність цю затію. У нашій статті ми запропонуємо вам два варіанти вирішення проблеми. Один досить рідко вживається з огляду на те, що займає багато часу і сил, другий же вважається загальновідомим. Ми з вами розберемо обидва способи.
Де використовується картинка-посилання
Перш ніж говорити про те, як зробити картинку в картинці посиланням, розберемося, де і для чого вони використовуються. Адже так буде простіше зрозуміти, чого ж ми хочемо від зображення.
Картинки-посилання зазвичай використовуються в якості банерів, зазивають рекламних малюнків. Прикладом цього можуть служити зображення все в тому ж "ВКонтакте". Згадайте, скільки разів вам доводилося натискати на фотографію, в яку був вбудований той чи інший адресу? Крім того, досить часто вони використовуються у вигляді меню груп і співтовариств, особливо якщо містять спеціальні записи. Чимало таких зображень зустрічається і на інших сайтах.
Вставляємо посилання в картинку
Найбільш проста річ - картинка-посилання. Саме про неї ми поговоримо спершу. Така ілюстрація є готовою посиланням. Тобто натиснувши на таке зображення, ви будете перенаправлені на нову сторінку.
Якщо ви знаєте, як саме задається звичайне посилання за допомогою HTML-розмітки, то проблем у вас виникнути не повинно. Єдина відмінність в тому, що замість тексту посилання задається зображення.
Отже, щоб здійснити задумане, вам знадобиться сама картинка, завантажена в інтернет або ж знаходиться на вашому комп`ютері (в залежності від того, чи будете ви працювати в онлайн-режимі, власне на сайті, або задієте редактори).
Відео: Як зробити картинку посиланням ВКонтакте
Шукаємо адресу зображення, записуємо його, щоб не забути. Також фіксуємо посилання, яку повинна відкривати дана фотографія.
Далі пишемо наступне: - спеціальний код. Картинка-посилання задається саме з його допомогою.
Таким чином, ми прописуємо посилання, яка відображається у вигляді ілюстрації. Досить легко і просто. Але це підійде тільки в тому випадку, якщо ви вважаєте, що на ній повинна бути всього лише одне посилання. А що, якщо їх повинно бути декілька? Тоді переходимо до інших варіантах.
Робимо меню з картинки
Перший з методів був розроблений самостійно в ході вивчення мови розмітки веб-сторінок. Створення такого меню може зайняти пару годин.
Даний метод підійде тим, хто любить возитися з різними редакторами, так як він досить трудомісткий і займає трохи більше часу, ніж створення меню або карти другим способом. Полягає він у тому, що береться картинка, яка розрізається на декілька смужок або квадратів. Кожне зображення підписується, і на його основі створюється посилання, як було описано вище. Далі в коді сторінки прописуються теги в потрібному порядку. Ось і все, питання про те, як зробити картинку в картинці посиланням, практично вирішене. Але не забуваємо про другий варіант.
Він полягає в тому, щоб зробити меню за участю всього однієї картинки, задавши для кожної зони ілюстрації свою посилання. Не лякайтеся, нічого архіскладно в цьому немає. А тепер про все по порядку.
Як зробити
Розберемо трохи докладніше перший спосіб.
Почнемо з того, що вам знадобиться знання графічних редакторів і HTML. Як картинку зробити посиланням, підкаже саме даний вид розмітки сторінок.
Отже, якщо ви вирішили піти саме таким шляхом, вам знадобиться зображення і простенький графічний редактор, який дозволяє різати картинки і наносити на них написи, а також місце, куди ви зможете залити їх.
Якщо це ваш власний сайт - підійде звичайна галерея або бібліотека файлів, для "ВКонтакте" це може бути альбом групи або спільноти (бажано закритий).
Далі слід розрізати зображення на частини, при цьому обов`язково запам`ятайте порядок, в якому йдуть отримані частини. Проставляємо на них написи і заливаємо на сервер, записуємо посилання на кожну ілюстрацію.
Відео: Як зробити картинку посиланням? постановка посилання на зображення
Беремо код, вказаний вище, і підставляємо туди потрібні дані. Потім заливаємо картинки на сайт саме в тому порядку, в якому вони повинні йти. При цьому, якщо ви розрізали її на смужки, то вам потрібно кожну посилання задавати з нового рядка, а ось якщо ви розділили фото на квадрати, то потрібно ставити в рядку стільки посилань, скільки вийшло квадратів.
Робимо карту сайту
Отже, якщо вас не влаштовує перший варіант, і ви хочете дізнатися, як зробити картинку в картинці посиланням іншим способом, то можемо запропонувати вам розробити карту посилань. Робиться вона легше, ось тільки можу виникнути проблеми із завданням параметрів. Чому, зрозумієте далі.
Відео: Як зробити картинку посиланням в своєму відео на будь-який сайт (активне посилання)
В першу чергу слід запам`ятати, що карта сайту підключається до зображення за допомогою команди usemap ="# Map1, яка прописується в тезі img. Тому, заливаючи картинку на сайт, обов`язково допишіть в тезі другу частину - usemap ="# Назва карти".
Подальша розмітка картинки на зони, до яких прикріплені посилання, робиться за допомогою парного тега , який можна розмістити в будь-якому зручному для вас місці між парними тегами
.Відео: Як зробити Картинку Посиланням
Відзначимо, що при використанні даного виду створення карти слід задавати не тільки посилання, але і області їх дії і координати. Далі ми розберемо основні параметри, якими володіє даний тег.
параметри посилання
Отже, у вас перед очима готова картинка-посилання. HTML дозволяє значно поліпшити функціональність даного зображення - виділити на ній певну область для посилання. Все це задається за допомогою спеціальних параметрів, про які зараз і піде мова.
Поговоримо трохи про основні параметри парного тега
Далі всередині парного тега
Найперший - shape. З його допомогою веб-майстер задає вид області. Це може бути:
- окружність - circle;
- прямокутник - rect;
- багатокутник - poly;
- інша область картинки - default.
Наступний - coords. З його допомогою задаються координати області в пікселях. Початок відліку в даній системі координат - верхній лівий кут. Ось тут-то і полягає основна проблема - не так-то легко задавати координати за допомогою пікселів, особливо якщо відсутній знайомство з комп`ютерною графікою.
Згадаємо також досить відомий href, який задає адресу посилання.
І останній параметр, який слід згадати, - nohref. Він показує, що зазначена область не є посиланням.
Звичайно, це далеко не повний перелік параметрів, які можна задавати зображенні-посиланні або карті. Але в той же час його вистачить для того, щоб створити яскраву і барвисту посилання або навіть цілу їх систему.
Поради
Який би спосіб для створення посилання-картинки ви не вибрали, головне, щоб вихідне зображення було хорошим. Намагайтеся вибирати ті малюнки, які не кидаються в очі, не дратують яскравими квітами або візерунками. Особливо це важливо для карти сайту. Ви можете зробити колаж з декількох фотографій, затемнити їх або ж включити один з фільтрів у будь-якому графічному редакторі.
При створенні карти сайту рекомендується вибирати зображення з м`якими, не дратівливими очі візерунками. Повірте, не завжди запорука успіху - яскрава картинка -Посилання. "ВКонтакте", Правда, часто роблять наголос саме на яскравість і помітність, з метою залучення нових відвідувачів.
висновки
Підведемо підсумки. Ми з вами розібралися, як зробити картинку в картинці посиланням, причому розглянули два способи, які можна однаково успішно використовувати для створення меню різного ступеня складності. Крім того, ми розібралися, як задати картинку-посилання, а також дізналися про основні параметри, які дозволяють створити досить зручну карту сайту, групи або спільноти.
