Кіріспе

Суреттің бөліктеріне сілтемелер қосу әдісі

HTML және XHTML-де сурет картасы – белгілі бір суретпен байланысты координаттар тізімі болып табылады, ол сурет аймақтарын әртүрлі мекенжайларға гиперсілтемелеу үшін жасалады (қалыпты сурет сілтемесінен өзгеше, онда суреттің барлық аймағы бір мекенжайға сілтеме жасайды). Мысалы, әлем картасында әрбір ел сол ел туралы толық ақпаратқа гиперсілтемеленуі мүмкін. Сурет картасының мақсаты – суретті жеке сурет файлдарына бөліп, суреттің әртүрлі бөліктерін байланыстырудың ыңғайлы тәсілін ұсыну.

Сервер жағында

Серверлік кескін карталары алғаш рет Mosaic (веб-браузер) 1.1 нұсқасында қолдау көрсетті. Серверлік кескін карталары веб-браузерге пайдаланушының кескінде қай жерге басқандығы туралы координаттық ақпаратты серверге жіберуге мүмкіндік береді. Бұл серверге жауап ретінде қай мазмұнды қайтару туралы пикселдік деңгейде шешім қабылдауға мүмкіндік береді (мүмкін болатын әдістер – сервердегі кескін маскаларының қабаттарын, деректер базасына сұрау салу немесе конфигурациялық файлдарды пайдалану). Осы типтегі серверлік кескін картасы үшін HTML кодында <img src="image.png" ismap /> тегі сілтеме тегінің (<a href="/imagemapper"></a>) ішінде болуы керек және ismap атрибутын міндетті түрде қамтуы тиіс. Пайдаланушы кескінге басқанда, браузер X және Y координаттарын (кескіннің жоғарғы сол жақ бұрышына қатысты) сілтеме URL-іне сұрау жолы ретінде қосады және нәтижедегі URL-ге кіреді (мысалы, /imagemapper?3,9). Егер браузер ismap атрибутын қолдамаса, сұрау жолы сілтеме URL-іне қосылмауы керек, ал сервер тиісті жауап беруі керек (мысалы, тек мәтіндік навигациялық бетті қайтару арқылы).

Клиенттік тарап

Клиенттік жағындағы кескін карталары HTML 3.2 нұсқасында пайда болды және серверде ешқандай арнайы логиканы орындауды қажет етпейді (олар толығымен клиенттік жағында жұмыс істейді). Оларға JavaScript те қажет емес.

CSS-тің

Жақында сурет үстіне CSS абсолютті орналасуын қолданып сілтемелер қою әдісі пайда болды; алайда, бұл тек тіктөртбұрышты басуға болатын аймақтарды ғана қолдайды. Бұл CSS техникасы таза HTML кескін карталарын дұрыс өзгерте алмайтын iPhone-дарда олардың дұрыс жұмыс істеуіне көмектесуі мүмкін.

Құрылыс және пайдалану

Клиенттік жағындағы сурет карталарын мәтін редакторы арқылы қолмен жасауға болады, бірақ мұндай жағдайда веб-дизайнерлер HTML тілін білуі керек, сондай-ақ сурет үстіне орналастырылатын аймақтардың координаталарын анықтау білуі қажет. Сондықтан қолмен кодталған сурет карталарының көпшілігі қарапайым көпбұрыштар болып келеді. Мәтін редакторында сурет картасын жасау көп уақыт пен еңбек талап ететіндіктен, көптеген бағдарламалар веб-дизайнерлерге сурет карталарын векторлық графика редакторында пішіндер жасағандай жылдам және оңай жасауға мүмкіндік береді. Мұндай бағдарламалардың мысалдары – Adobe Dreamweaver немесе KImageMapEditor (KDE үшін) және GIMP-тегі сурет картасы плагині. Тегін және ашық LibreOffice кеңсе пакетіне арналған ImageMap редакторы да кіреді. Кликтеуге болатын аймақтарын нақты көрсетпейтін сурет карталары пайдаланушыны түсініксіз навигацияға ұшырату қаупін тудырады. Тіпті көрсетсе де, олардың қайда жететіні түсініксіз болуы мүмкін. Бұл мәселені ішінара түрлендіру эффектісімен шешуге болады.

SVG кескіндері

Масштабталатын векторлық графика (SVG) кескін форматы суреттерге гиперсілтемелер және басқа да күрделі интерактивті мүмкіндіктерді қосуға арналған өздік механизмдермен жабдықталғандықтан, SVG форматындағы векторлық суреттермен жұмыс істегенде дәстүрлі сурет картасы техникаларын қолданудың қажеті шамалы.