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

Створюючи банери і карти сайту, початківці веб-майстри стикаються з такою проблемою, як вставити посилання в картинку, зробити з її допомогою меню яскравішим і цікавішим. Але як це здійснити? Немає нічого простіше, якщо знати мову HTML.

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

Де використовується картинка-посилання

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

Малюнки-посилання зазвичай використовуються в якості банерів, зазивають рекламних малюнків. Прикладом цього можуть служити зображення все в тому ж "ВКонтакте". Згадайте, скільки разів вам доводилося натискати на фотографію, в яку був вбудований той чи інший адресу? Крім того, досить часто вони використовуються у вигляді меню груп і співтовариств, особливо якщо містять спеціальні записи. Чимало таких зображень зустрічається і на інших сайтах.

Вставляємо посилання в картинку

Найбільш проста річ - картинка-посилання. Саме про неї ми поговоримо для початку. Така ілюстрація є готовою посиланням. Тобто натиснувши на таке зображення, ви будете перенаправлені на нову сторінку.

Якщо ви знаєте, як саме задається звичайне посилання за допомогою HTML-розмітки, то проблем у вас виникнути не повинно. Єдина відмінність в тому, що замість тексту посилання задається зображення.

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

Шукаємо адресу зображення, записуємо його, щоб не забути. Також фіксуємо посилання, яке має відкривати дана фотографія.

Далі пишемо наступне: картинка - спеціальний код. Картинка-посилання задається саме з його допомогою.

Таким чином, ми прописуємо посилання, яка відображається у вигляді ілюстрації. Досить легко і просто. Але це підійде тільки в тому випадку, якщо ви вважаєте, що на ній повинна бути всього лише одне посилання. А що, якщо їх повинно бути декілька? Тоді переходимо до решті варіантів.

Робимо меню з картинки

Перший з методів був розроблений самостійно в ході вивчення мови розмітки веб-сторінок. Створення такого меню може зайняти пару годин.

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

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

Як зробити

Розберемо трохи докладніше перший спосіб.

Почнемо з того, що вам знадобиться знання графічних редакторів і HTML. Як картинку зробити посиланням, підкаже саме даний вид розмітки сторінок.

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

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

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

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

Робимо карту сайту

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

В першу чергу слід запам`ятати, що карта сайту підключається до зображення за допомогою команди usemap = "# map1, яка прописується в тегу img. Тому, заливаючи картинку на сайт, обов`язково допишіть в тегу другу частину - usemap =" # назву карти ".

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

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

Параметри посилання

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

Поговоримо трохи про основні параметри парного тега

Далі всередині парного тега

Найперший - shape. З його допомогою веб-майстер задає вид області. Це може бути:

• окружність - circle;
• прямокутник - rect;
• багатокутник - poly;
• решта область картинки - default.

Наступний - coords. З його допомогою задаються координати області в пікселях. Початок відліку в даній системі координат - верхній лівий кут. Ось тут-то і полягає основна проблема - не так-то легко задавати координати допомогою пікселів, особливо якщо відсутня знайомство з комп`ютерною графікою.

Згадаємо також досить відомий href, який задає адресу посилання.

І останній параметр, який слід згадати, - nohref. Він показує, що зазначена область не є посиланням.

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

Поради

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

При створенні карти сайту рекомендується вибирати зображення з м`якими, що не дратівливими очі візерунками. Повірте, не завжди запорука успіху - яскрава картинка -Посилання. "ВКонтакте", правда, часто роблять наголос саме на яскравість і помітність, з метою залучення нових відвідувачів.

Висновки

Підіб`ємо підсумки. Ми з вами розібралися, як зробити картинку в картинці посиланням, причому розглянули два способи, які можна однаково успішно використовувати для створення меню різного ступеня складності. Крім того, ми розібралися, як задати картинку-посилання, а також дізналися про основні параметри, які дозволяють створити досить зручну карту сайту, групи чи спільноти.