* Imagemap
Публикувано на 01 септември 2009 в раздел ХHTML.
Идеята за imagemap идва от прехода между дизайн към конкретна реализация на уеб сайт. В миналото, когато не са били налични средства за динамични обекти като Flash или Java, е било проблем създаването на "красиви" сайтове. Често дизайнерите са давали проекти на програмистите, които не е било възможно да бъдат осъществени. Това е честа ситуация, при която художник рисува скица на важен елемент на сайта, който трябва да стане динамичен. Оказва се, че не винаги техниката на "рязане" на картинката на части и поставянето на отделните парчета в таблица е достатъчно. Например може да се наложи да направим бутони със сложни форми - нещо неосъществимо от досегашните статии, понеже картинките винаги се вмъкват като правоъгълници.
Най-общо казано imagemap е една картинка, върху която има множество от области, които сме направили връзки. С други думи ако посочите с мишката върху точно определен обект от картинката, то ще забележите, че този обект всъщност се явява образно казано бутон за натискане.
Нека разгледаме следната картинка:
Да речем, че желаем да направим така, че посочвайки вътре в очертанията на София да направим връзка към страница в wikipedia. Отначало трябва да се научим да определяме координати вътре в картинката. Ще го демонстрираме как това става елементарно с MSPaint. Посочете в долният ляв ъгъл на контура на София с мишката и погледнете в долния десен ъгъл:
Всичко което трябва да направите е да запишете последователно двойките числа по контура. Между всеки две точки свързването ще бъде по права линия. Ето как би изглеждала една стравнително подробна разбивка по контура на София:
118,162, 113,162, 107,152, 105,160, 86,145, 86,137, 76,128, 96,119, 119,121, 120,130, 112,137
Контурът е винаги затворен. Това се получава като от последната точка винаги се свързва с първата. Ето как ще създадем въпросната картинка с контур около София (няма проблем да използвате както img, така и object таг за вмъкване на картинка):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>ImageMap example</title>
</head>
<body>
<div>
<map id="areas" name="areas">
<area title="Sofia"
shape="poly"
coords="118,162,113,162,107,152,105,160,86,145,86,137,76,128,96,119,119,121,120,130,112,137"
href="http://en.wikipedia.org/wiki/Sofia" alt="Sofia" />
<area
title="Default"
shape="default"
alt="Default" />
</map>
<object usemap="#areas"
data="https://www.cphpvb.net/wp-content/uploads/2009/09/bulgaria.PNG"
alt="Bulgaria"
type="image/png"
/> </div> </body> </html>
Резултат:
Забележка: В стандарта XHTML 1.1 атрибут "name" на таг <map> НЕ съществува. Ние обаче сме принудени да го сложим, защото Mozilla Firefox не работи без него. Аналогичен проблем е и със стойността на атрибут "usemap" в <object> - правилният запис би трябвало да без #, но за съжаление нито един браузър все още не се е съобразил с изискването. Освен това обръщаме специално внимание, че всички координати като стойност на "coord" трябва да са зададени на един ред - в противен случай Internet Explorer "няма да се справи със задачата". Надяваме се тези проблеми да бъдат изчистени в бъдеще.
Възможно е да използваме и готови обекти. Вместо poly можем да използваме rect (приема за координати две точки - горен ляв и долен десен ъгъл на правоъгълник) или circ (приема три числа - координати на центъра и радиус на окръжност в пискели). Няма да се спираме подробно на тях.
Естествено няма никакъв проблем да имаме повече от една област. Просто вътре в таг "map" трябва да добавите нов таг "area". По-специален от всички е таг "area" с shape "default". Буквално преведено означава "област по подразбиране", но дефакто е цялата картинка като правоъгълник.
За финал ще споменем, че въпреки, че imagemap е стар и все по-рядко използван похват, той все пак е изключително удобен поради липсата от нужда от каквито и да е допълнителни разширения за браузъра. Освен това кодът е изключително кратък и затова желаната функционалност се зарежда изключително бързо без да се хаби трафик или процесорно време. Затова когато функционалността е достатъчна бихме ви насърчили да използвате именно imagemap пред другите по-тежки алтернативи.
От много време не съм ги ползвал, но мисля че в Dreamwaver или Front Page имаше възможност да си рисуваш imagemap-а и то създава автоматично сорса.
Новите технологии в уеб разработката позволяват чрез css да се създаде слой, който не е с прави ъгли. За съжаление не съм го пробвал и не бих се задълбочавал в тази тема :)
Да, слоевете при CSS са много удобни и гъвкави. Надявам се да стигна дотам :)
Предполагам нямаш предвид "прави ъгли" а просто "ъгли", защото в imagemap ъглите не са задължително прави. Не се заяждам - просто малка корекция.
Айде сега му направи и hover...
M-)
Да, най-лесно се прави в Dreamwaver. В Property Bar-a има два инструмента (за правоъгълни форми и полигони), които вършат перфектна работа - след създаване на полето за селекцията може да се редактира с лекота. Ето и един пример за вече съществуваща карта на България направена на този принцип с Dreamwaver (страничката ще се използва от учениците в 4 клас в часовете по Информационни технологии):
http://iti.izkustva.net/bg-oblasti/
Така е - визуалните редактори са изключително улеснение. Въпреки това учениците трябва да знаят "какво се случва зад сцената".