Selected from Linux Selected from PHP
- Ubuntu 17.10 Install google's mod pagespeed for apache - PHP-Ubuntu-Youtube-dl simple script for converting and downloading youtube video or mp3
- Ubuntu SSH tunnel via proxy - PHP while loop with every row with a different color
- Install GoAccess Apache Log Analyzer Tool on Ubuntu 17.10 - PHP use while loop in function
- SSHFS and map folder with a proxy - PHP List Files And Folders As links
- How to connect to SSH server with a proxy - PHP Extract Text From String
➥ Визуално навигиране с помощта на карти на изображения
Added by sonik on 02-05-2017 and keywords: image, map, html, area, карти, на, изображения, хтмл [ Print Article ]
Визуално навигиране с помощта на карти на изображения

Карта на изображение (image map) се нарича изображение,което е разделено на логически региони,а всеки от тях служи като хиперлинк към уеб ресурс.

Основи на картите на изображения
Може да си представите картите на изображения като картинки,където всеки регион на картинката има номер,като номера е асоцииран с url адрес.

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

Създаване на картата
Главния таг за създаване на картата е <map>.Атрибутът name на тага се използва за идентифициране на областите и хиперлинковете на картата.Тага <map> си има и затварящ таг </map> което не трябва да го забравяте!
Картовата информация вътре в тага map се кодира чрез използване на тага <area>,които има няколко атрибута за описване на регионите в картата на изображение.Ето някой от основните атрибути на тага area:

Href – url на ресурса
Nohref – задава,че областта няма свързан ресурс
Shape – геометрична форма на областта
Cords – координатите,които описват размера и позицията на формата на областта
Alt – текстово описание на областта

Да поразясним малко за атрибута nohref – използва се за посочване,че областта не е свързана към никакъв ресурс,т.е кликването по областта не води до нищо.Той е полезен когато не искате област от карта на изображение да служи като хиперлинк.Кодира се под html като използвате следния формат:
Nohref=”nohref”

За да опишете формата на областта се използва атрибута shape,които има една от следните стойности:
Rect – правоъгълник, описан от координатите за горния ляв и долния десен ъгли
Circ – кръг,описан чрез координатите на центъра и радиуса
Poly – многоъгълник,описан чрез поредица от координати за свързване на точки

Ето как се описват координатите според всяка от форимите:
Shape=”rect” coords=”x1, y1, x2, y2”
Shape=”circ” coords=”x, y, radius”
Shape=”poly” coords=”x1, y1, x2, y2, x3, y3 …”

Kато всички числа в атрибута coords се задават в пиксели
И да не забравяме,че един много полезен атрибут е alt който дава описание на областта и така лесно разбирате коя област каква е.

Асоцииране на карта с изображение
Досега узнахте как да описвате области и url адреси, асоциирани с карта на изображение,но все още не сте узнали как да сглобите тази информация с изображението.Ето и стъпките по които трябва да се водите:

1-В тага map създайте области на карта с асоцииран хиперлинк към url адреси
2-Асоциирайте картовата информация с изображение като използвате атрибута usmap на тага img
И да не забравяме че детайлите,съдържащи се в картата на изображение,зависят силно от размера на изображението.

Ето един пример за карта на изображение
<p>
<map name=”test”>
<area href=”test.html” shape=”rect” coords=”89, 155, 144, 195” alt=”test”
<area href=”test1.html” shape=”rect” coords=”455, 155, 510, 193” alt=”test1”
<area href=”test2.html” shape=”rect” coords=”461, 8, 517, 47” alt=”test2”
<area href=”test3.html” shape=”rect” coords=”87, 5, 143, 44” alt=”test3”
</map>
<img src=”test.jpg” usemap=”#testmap” border=”0”>
</p>

Не е особено сложно да си направите карта на изображение,но определено е по-лесно с програма като frontpage примено.

@All rights reserved with Copyright Webleit.info 2018 by Sonik_Blast [ Site Map ] [ RSS ] [ YouTube Mp3 Downloader and converter ]