HTML5-те кескін карталарын қалай құруға болады

Авторы Эд Тит, Крис Минник

Веб-беттерде навигация үшін суреттер жиі қолданылады. Олар қарапайым мәтіндік сілтемелерден гөрі әдемі және сіз өзіңіздің парағыңызға форманы да, функцияны да бір элементпен қоса аласыз. Сіз пайдаланған кезде байланыстырушы кескін жасау үшін якорь элементі бар элемент, сіз сол кескінге тек бір сілтеме қоса аласыз. Беттегі әр түрлі аймақтарға сілтемелерді қосатын үлкенірек сурет жасау үшін сізге қажет кескін картасы.



Кескін картасын жасау үшін сізге екі нәрсе қажет:



  • Кескін пайдаланушыларға айқын айқын аймақтары бар

    Мысалы, саябақтың кескінінде ойын алаңы, пикник алаңы және тоған аймағы көрінуі мүмкін.



    027 р ақ таблетка
  • Түзету картадағы әр түрлі аймақтарды әртүрлі URL мекен-жайларына салыстыру

Элементтер мен атрибуттар

Пайдаланыңыз сіздің картаңызға басқа кескіндер сияқты карта кескінін қосатын элемент. Сонымен қатар,пайдаланушы картасытөлсипат браузерге кескін картасының ақпараты сол кескінмен бірге жүруі керек екенін хабарлауға мүмкіндік береді. Мәніпайдаланушы картасыатрибут - сіздің картаңыздың атауы.

Кескін картасын анықтау үшін сіз екі элементті және атрибуттар жинағын қолданасыз:



  • картакарта туралы ақпаратты ұстайды. Theкартаэлементі пайдаланадыатыкартаны анықтау үшін төлсипат. Мәніатымәніне сәйкес келуі керекпайдаланушы картасыішінде картамен бірге жүретін элемент.

  • ауданкартаның белгілі бір бөліктерін URL мекенжайларына байланыстырады. Theауданэлемент картаның әр бөлімі үшін ерекшеліктерді анықтау үшін осы атрибуттарды алады:

    • пішін: Аймақтың пішінін анықтайды (кескін картасын жұмыс жасайтын басылатын ыстық нүкте). Сіз таңдауға боладытік(тіктөртбұрыш),шеңбер, жәнеполи(үшбұрыш немесе көпбұрыш).

    • координаттар: Аймақтың координаттарын анықтайды.

      Тік төртбұрыштың координаталарына сол, оң, жоғарғы және төменгі нүктелер кіреді.

      Шеңбердің координаталарына шеңбердің центрі және шеңбер радиусы үшін х және у координаттары кіреді.

      қандай таблеткада ip109 бар

      Көпбұрыштың координаттары дегеніміз - көпбұрыштың әрбір шыңы үшін х және у координаттарының жиынтығы.

      Кескіннің координаттарын анықтау үшін, мысалы, кескін картасының редакторын пайдалануға болады Mapedit немесе сияқты графикалық редактор PaintShop Photo Pro . Mapedit сізге сол координаттарды жазады.

    • href: Аймақ сілтеме жасайтын URL мекенжайын көрсетеді (абсолютті немесе салыстырмалы болуы мүмкін).

    • бәрі: Кескін аймағына балама мәтін ұсынады.

Түзету

Келесі деп аталатын үш аймақтық картаны анықтайдыNavMapатты графикалық файлға байланыстыimg / web-design-development / 59 / how-build-image-maps-html5.gif:

  

Суретте шолушы бұл түзетуді қалай көрсететінін көрсетеді.

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

image0.jpg

Кескін карталардың кең тараған қолданысы - бұл жерлердің (мемлекеттердің, елдердің және басқаларының) карталарын байланыстырылатын карталарға айналдыру. Сіз пайдалана алатын бірнеше интернет-ресурстар:

Кескін карталарын қолмен жасау қиын болуы мүмкін. Картадағы әр нүктені анықтау үшін кескін редакторын пайдаланыңыз және содан кейін ол үшін тиісті белгілеу жасаңыз. HTML құралдарының көпшілігінде кескін карта жасауға көмектесетін утилиталар бар. Егер сіз осындай құралды пайдалансаңыз, кескін карталарын тез және қатесіз жасай аласыз.

Кескін карталарын қолданғанда сақ болыңыз. Егер сіз көрнекі құрал жасасаңыз (мысалы, онда көрсетілген әртүрлі елдерге сілтемелері бар карта тәрізді), кескін картасын қолданғаныңыз абзал. Екінші жағынан, негізгі навигация үшін кескін карталары бар графиканы ешқашан қолдануға болмайды. (Ал, сен мүмкін, бірақ сіз нәтиже алғыңыз келмейді!)

Веб-сайттың негізгі навигациясы үшін әрдайым HTML және CSS-ті қолданыңыз немесе егер графикалық кескін картасын пайдалану керек болса, сол картаға мәтінге негізделген альтернатива қосыңыз, сонда көзі нашар көретін сайтқа кірушілер оның орнына альтернативті басқару элементтерін қолдана алады.

Жалпы, навигация үшін ең жақсы нәрсе - бұл батырма белгілері үшін мәтінді қолдану және CSS-ке батырмаларды әдемі етіп көрсетуге қатысты жұмысты орындау.