Има разлика между вмъкването на изображение в уеб страница и превръщането на това изображение в кликваща връзка. въпреки че HTML е подобен, връзката разчита на котва елемент, докато изображението използва img елемент. Образът обаче може да се загнезди в котва, което прави това изображение да може да се кликва като връзка.
Вмъкване на изображения в анкерни елементи
Често използвана базирана на изображения връзка е графиката на логото на сайта, която след това се връзва обратно към началната страница на сайта.
Ето как бихте поставили изображение, което не може да се кликне в HTML документа:
За да трансформирате изображението в връзка, добавете анкерната връзка, отваряйки котвата преди изображението и затваряйки котвата след изображението. Тази техника е подобна на начина, по който свързвате текст, с изключение на това, че вместо да увивате думите, обвивате изображението:
Когато добавяте този тип HTML към вашата страница, не поставяйте интервали между котвата и маркера на изображението. Ако го направите, някои браузъри ще добавят малки отметки до изображението, което ще изглежда странно.
Логото вече действа и като бутон за начална страница, което е почти уеб стандарт в наши дни.
Забележете, че ние не включваме никакви визуални стилове, като например ширината и височината на изображението, в нашата HTML маркировка. Ще оставим тези визуални стилове на CSS и ще поддържаме чисто разделяне на HTML структурата и CSS стиловете.