Как да направите снимка в картина с връзка? Как да вмъкнете връзка в картина

Създаване на банери и карти на сайта, начинаещите уебмастъри са изправени пред такъв проблем като вмъкване на връзка в картина, което я прави меню по-ярко и по-интересно. Но как да направите това? Няма нищо по-лесно, ако знаете езика на HTML.

Нека да разберем как да реализираме това начинание в реалност. В тази статия ще ви предложим две възможности за решаване на проблема. Човек рядко се използва поради факта, че отнема много време и усилия, втората се счита за добре известна. Ще обсъдим и двата начина.

Къде се използва връзката с картинката

Преди да поговорим за това как да направим картина в картинката връзка, ще разберем къде и за какво се използват. Това ще улесни разбирането на това, което искаме от образа.

Връзките с изображения обикновено се използват като банери, които извикват промоционални рисунки. Един пример за това може да служи като изображение в едно и също "VKontakte". Не забравяйте, колко пъти сте кликвали някога върху снимка, в която е бил вграден конкретен адрес? Освен това често се използват като групи менюта и общности, особено ако съдържат специални записи. Много от тези изображения се намират на други сайтове.

Поставете връзка в картината

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

Ако знаете как е зададена нормална връзка чрез HTML маркиране, тогава не би трябвало да имате проблеми. Единствената разлика е, че вместо текста на връзката е зададено изображение.

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

Търсим адреса на изображението, запишете го, за да не го забравяме. Също така поправете връзката, която тази снимка трябва да се отвори.

След това пишем следното: снимка - специален код. Въведена е връзка с картина.

По този начин предписваме връзка, която се показва като илюстрация. Доста лесна и проста. Но това ще работи само ако смятате, че трябва да има само една връзка по него. Ами ако има повече от един? След това преминаваме към другите опции.

Направете меню от картинката

Първият метод е разработен самостоятелно в процеса на изучаване на маркиращия език на уеб страниците. Създаването на такова меню може да отнеме няколко часа.

Този метод е подходящ за тези, които обичат да се забъркват с различни редактори, тъй като е доста трудоемка и отнема малко повече време от създаването на меню или карта по втория начин. Състои се от факта, че е направена снимка, която е нарязана на няколко ивици или квадратчета. Всяко изображение е подписано и на него се създава връзка, както е описано по-горе. По-нататък в кода на страницата етикетите са написани в необходимия ред. Това е всичко, въпросът за това как да се направи снимка в картината с връзка е почти решен. Но не забравяйте за втория вариант.

Това е да се направи меню с само една снимка, като се посочи справка за всяка област от илюстрацията. Не се страхувайте, няма нищо крайно в това. И сега за всичко в ред.

Как да направите

Нека разгледаме по-отблизо първия метод.

За начало ще ви трябват познания за графичните редактори и HTML. Като снимка, за да направите връзка, този тип оформление на страницата ви подсказва.

Така че, ако решите да отидете по този начин, ще ви е необходим изображение и прост графичен редактор, който ви позволява да изрежете картинки и да поставите надписи върху тях, както и място, където да ги запълвате.

Ако това е ваш собствен сайт - обикновена галерия или библиотека от файлове е подходяща, за "VKontakte" може да бъде албум на групата или общността (за предпочитане затворен).

След това трябва да отрежете изображението на части, като помните реда, по който идват частите. Слагаме върху тях надписите и ги запълваме със сървъра, записваме връзките към всяка илюстрация.

Вземем кода по-горе и заменим необходимите данни там. След това попълнете снимките на сайта в реда, в който трябва да отидат. В същото време, ако го нарязани на ивици, а след това трябва да попитате всеки линк в нов ред, но ако сте споделили снимки на квадратчета, тогава ще трябва да се сложи в ред колкото се може повече връзки, както се оказа квадрати.

Изработване на карта на сайта

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

На първо място, ние трябва да помним, че за нея е свързан с образа като използвате команда usemap = "# map1, което е предписано в IMG таг Затова, попълване на снимката на сайта, не забравяйте да добавите маркера във втората част -. Usemap =" # Името на картата ".

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

Имайте предвид, че когато използвате този тип създаване на карти, трябва да посочите не само връзки, но и техните области и координати на действие. След това ще анализираме основните параметри, които този маркер има.

Опции за връзки

Така че, пред очите ви има готов образна връзка. HTML ви позволява значително да подобрите функционалността на това изображение - за да подчертаете в него специфична област за справка. Всичко това се определя чрез специални параметри, които ще бъдат обсъдени сега.

Нека да поговорим малко за основните параметри на двойния маркер

След това вътре в двойния маркер

Първата е форма. С него уебмастерът определя изгледа на района. Тя може да бъде:

• кръг - кръг;
• правоъгълник - ректус;
• полигон - поли;
• останалата част от снимката е по подразбиране.

Следващият е коордовете. Използва се за задаване на координатите на областта в пиксели. Произходът в тази координатна система е в горния ляв ъгъл. Тук е основният проблем - не е толкова лесно да се определят координатите чрез пиксели, особено ако не познавате компютърната графика.

Споменаваме и доста добре познатия href, който определя адреса на връзката.

И последният параметър, който трябва да се споменава, е nohref. Показва, че посоченият обхват не е връзка.

Разбира се, това не е пълен списък с параметри, които могат да бъдат настроени на картинна връзка или карта. Но в същото време е достатъчно да се създаде ярка и цветна връзка или дори цяла система от тях.

Съвети

Независимо от начина, по който създайте референтна снимка не сте избрали, основното е, че оригиналното изображение е добро. Опитайте се да изберете тези рисунки, които не хващат окото ви, не дразни с ярки цветове или модели. Това е особено важно за картата на сайта. Можете да направете колаж от няколко снимки, за да ги потъмнее или да включи един от филтрите в графичния редактор.

Когато създавате карта на сайта, препоръчваме да изберете изображения с меки, не дразнещи шарки. Повярвайте ми, не винаги ключът към успеха е ярка картина - връзка. "VKontakte", обаче, често се фокусира върху яркостта и блясъка, за да привлече нови посетители.

данни

Нека да обобщим. Разбрахме как да направим снимка в снимка с връзка и разгледахме два начина, по които можете да използвате еднакво успешно да създавате менюта с различна степен на сложност. Освен това разбрахме как да настроим картина на връзка и научихме за основните параметри, които ви позволяват да създадете сравнително удобна карта на сайт, група или общност.