Як додати посилання до зображення

Як додати посилання до зображення

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

 


Інструкція

1. Якщо усі файли на сервері зберігаються в одній теці, то пропишіть наступний HTML- код сторінки:

‹a href=сторінка.html- Натиснення на це посилання приведе вас на іншу сторінку в межах сайту‹/a -


2. Ознайомтеся з тим, як вставляти в HTML- код посилання на локальні сторінки, розташовані на сторонніх сайтах:

‹a href=http://сервер.домен/папка/страница.html-Нажатие на це посилання приведе вас сторінку, розташовану на абсолютно іншому сайті‹/a, -

3. Тепер ознайомтеся із способом вставки в сторінку зображень, що зберігаються на тому ж сервері, що і сайт, за умови, що усі файли на цьому сервері зберігаються в загальній теці:

‹img src=имяфайла.jpg -

4. Аналогічним чином вставляйте в сторінку і зображення, що зберігаються на сторонніх серверах:


‹img src=http://сервер.домен/папка/имяфайла.jpg-

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

5. Щоб при натисненні на картинку відбувався перехід по посиланню, скомбінуйте ці теги таким чином:

‹a href=http://сервер.домен/папка/страница.html-‹img src=картинка.jpg -‹/a -

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


6. Нарешті, якщо ви бажаєте, щоб перехід по посиланню відбувався при натисненні як на картинку, так і на розташований під нею текст, використайте складнішу конструкцію наступного виду:

‹a href=http://сервер.домен/папка/страница.html-‹img src=картинка.jpg -‹p- Ви перейдете на іншу сторінку незалежно від того, чи натиснете ви на цей текст, або на розташовану над ним картинку. Результат виявиться абсолютно однаковим.‹/a -

 


Надрукувати