Как да вмъкнете линк в банер

Съдържание:

Как да вмъкнете линк в банер
Как да вмъкнете линк в банер

Видео: Как да вмъкнете линк в банер

Видео: Как да вмъкнете линк в банер
Видео: ВСЁ ПРО МОЛИТВЫ И БАННЕРЫ | Камни истока | Genshin Impact 2024, Декември
Anonim

Ако имате банер, но няма готов html-код, който да го вмъкне на страницата, добавянето на връзката, от която се нуждаете, не е толкова трудно. Дори ако банерът е направен по флаш технология. Възможните опции за организиране на връзки към банери в графичен и флаш формат в изходния код са описани по-долу.

Как да вмъкнете линк в банер
Как да вмъкнете линк в банер

Инструкции

Етап 1

Ако банерът е в един от графичните формати (gif, jpg, png, bmp), тогава ще бъде достатъчно да поставите маркера на изображението в маркера на връзката. Първо, оформете маркера на изображението. В езика за маркиране на уеб страниците (HTML - HyperText Markup Language - „език за маркиране на хипертекст“), най-простата му версия изглежда така: Тук „относителният адрес“на изображението е посочен в атрибута src. В тази версия браузърът ще приеме, че картината е в същата папка на вашия сървър, където е самата страница, където е вмъкнат банера. Но е по-добре да посочите "абсолютен адрес":

Стъпка 2

Има още няколко атрибута, които да добавите към този маркер. Два атрибута ще показват размерите на банера (височина и ширина). Това са незадължителни атрибути - изображението ще се показва без тях, ако всичко върви добре, когато страницата се зареди от сървъра в браузъра. Но ако картината по някаква причина не е заредена, тогава липсата на размери може да доведе до факта, че всички останали елементи на дизайна ще бъдат на мястото си. Тагът за размер ще изглежда така:

Стъпка 3

По подразбиране браузърът очертава синя рамка около изображенията на връзките. За да избегнете това, добавете граничен атрибут с нулева стойност към маркера на банера:

Стъпка 4

Добавете още един атрибут (заглавие), който ще съдържа текста за подсказката, когато задържите курсора на мишката над банера:

Стъпка 5

Подготвили сте маркера на изображението с най-важните атрибути, сега трябва да го поставите вътре в маркера на връзката. Всяка хипервръзка се формира от два маркера - отваряне и затваряне: Отварящият маркер съдържа атрибута href, който съдържа адреса за изпращане на заявката. Между тези два маркера за връзка и вмъкнете маркера за банер: HTML кодът на банера с връзката е готов, не забравяйте да замените: - в атрибута href: "https://kakprosto.ru" с адреса на вашата връзка за банера; - в атрибута src: "https://kakprosto.ru/banner.gif" до адреса на изображението за банера; - в атрибута width: "468" за ширината на вашия банер; - в атрибута височина: "60" за височината на вашия банер; - в атрибута на заглавието: "Това е банер!" изскачащ текст за вашия банер;

Стъпка 6

Всичко по-горе се отнася до банери с изображения, но има и банери, направени с помощта на флаш технология. За да вмъкнете връзка във флаш филм по стандартен начин, трябва да имате не само самия банер, но и неговия изходен код. Освен това можете да редактирате изходния код и след това да компилирате Flash филма само в специализиран редактор - обикновен текстов редактор не е подходящ за това. Има обаче начин да заобиколите всички тези трудности, като се ограничите до редактиране само на HTML и CSS (Cascading Style Sheets - „каскадни таблици със стилове“). CSS езикът се използва за по-подробно (в сравнение с HTML) описание на външния вид на елементите на страницата. С негова помощ на страниците могат да бъдат изградени доста сложни многослойни структури. Ще използваме това, като поставим Flash банера в долния слой и слоя с връзката над него. HTML кодът на банера ще изглежда така:

Не забравяйте да замените атрибутите ширина и височина в него (на две места), името на банера banner.swf (на две места) и адреса на връзката https://kakprosto.ru (на едно място) и SCC кода съответстващ на този HTML код трябва да бъде по следния начин:

div.linkedFlashContainer {позиция: относителна; z-индекс: 1; граница: 0px; ширина: 468px; височина: 60px}

a.flashLink {позиция: абсолютна; z-индекс: 2; ширина: 468px; височина: 60px; фон: url (spacer.gif) без повторение;}

Тук се използва прозрачно изображение (с всякакъв размер), наречено spacer.gif. И тук също не забравяйте да промените размера на ширината и височината (на две места).

Препоръчано: