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" title="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.

title

Lastnost title izpiše majhen okvir z opisom slike, ko se z miško zapeljemo nad sliko.

Č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" title="Sonce">
  <area shape="circle" coords="84,119,10" 
    href="http://nineplanets.org/mercury.html" target="_blank" alt="Merkur" title="Merkur">
  <area shape="circle" coords="116,119,11" 
    href="http://nineplanets.org/venus.html" target="_blank" alt="Venera" title="Venera">
  <area shape="circle" coords="146,119,11" 
    href="http://nineplanets.org/earth.html" target="_blank" alt="Zemlja" title="Zemlja">
  <area shape="circle" coords="178,119,9" 
    href="http://nineplanets.org/mars.html" target="_blank" alt="Mars" title="Mars">
  <area shape="circle" coords="240,118,37" 
    href="http://nineplanets.org/jupiter.html" target="_blank" alt="Jupiter" title="Jupiter">
  <area shape="circle" coords="344,116,28" 
    href="http://nineplanets.org/saturn.html" target="_blank" alt="Saturn" title="Saturn">
</map>

Planeti

Nazaj

Naprej