HTML - Направете си бързо и лесно Image-map

Можете да разделите дадено изображение на отделни части (наречени области) като всяка част съдържа отделна хипервръзка. Такова изображение се нарича изображение-карта. За да ви покажа как става, направих една картинка (imagemap.jpg) и я разделих на 4 отделни части които водят на различни страници.

В същото време всички останали части от картинката за които не съм определил области с хипервръзки остават неактивни, т.е. колкото и да кликате върху тях нищо няма да се получи (опитайте някъде върху зеленото поле).
Областите, които можете да направите са три вида - правоъгълник (Rect), окръжност (Circ) и многоъгълник (Poly). За целта трябва да знаете координатите на всяка област от картинката. Научаването им никак не е трудно. Ако сте Windows 95/98 потребители в менюто Start/Programs/Accessories имате една програмка наречена Paint. Значи, нека да започнем с намирането на координатите. Отворете картинката с Paint. Изберете интрумента "молив" от лявото меню. Сега посочете с "молива" върху някоя точка от изображението. В долния десен ъгъл на Paint ви се изписват координатите на точката. Ето ви един пример : Искам да разбера координатите на горния ляв ъгъл на триъгълника в който пише "за мен". Посочвам с "молива" върху тази точка и в долния десен ъгъл ми се изписва 23,79. Готово. Вече имам координатите на горния ляв ъгъл на триъгълника (Вижте картинката по-долу!). По същия начин намирам координатите на десния ъгъл (96,101) и на левия долен ъгъл(23,123) на триъгълника.
Нека ви обясня какво представляват тези координати.
Както предполагам знаете, изображението се състои от опреленен брой точки(пиксели). Примерната картинка imagemap.jpg която използвам се състои от 290 точки по хоризонтала и 293 точки по вертикала (можете да проверите това като кликнете с десния бутон на мишката върху картинката и от менюто да изберете Properties). Значи координат на точка 23,79 означава, че това е 24-тата точка от картинката от ляво на дясно и 80-тата точка от горе надолу. Разликата идва оттам, че броенето започва от нула. По тази логика горния ляв ъгъл на картинката е с координати 0,0 а долния десен ъгъл с координати 289,292. Не се затормозявайте с изчисления, важното е че знаете координатите

След като имаме координатите на върховете на триъгълника нека да направим тази област. Това е област от тип Poly (многоъгълник или полигон). Сега ще напиша HTML кода който определя областта а после ще ви обясня как става всичко.



<HTML>
<BODY>
<IMG SRC="imagemap.jpg" USEMAP="#Map1" BORDER="0">
<MAP Name="Map1">
<AREA SHAPE="POLY" COORDS="23,79,96,101,23,123" HREF="forme.html">
</MAP>
</BODY>
</HTML>

Дотук добре. Слагаме картинката на страницата с реда IMG SRC="imagemap.jpg". Това знаете вече как става. Новото тук е че задаваме че ще използваме карта на това изображение с атрибута USEMAP на елемента IMG. USEMAP указва името на картата която ще използваме. Пред името задължително слагаме знака "#". В случая сме избрали име на картата Map1.
Самата карта се създава с двойката елементи <MAP></MAP>. Като атрибут на отварящия елемент <MAP> трябва да зададете името на картата, не без знака "#" (<MAP Name="Map1">).
Областите от картата се създават с елемента <AREA>. Вида на областта се задава с атрибута SHAPE. Валидните стойности на SHAPE са три вида - "POLY" за многоъгълник, "RECT" за правоъгълник и "CIRC" за окръжност. Друг атрибут на елемента <AREA> е COORDS. С него се задават координатите на областта. При различните типове области оординатите се задават по различен начин. Нека да се върнем на горния пример. При него имаме област тип "POLY". При този тип област се задават координатите на всичките ъгли на многоъгълника (в случая триъгълник, но фигурата може да е с произволна сложност), а те са както открихме 23,79 за горния ляв ъгъл, 96,101 за десния ъгъл и 23,123 за долния лява ъгъл. Ето как се задават координатите :

COORDS="23,79,96,101,23,123"

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

COORDS="23,123,23,79,96,101"

или

COORDS="96,101,23,79,23,123"

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

