{"id":697,"date":"2020-05-05T13:39:24","date_gmt":"2020-05-05T13:39:24","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&#038;p=697"},"modified":"2020-05-06T17:11:04","modified_gmt":"2020-05-06T17:11:04","slug":"lisalugemine-interaktiivne-pilt","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/lisalugemine-interaktiivne-pilt\/","title":{"rendered":"LISALUGEMINE: interaktiivne pilt"},"content":{"raw":"Interaktiivne pilt on pilt veebilehel, millel on m\u00e4\u00e4ratud kl\u00f5psatavad, linkidega varustatud piirkonnad.\r\n\r\nInteraktiivse pildi loomiseks luuakse element <code>&lt;map&gt;<\/code>, mille sees defineeritakse mingi pildi jaoks piirkonnad, milledel saab kl\u00f5psata. Nende piirkondade m\u00e4\u00e4ramisel kasutatakse koordinaatidena kaugust pildi \u00fclemisest vasakust nurgast pikslites. Nende koordinaatide kindlaksm\u00e4\u00e4ramisel saab kasutada mistahes graafikaprogrammi abi (n\u00e4iteks ka MS Paint).\r\n\r\nElemendil <code>&lt;map&gt;<\/code> on kohustuslik atribuut:\r\n<ul>\r\n \t<li><code>name<\/code> \u2013 loodava \u201ekaardi\u201c nimi, mille abil see vastava pildi elemendiga (<code>&lt;img&gt;<\/code>) seotakse!<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;map name=\u201ceestilinnad\u201c&gt;\r\n  \u2026\r\n&lt;\/map&gt;<\/pre>\r\nLoodud \u201ekaardi\u201c sidumiseks vastava pildiga tuleb elemendile <code>&lt;img&gt;<\/code> lisada atribuut usemap!\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"images\/eesti_kaart.jpg\" alt=\"Eesti kaart\" width=\"500\" height=\"327\" usemap=\"#eestilinnad\"&gt;<\/pre>\r\nKl\u00f5psatavad piirkonnad luuakse elemendi <code>&lt;area&gt;<\/code> abil. Sellel elemendil on j\u00e4rgmised atribuudid:\r\n<ul>\r\n \t<li><code>shape<\/code> \u2013 piirkonna kuju, mis v\u00f5ib olla:\r\n<ul>\r\n \t<li><code>rect<\/code> \u2013 ristk\u00fclik, selle koordinaatidena tuleb kirja panna diagonaali otspunktid (\u00fclemise vasaku ja seej\u00e4rel alumise parema nurga koordinaadid);<\/li>\r\n \t<li><code>circle<\/code> \u2013 ring, selle koordinaatidena tuleb kirja panna kolm arvu: keskpunkti koordinaadid ja raadius;<\/li>\r\n \t<li><code>poly<\/code> \u2013 hulknurk, kirja tuleb panna k\u00f5ikide soovitud tippude koordinaadid.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li><code>alt<\/code> \u2013 alternatiivtekst (kohustuslik).<\/li>\r\n \t<li><code>href<\/code> \u2013 viide veebilehele (v\u00f5i muule ressursile), kuhu satutakse vastaval piirkonnal kl\u00f5psates.<\/li>\r\n \t<li><code>target<\/code> \u2013 millises aknas href atribuudiga m\u00e4\u00e4ratud ressurss avatakse.<\/li>\r\n \t<li><code>coords<\/code> \u2013 koordinaadid pikslite arvudena, komadega eraldatuna j\u00e4rjest vajalike punktide x ja y koordinaadid (pikslites).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;map name=\"eestilinnad\" id=\u201ceestilinnad\u201c&gt;\r\n  &lt;area shape=\"rect\" coords=\"197,57,244,79\" alt=\"Tallinn\" href=\"http:\/\/www.tallinn.ee\" target=\"_blank\" \/&gt;\r\n  &lt;area shape=\"circle\" coords=\"220,204,5\" alt=\"P\u00e4rnu\" href=\"http:\/\/www.parnu.ee\" target=\"_blank\" \/&gt;\r\n  &lt;area shape=\"circle\" coords=\"291,206,5\" alt=\"Viljandi\" href=\"http:\/\/www.viljandi.ee\" target=\"_blank\" \/&gt;\r\n  &lt;area shape=\"circle\" coords=\"363,204,8\" alt=\"Tartu\" href=\"http:\/\/www.tartu.ee\" target=\"_blank\" \/&gt;\r\n&lt;\/map&gt;<\/pre>","rendered":"<p>Interaktiivne pilt on pilt veebilehel, millel on m\u00e4\u00e4ratud kl\u00f5psatavad, linkidega varustatud piirkonnad.<\/p>\n<p>Interaktiivse pildi loomiseks luuakse element <code>&lt;map&gt;<\/code>, mille sees defineeritakse mingi pildi jaoks piirkonnad, milledel saab kl\u00f5psata. Nende piirkondade m\u00e4\u00e4ramisel kasutatakse koordinaatidena kaugust pildi \u00fclemisest vasakust nurgast pikslites. Nende koordinaatide kindlaksm\u00e4\u00e4ramisel saab kasutada mistahes graafikaprogrammi abi (n\u00e4iteks ka MS Paint).<\/p>\n<p>Elemendil <code>&lt;map&gt;<\/code> on kohustuslik atribuut:<\/p>\n<ul>\n<li><code>name<\/code> \u2013 loodava \u201ekaardi\u201c nimi, mille abil see vastava pildi elemendiga (<code>&lt;img&gt;<\/code>) seotakse!<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;map name=\u201ceestilinnad\u201c&gt;\r\n  \u2026\r\n&lt;\/map&gt;<\/pre>\n<p>Loodud \u201ekaardi\u201c sidumiseks vastava pildiga tuleb elemendile <code>&lt;img&gt;<\/code> lisada atribuut usemap!<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;img src=\"images\/eesti_kaart.jpg\" alt=\"Eesti kaart\" width=\"500\" height=\"327\" usemap=\"#eestilinnad\"&gt;<\/pre>\n<p>Kl\u00f5psatavad piirkonnad luuakse elemendi <code>&lt;area&gt;<\/code> abil. Sellel elemendil on j\u00e4rgmised atribuudid:<\/p>\n<ul>\n<li><code>shape<\/code> \u2013 piirkonna kuju, mis v\u00f5ib olla:\n<ul>\n<li><code>rect<\/code> \u2013 ristk\u00fclik, selle koordinaatidena tuleb kirja panna diagonaali otspunktid (\u00fclemise vasaku ja seej\u00e4rel alumise parema nurga koordinaadid);<\/li>\n<li><code>circle<\/code> \u2013 ring, selle koordinaatidena tuleb kirja panna kolm arvu: keskpunkti koordinaadid ja raadius;<\/li>\n<li><code>poly<\/code> \u2013 hulknurk, kirja tuleb panna k\u00f5ikide soovitud tippude koordinaadid.<\/li>\n<\/ul>\n<\/li>\n<li><code>alt<\/code> \u2013 alternatiivtekst (kohustuslik).<\/li>\n<li><code>href<\/code> \u2013 viide veebilehele (v\u00f5i muule ressursile), kuhu satutakse vastaval piirkonnal kl\u00f5psates.<\/li>\n<li><code>target<\/code> \u2013 millises aknas href atribuudiga m\u00e4\u00e4ratud ressurss avatakse.<\/li>\n<li><code>coords<\/code> \u2013 koordinaadid pikslite arvudena, komadega eraldatuna j\u00e4rjest vajalike punktide x ja y koordinaadid (pikslites).<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;map name=\"eestilinnad\" id=\u201ceestilinnad\u201c&gt;\r\n  &lt;area shape=\"rect\" coords=\"197,57,244,79\" alt=\"Tallinn\" href=\"http:\/\/www.tallinn.ee\" target=\"_blank\" \/&gt;\r\n  &lt;area shape=\"circle\" coords=\"220,204,5\" alt=\"P\u00e4rnu\" href=\"http:\/\/www.parnu.ee\" target=\"_blank\" \/&gt;\r\n  &lt;area shape=\"circle\" coords=\"291,206,5\" alt=\"Viljandi\" href=\"http:\/\/www.viljandi.ee\" target=\"_blank\" \/&gt;\r\n  &lt;area shape=\"circle\" coords=\"363,204,8\" alt=\"Tartu\" href=\"http:\/\/www.tartu.ee\" target=\"_blank\" \/&gt;\r\n&lt;\/map&gt;<\/pre>\n","protected":false},"author":1,"menu_order":27,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":25,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/697"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":4,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/697\/revisions"}],"predecessor-version":[{"id":749,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/697\/revisions\/749"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/25"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/697\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=697"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=697"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=697"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}