Мапирање слике

У HTML-у и XHTML-у, мапа слике је листа координата везаних за одређену слику, створена са намером да направи везе од различитих области слике ка различитим одредницама (супротно регуларним везама оствареним преко слике, где је цела област слике веза ка једној одредници). На пример, карта света може имати везе ка додатним информацијама о свакој земљи која се налази на карти. Намена мапирања слике је да обезбеди лак начин повезивања делова слике са различитим одредницама, без потребе за дељењем слике у различите датотеке.

Мапирање слике на серверској страни

Мапирање слике на серверској страни је први подржавао Моsaic веб браузер, верзије 1.1. Мапирање слика на серверској страни омогућује веб браузеру да шаље информације веб серверу о позицији на којој је корисник кликнуо на слику. Ово дозвољава серверу да донесе прецизну одлуку о томе који садржај ће вратити у одговору (могући методи су коришћење слојева маске одређене слике, упите из базе података или конфигурационе датотеке које се налазе на серверу).

HTML код за ову врсту мапирања слике захтева да <img> таг буде унутар <a>...</a> тага, као и да <img> таг мора имати ismap атрибут.

<a href="/imagemapper"><img src="image.gif" ismap/></a>

Када корисник кликне на слику, браузер ће додати X и Y координату (рачунају се у односу на горњи леви угао слике) у веб адресу(URL) као "упитну ниску" и приступити резултујућем URL-у. (на пример, /imagemapper?3,9)).

Ако браузер не подржава ismap, тада "упитна ниска" неће бити додата у URL и сервер би требало да поступи одговарајуће (на пример, враћањем текстуалне навигационе стране).

Мапирање слике на клијентској страни

Мапирање слике на клијентској страни представљено је у HTML-у 3.2 и не захтева да се мапирање слика извршава на серверу (у потпуности се извршава на клијентској страни). Такође, не захтева се ни JavaScript код.

Pure HTML

Мапирање слика на клијентској страни у HTML-у се састоји из два дела:

1. Одређена слика мора бити окружена <img> тагом који мора имати usemap атрибут. Атрибутом usemap се задаје име мапе коју користи конкретна слика (различите мапе слика могу постојати на једној страници).
2. Елементи <area> се налазе унутар <map> елемента. Сваки од <area> елемената дефинише јединствену област на мапи слике на коју се може кликнути (аналогије ради, као што се са <a> tag елементом дефинише који URL треба бити отворен за регуларне веб везе). Атрибут title може бити наведен, и служи да прикаже tooltip када корисник пређе курсором преко назначене области. Навођење alt атрибута је често веома битно, а у неким случајецима и законска обавеза, јер се њиме обезбеђује да читачи екрана (енг. screen reader) могу правилно интерпретирати одређену везу, што може бити од користи, на пример, слепим људима.

Елементи <area> могу бити правоугаоног (shape="rect"), полигоналног (shape="poly") или кружног (shape="circle") облика. Вредности облика су парови координата. Сваки пар има X и Y вредност (рачуна се од левог горњег угла слике), а вредности су раздвојене зарезом.

• За правоугаоник се користе четири координате: x1, y1, x2, y2
• За полигон се користи онолико координата колико је неопходно за његов опис: x1, y1, x2, y2, [...] xn, yn
• За круг се користи један пар координата за опис центра, и вредност полупречника: x1, y1, r (радијус)

Следећи пример дефинише правоугаону област (9,372,66,397). Када корисник кликне било где унутар области, биће преусмерен на Википедијину почетну страницу.

<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" >
</map>

CSS

Модернији приступ је преклапање веза, које се налазе на слици, коришћењем CSS својства за апсолутно позиционирање. Међутим, овакав приступ подржава само правоугаоне области, али може бити погодан за израду мапа за iPhone уређаје, где се јавља проблем приликом скалирања мапа израђених у Pure HTML-у.

Употреба техника мапирања слика

Пример мапирања слике Клуб (трпезарија клуба). Кликом на особу са слике учитава се одговарајућа страница са чланком о тој особи.

Могуће је ручно мапирање слике на клијентској страни коришћењем текстуалног едитора, али то захтева да веб дизајнери знају како треба кодирати HTML, као и како енумерисати координате области које желе да поставе на слику. Као резултат, већина мапа слика које су имплементиране ручно представљају једноставне полигоне.

Због тога што прављење мапа слика у текстуалном едитору захтева много времена и труда, многе апликације су дизајниране да дозволе веб дизајнерима да направе мапе слика брзо и једноставно. Неке од тих апликација су Adobe Dreamweaver или KImageMapEditor (за KDE), и "imagemap" додатак за GIMP.

Туторијали и веб линкови

• CSS Image Map Techniques and Tutorials Tutorial Design Reviver
• Imagemap Generator, Generator for HTML Imagemaps