{"id":163,"date":"2020-12-02T07:42:39","date_gmt":"2020-12-02T06:42:39","guid":{"rendered":"https:\/\/piotrgabriel.pl\/wiki\/?p=163"},"modified":"2021-06-29T06:48:36","modified_gmt":"2021-06-29T04:48:36","slug":"mapy-obrazu-w-jezyku-html","status":"publish","type":"post","link":"https:\/\/piotrgabriel.pl\/wiki\/mapy-obrazu-w-jezyku-html\/","title":{"rendered":"Mapy obrazu w j\u0119zyku HTML"},"content":{"rendered":"

Dowiedz czym s\u0105 mapy obrazu w HTML, jak je mozna wykorzysta\u0107 i jak je zrobi\u0107.<\/p>\n

Mapy obrazu w j\u0119zyku HTML tworzymy „od wiek\u00f3w” w niemal identyczny spos\u00f3b.\u00a0 S\u0142u\u017c\u0105 one mi\u0119dzy innymi do tego by obrazek statyczny wykorzysta\u0107 jako taki, kt\u00f3rego pewne – oznaczone – obszary b\u0119d\u0105 klikalnymi linkami (hiper\u0142\u0105czami \/ odno\u015bnikami) do zakotwiczonych w nich podstron czy innych materia\u0142\u00f3w.<\/p>\n

Definiowanie map obrazu<\/h2>\n

Znacznik HTML <map><\/code>definiuje map\u0119 obrazu.\u00a0Mapa obrazu to obraz z klikalnymi obszarami.\u00a0Obszary s\u0105 definiowane za pomoc\u0105 co najmniej jednego znacznika <area><\/code>.<\/p>\n

Pos\u0142u\u017cymy si\u0119 ni\u017cej przyk\u0142adem z https:\/\/www.w3schools.com\/<\/a><\/p>\n

\"\"<\/p>\n

<<\/span>img\u00a0src=\"workplace.jpg\"<\/span>\u00a0alt=\"Workplace\"<\/span>\u00a0usemap=\"#workmap\"<\/span><\/span>><\/span><\/span><\/code>
\n<<\/span>map\u00a0name=\"workmap\"<\/span><\/span>><\/span><\/span><\/code>
\n\u00a0\u00a0<<\/span>area\u00a0shape=\"rect\"<\/span>\u00a0coords=\"34,44,270,350\"<\/span>\u00a0alt=\"Computer\"<\/span>\u00a0href=\"computer.htm\"<\/span><\/span>><\/span><\/span><\/code>
\n\u00a0\u00a0<<\/span>area\u00a0shape=\"rect\"<\/span>\u00a0coords=\"290,172,333,250\"<\/span>\u00a0alt=\"Phone\"<\/span>\u00a0href=\"phone.htm\"<\/span><\/span>><\/span><\/span><\/code>
\n\u00a0\u00a0<<\/span>area\u00a0shape=\"circle\"<\/span>\u00a0coords=\"337,300,44\"<\/span>\u00a0alt=\"Coffee\"<\/span>\u00a0href=\"coffee.htm\"<\/span><\/span>><\/span><\/span><\/code>
\n<<\/span>\/map><\/span><\/span><\/code><\/p>\n

W kodzie mamy znacznik img, w kt\u00f3rym znajduje si\u0119 usemap=\"#workmap\"<\/span><\/span><\/span><\/code> gdzie #workmap to odniesienie si\u0119 do przetrzeni naszej mapy, jej obszaru<\/p>\n

Kolejno mamy znacznik map z atrybutem name a w nim w\u0142a\u015bnie nasz\u00a0 workmap<\/span><\/span><\/span><\/code> czyli <<\/span>map\u00a0name=\"workmap\"><\/span><\/span><\/span><\/code>. To w\u0142a\u015bnie tutaj odnosi si\u0119 nasz <<\/span>img\u00a0src=\"workplace.jpg\"<\/span>\u00a0alt=\"Workplace\"<\/span>\u00a0usemap=\"#workmap\"<\/span><\/span>><\/span><\/span><\/code><\/p>\n

Wa\u017cnym wi\u0119c jest aby atrybut name mia\u0142 tak\u0105 sam\u0105 warto\u015b\u0107 jak atrybut usemap!<\/p>\n

Obszary w naszej mapie HTML<\/h2>\n

Obszary czyli elementy, kt\u00f3re b\u0119d\u0105 wyznacza\u0142y klikalny fragment naszej mapy. Definiujemy na 4 sposoby;<\/p>\n

    \n
  • rect<\/code>\u00a0– definiuje prostok\u0105tny region<\/li>\n
  • circle<\/code>\u00a0– definiuje obszar ko\u0142owy<\/li>\n
  • poly<\/code>\u00a0– definiuje region wielok\u0105tny<\/li>\n
  • default<\/code>\u00a0– okre\u015bla ca\u0142y region<\/li>\n<\/ul>\n

    Prostok\u0105tny obszaru czyli shape=”rect”<\/h2>\n

    Wsp\u00f3\u0142rz\u0119dne prostok\u0105ta definiuje si\u0119 za pomoc\u0105 osi X i Y. Z dw\u00f3ch wsp\u00f3\u0142rz\u0119dnych powstaje wi\u0119c punkt pierwszy na naszej mapie, czyli:<\/p>\n

    \"\"<\/p>\n

    Tak jak rozpisuje to przyk\u0142ad z w3school.com wsp\u00f3\u0142rz\u0119dne oznaczonego w czerwonym k\u00f3\u0142ku punktu to 34 i 44. Pierwsza wsp\u00f3\u0142rz\u0119dna liczona jest „od lewego roku”, czyli 34 piksele od lewej. Wsp\u00f3\u0142rz\u0119dna 2, czyli 44px liczona jest od g\u00f3ry.<\/p>\n

    Analogicznie wi\u0119c musi nam powsta\u0107 2 tak oznaczony punkt na naszej mapie, by obszar zaznaczy\u0142 prostok\u0105t. Czyli podaj\u0105c 270 i 350px (od lewej, od g\u00f3ry) mamy kolejy punkt.<\/p>\n

     <\/p>\n

    \"\"<\/p>\n

    Efektem b\u0119dzie klikalna przestrze\u0144, prowadz\u0105ca do jakiego\u015b adresu, np.<\/p>\n

    <<\/span>area\u00a0shape=\"rect\"<\/span>\u00a0coords=\"34, 44, 270, 350\"<\/span>\u00a0href=\"computer.htm\"<\/span><\/span>><\/span><\/code><\/p>\n

    Obszar ko\u0142a czyli shape=”circle”<\/h2>\n

    Analogicznie jak w przypadku prostok\u0105ta, z tym \u017ce teraz mamy do czynienia z 3 wsp\u00f3\u0142rz\u0119dnymi.<\/p>\n

    Pierwsze dwie definiuj\u0105 \u015brodek naszego ko\u0142a, id\u0105c od lewej i od g\u00f3ry. Trzecia wsp\u00f3\u0142rz\u0119dna definiuje promie\u0144 naszego okr\u0119gu wyra\u017cony w pixelach.<\/p>\n

    na przyk\u0142ad <<\/span>area\u00a0shape=\"circle\"<\/span>\u00a0coords=\"337, 300, 44\"<\/span>\u00a0href=\"coffee.htm\"<\/span><\/span>><\/span><\/code><\/p>\n

    \"\"<\/p>\n

    Obszar wielopunktowy, poli czyli shape=”poli”<\/h2>\n

    Analogicznie jak w przypadku circle i rect ka\u017cdy z naszych punkt\u00f3w musi by\u0107 zdefiniowany dwiema wsp\u00f3\u0142rz\u0119dnymi:<\/p>\n

      \n
    1. pierwsza od lewej (w pixelach);<\/li>\n
    2. druga wsp\u00f3\u0142rz\u0119dna od g\u00f3ry (w pixelach);<\/li>\n<\/ol>\n

      przykad bazuj\u0105cy na poni\u017cszym obrazku mo\u017ce wi\u0119c przybra\u0107 tak\u0105 posta\u0107:<\/p>\n

      <<\/span>area\u00a0shape=\"poly\"<\/span>\u00a0coords=\"140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147\"<\/span>\u00a0href=\"croissant.htm\"<\/span><\/span>><\/span><\/code><\/p>\n

      Dzi\u0119ki temu mo\u017cemy bardzo precyzyjnie oznaczy\u0107 \/ zarysowa\u0107 obszar klikalny naszej mapy.<\/p>\n

      \"\"<\/p>\n

      Mapa obrazu i JavaScript<\/h2>\n

      Klikalny obszar naszej mapy mo\u017ce te\u017c wywo\u0142ywa\u0107 akcje, na przyk\u0142ad tak\u0105 akcj\u0105 mo\u017ce by\u0107 edukacyjna mapa Polski, gdzie dziecko klikaj\u0105c na jaki\u015b powiat, otrzyma informacj\u0119 z ciekawostkami turystycznymi danego powiatu. Wystarczy doda\u0107 element JavaScriptowy „onclick” i napisa\u0107 odpowiedni\u0105 akcj\u0119 jako funkcj\u0119 w j\u0119zyku JavaScript.<\/p>\n

      Przyk\u0142ad<\/p>\n

      <<\/span>map\u00a0name=\"workmap\"<\/span><\/span>><\/span><\/span><\/code>
      \n\u00a0\u00a0<<\/span>area\u00a0shape=\"circle\"<\/span>\u00a0coords=\"337,300,44\"<\/span>\u00a0onclick=\"myFunction()\"<\/span><\/strong><\/span>><\/span><\/span><\/code>
      \n<<\/span>\/map><\/span><\/span><\/code><\/p>\n

      <<\/span>script><\/span><\/span>
      \nfunction<\/span>\u00a0myFunction() {
      \nalert(\"You clicked the coffee cup!\"<\/span>);
      \n}
      \n<\/span><\/strong><<\/span>\/script<\/strong>><\/strong><\/span><\/span><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

      Dowiedz czym s\u0105 mapy obrazu w HTML, jak je mozna wykorzysta\u0107 i jak je zrobi\u0107.<\/p>\n","protected":false},"author":1,"featured_media":137,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[45],"class_list":["post-163","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3-javascript","tag-html5"],"_links":{"self":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":0,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/163\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media\/137"}],"wp:attachment":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/categories?post=163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/tags?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}