32 LISALUGEMINE: interaktiivne pilt

Interaktiivne pilt on pilt veebilehel, millel on määratud klõpsatavad, linkidega varustatud piirkonnad.

Interaktiivse pildi loomiseks luuakse element <map>, mille sees defineeritakse mingi pildi jaoks piirkonnad, milledel saab klõpsata. Nende piirkondade määramisel kasutatakse koordinaatidena kaugust pildi ülemisest vasakust nurgast pikslites. Nende koordinaatide kindlaksmääramisel saab kasutada mistahes graafikaprogrammi abi (näiteks ka MS Paint).

Elemendil <map> on kohustuslik atribuut:

  • name – loodava „kaardi“ nimi, mille abil see vastava pildi elemendiga (<img>) seotakse!

Näiteks:

<map name=“eestilinnad“>
  …
</map>

Loodud „kaardi“ sidumiseks vastava pildiga tuleb elemendile <img> lisada atribuut usemap!

Näiteks:

<img src="images/eesti_kaart.jpg" alt="Eesti kaart" width="500" height="327" usemap="#eestilinnad">

Klõpsatavad piirkonnad luuakse elemendi <area> abil. Sellel elemendil on järgmised atribuudid:

  • shape – piirkonna kuju, mis võib olla:
    • rect – ristkülik, selle koordinaatidena tuleb kirja panna diagonaali otspunktid (ülemise vasaku ja seejärel alumise parema nurga koordinaadid);
    • circle – ring, selle koordinaatidena tuleb kirja panna kolm arvu: keskpunkti koordinaadid ja raadius;
    • poly – hulknurk, kirja tuleb panna kõikide soovitud tippude koordinaadid.
  • alt – alternatiivtekst (kohustuslik).
  • href – viide veebilehele (või muule ressursile), kuhu satutakse vastaval piirkonnal klõpsates.
  • target – millises aknas href atribuudiga määratud ressurss avatakse.
  • coords – koordinaadid pikslite arvudena, komadega eraldatuna järjest vajalike punktide x ja y koordinaadid (pikslites).

Näiteks:

<map name="eestilinnad" id=“eestilinnad“>
  <area shape="rect" coords="197,57,244,79" alt="Tallinn" href="http://www.tallinn.ee" target="_blank" />
  <area shape="circle" coords="220,204,5" alt="Pärnu" href="http://www.parnu.ee" target="_blank" />
  <area shape="circle" coords="291,206,5" alt="Viljandi" href="http://www.viljandi.ee" target="_blank" />
  <area shape="circle" coords="363,204,8" alt="Tartu" href="http://www.tartu.ee" target="_blank" />
</map>

Litsents

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Veebidisain by Koostaja: Mikk Oad; Tekst: Andrus Rinde, Mikk Oad is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Jaga seda raamatut