Načrtovanje in razvoj spletnih aplikacij

Aktivne slike v HTML

Tudi slike lahko naredimo aktivne. Dovolj je, da za vsebino elementa a vpišemo sliko. Slika ob tem dobi okvir, ki označuje, da je aktivna.

<a href="nogomet.html"><img src="zoga.png" alt="Nogometna žoga"></a>

Različna območja slike določajo različne cilje

Sliko lahko naredimo aktivno tudi tako, da bodo različna območja slike določala različne cilje. V tem primeru moramo najprej definirati, kje na sliki bodo aktivna območja in kateri bodo pripadajoči cilji. To storimo z elementom map, ki mu predpišemo lastnost name, da se lahko skličemo nanj. Opis območij povežemo s sliko prek lastnosti usemap, katere vrednost je # in vrednost lastnosti name elementa map.

Za vsebino mu naštejemo aktivna območja, pri čemer vsako območje opišemo z elementom area. Ta ima lastnosti:

shape

Z lastnostjo shape določimo obliko območja. Možne vrednosti lastnosti so:

  • default - cela slika
  • rect - pravokotnik
  • circle - krog
  • poly - poligon

coords

Z lastnostjo coords določimo položaj in velikost območja na sliki. Število in pomen podatkov, ki jih napišemo za vrednost te lastnosti, je odvisno od vrednosti lastnosti shape. Pravokotnik opišemo s koordinatama levega zgornjega in koordinatama desnega spodnjega oglišča, krog s koordinatama središča in polmerom, poligon pa z zaporedjem njegovih oglišč (vsako oglišče podamo z dvema koordinatama). Podatke ločimo z vejicami.

href

Z lastnostjo href določimo naslov datoteke, ki se odpre, ko uporabnik klikne na območje.

alt

Z lastnostjo alt na kratko opišemo, kaj območje predstavlja, oziroma kam nas bo pripeljal klik nanj.

Če točko, kamor je kliknil uporabnik, pokriva več območij, ima prednost tisto, ki se v seznamu območij pojavi prej.

Primer:

<img src="../_slike/planeti.jpg" width="425" height="234" alt="Planeti" usemap="#mapaPlanetov"/>

<map name="mapaPlanetov">
  <area shape="poly" coords="48,135,44,70,1,19,2,215,30,181"
    href="http://nineplanets.org/sol.html" target="_blank" alt="Sonce">
  <area shape="circle" coords="84,119,10" 
    href="http://nineplanets.org/mercury.html" target="_blank" alt="Merkur">
  <area shape="circle" coords="116,119,11" 
    href="http://nineplanets.org/venus.html" target="_blank" alt="Venera">
  <area shape="circle" coords="146,119,11" 
    href="http://nineplanets.org/earth.html" target="_blank" alt="Zemlja">
  <area shape="circle" coords="178,119,9" 
    href="http://nineplanets.org/mars.html" target="_blank" alt="Mars">
  <area shape="circle" coords="240,118,37" 
    href="http://nineplanets.org/jupiter.html" target="_blank" alt="Jupiter">
  <area shape="circle" coords="344,116,28" 
    href="http://nineplanets.org/saturn.html" target="_blank" alt="Saturn">
</map>

Planeti Sonce Merkur Venera Zemlja Mars Jupiter Saturn