При областите от тип "RECT" (правоъгълник) координатите се задават по друг начин. Вместо да задавате координатите на четирите ъгъла, достатъчно е само на горния ляв и долния десен ъгъл. Нека да включиме областите "меню" и "мои снимки" :

<HTML>
<BODY>
<IMG SRC="imagemap.jpg" USEMAP="#Map1" BORDER="0">
<MAP Name="Map1">
<AREA SHAPE="POLY" COORDS="23,79,96,101,23,123" HREF="forme.html">
<AREA SHAPE="RECT" COORDS="77,124,208,154" HREF="menu.html">
<AREA SHAPE="RECT" COORDS="149,191,201,269" HREF="photos.html">
</MAP>
</BODY>
</HTML>

Горния ляв ъгъл на областта меню е с координати 77,124 а долния десен- 208,154 затова COORDS="77,124,208,154" . По същия начин се определя и областта "мои снимки".

С атрибутите SHAPE и COORDS се определят вида и координатите на областта, но не и хипервръзката към която води като кликнете върху нея. Самата хипервръзка се определя с атрибута HREF на елемента <AREA>. След HREF в кавички задавате името на HTML документа към който ще отидете като кликнете върху областта.

Третия вид област - "CIRC" (окръжност) се определя също по различен начин. Там първата координата е центъра на кръга, след което се изписва само една цифра и тя е радиуса на кръга. В нашия пример областта "e-mail" е от тип "CIRC" с център с координати 243,82 и радиус 34 точки. Така вече можем да направим и тази област :

<AREA SHAPE="CIRC" COORDS="243,82,34" HREF="mail.html">

Сега вече знаете как се определят координатите за всеки тип област и можем да си завършим HTML документа.

<HTML>
<BODY>
<IMG SRC="imagemap.jpg" USEMAP="#Map1" BORDER="0">
<MAP Name="Map1">
<AREA SHAPE="POLY" COORDS="23,79,96,101,23,123" HREF="forme.html">
<AREA SHAPE="RECT" COORDS="77,124,208,154" HREF="menu.html">
<AREA SHAPE="RECT" COORDS="149,191,201,269" HREF="photos.html">
<AREA SHAPE="CIRC" COORDS="243,82,34" HREF="mail.html">
</MAP>
</BODY>
</HTML>

Какво би станало обаче ако се опитаме да объркаме браузъра като му дадем области които се пресичат ? Сега ще направим един експеримент.

Ето две правоъгълни области, които се пресичат. Червената област води до forme.html а синята до photos.html. Докъде ли води обаче пресечената област между синята и червената? Нека видим HTML кода на картата и ще ви покажа.

<IMG SRC="i2.jpg" USEMAP="#map2" border="0">
<MAP NAME="map2">
<AREA SHAPE="RECT" COORDS="0,0,110,106" HREF="forme.html">
<AREA SHAPE="RECT" COORDS="63,43,169,152" HREF="photos.html">
</MAP>

Първия ред <AREA SHAPE="RECT" COORDS="0,0,110,106" HREF="forme.html"> определя картата на червения правоъгълник а втория ред <AREA SHAPE="RECT" COORDS="63,43,169,152" HREF="photos.html"> на синия правоъгълник. Ако кликнете някъде в пресечената област ще отидете на страницата, чиито хиперлинк е зададен в червената област! Това е така, защото в HTML кода сте поставили картата на червената област да стои преди картата на синята област. Ако размените двата реда така :

вместо

<AREA SHAPE="RECT" COORDS="0,0,110,106" HREF="forme.html">
<AREA SHAPE="RECT" COORDS="63,43,169,152" HREF="photos.html">

напишете

<AREA SHAPE="RECT" COORDS="63,43,169,152" HREF="photos.html">
<AREA SHAPE="RECT" COORDS="0,0,110,106" HREF="forme.html">

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


източник:www4u.search.bg

/ Трябва да сте регистриран за да напишете коментар /
От: haus
0:04 06-07-2010
а искам да попитам нали вече съм задал кординати всичко съм направил искам да направя така като съм задал кординатите и като цъкна на определено място кадето съм задал кординатите искам да се покаже текст и като цъкна на този текст да ме праща във друг линк може ли дами кажеш как да го направя
1