Какво да знаете
• Използвайте изображение с нормален размер, което браузърът няма да премащабира. Ще ви трябва и редактор на изображения и HTML или текстов редактор.
• Когато вмъквате изображението, добавете допълнителен атрибут за идентифициране на координатите на картата.
• Например:
Тази статия обяснява как да създавате Карти на изображения с помощта на HTML тагове вместо редактор на карти на изображения. Повечето редактори на изображения ще ви покажат координатите на мишката ви, когато посочите в изображението, което са всички данни, от които се нуждаете, за да започнете с картите на изображения.
Създаване на карта на изображение
За да създадете карта с изображение, първо изберете изображение, което ще служи като основа на картата. Изображението трябва да е с "нормален размер" - т.е. не трябва да използвате изображение толкова голямо, че браузърът да го мащабира.
Когато вмъкнете изображението, ще добавите допълнителен атрибут, който идентифицира координатите на картата:
Когато създавате карта с изображение, вие създавате област, която може да се кликне върху изображението, така че координатите на картата трябва да съответстват на височината и ширината на изображението, което сте избрали. Картите поддържат три различни типа форми:
- прав - правоъгълник или четиристранна фигура
- поли-многоъгълник или многостранна фигура
- кръг-кръг
За да създадете областите, трябва да изолирате конкретните координати, които възнамерявате да картографирате. Картата може да се състои от една или повече дефинирани области на изображението, които при щракване отварят нова хипервръзка.
За правоъгълник картографирате само горния ляв и долния десен ъгъл. Всички координати са посочени като x, y (над, нагоре). И така, за горния ляв ъгъл 0, 0 и долния десен ъгъл 10, 15 трябва да въведете 0, 0, 10, 15. След това го включвате в картата:
За многоъгълник картографирате всяка x, y координата отделно. Уеб браузърът автоматично свързва последния набор от координати с първия; всичко в тези координати е част от картата.
Кръговите форми изискват само две координати, като правоъгълника, но за втората координата вие определяте радиуса или разстоянието от центъра на кръга. И така, за окръжност с център 122, 122 и радиус 5 ще напишете 122, 122, 5:
Всички области и форми могат да бъдат включени в един и същ таг на картата:
Съображения
Картите на изображения бяха много по-често срещани в ерата на Web 1.0 от 1990-те до много ранните 2000-те години – картите на изображения често формираха основата на навигацията на уебсайта. Дизайнерът би създал някакъв вид картина, за да посочи елементи от менюто, след което би задал карта.
Модерните подходи насърчават адаптивния дизайн и използват каскадни стилови таблици за контролиране на разположението на изображения и хипервръзки на страница.
Въпреки че тагът на картата все още се поддържа в HTML стандарта, използването на мобилни устройства с малък форм-фактор може да доведе до неочаквани проблеми с производителността на картите на изображения. В допълнение, проблеми с честотната лента или счупени изображения оспорват стойността на картата на изображението.
Така че не се колебайте да продължите да използвате тази стабилна, добре разбрана технология - знаейки, че има по-ефективни алтернативи, които в момента са на мода сред уеб дизайнерите.
