Aktivne slike v HTML

Tudi sliko lahko uporabimo kot povezavo. To naredimo tako, da element <img> postavimo znotraj elementa <a>. Ko uporabnik klikne na sliko, se odpre cilj povezave.

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

Pri takšni uporabi je pomembno, da ima slika smiseln atribut alt, saj ta pomaga pojasniti namen slike oziroma povezave.

Pomni: Za navadno aktivno sliko praviloma zadostuje, da element <img> postavimo znotraj elementa <a>.

Osnovna pravila

Sliko lahko uporabimo kot povezavo.
Za to element <img> postavimo znotraj elementa <a>.
Če želimo več različnih povezav na eni sliki, uporabimo slikovni zemljevid.
Slikovni zemljevid določimo z elementoma <map> in <area>.
Pri aktivnih slikah je pomemben tudi smiseln atribut alt.

Slika kot povezava

Sliko lahko uporabimo kot povezavo na enak način kot besedilo. V takem primeru je cilj povezave določen z atributom href pri oznaki <a>, slika pa je zapisana znotraj te oznake.

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

Pozor: Atribut title ni nadomestilo za atribut alt. Pri aktivni sliki mora biti namen slike ali povezave jasno opisan predvsem z atributom alt.

Slikovni zemljevid

Sliko lahko naredimo aktivno tudi tako, da imajo različni deli iste slike različne povezave. Tak način imenujemo slikovni zemljevid.

V tem primeru z elementom <map> določimo aktivna območja na sliki, posamezna območja pa opišemo z elementom <area>. Sliko in zemljevid povežemo z atributom usemap.

<img src="slika.jpg" alt="Opis slike" usemap="#mojaMapa">

<map name="mojaMapa">
  <area shape="rect" coords="10,10,100,100" href="primer.html" alt="Primer">
</map>

Vrednost atributa usemap se začne z znakom # in mora ustrezati vrednosti atributa name pri elementu <map>.

Pogosti atributi elementa `<area>`

`shape`

Z atributom shape določimo obliko aktivnega območja. Pogoste vrednosti so:

default – celotna slika
rect – pravokotnik
circle – krog
poly – mnogokotnik

`coords`

Z atributom coords določimo položaj in velikost območja na sliki. Število koordinat je odvisno od izbrane oblike:

pri rect podamo koordinate levega zgornjega in desnega spodnjega kota,
pri circle podamo koordinate središča in polmer,
pri poly podamo zaporedje oglišč.

`href`

Z atributom href določimo cilj povezave, ki se odpre ob kliku na območje.

`alt`

Z atributom alt na kratko opišemo aktivno območje oziroma namen povezave. To je pomembno tudi za dostopnost.

`title`

Atribut title lahko prikaže kratek namig, ko se z miško zadržimo nad aktivnim območjem.

Če uporabnik klikne na del slike, kjer se prekrivata dve aktivni območji, ima prednost tisto območje, ki je v kodi zapisano prej.

Primer slikovnega zemljevida

<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

Slikovni zemljevidi so uporabni predvsem pri posebnih primerih, ko želimo na eni sliki določiti več različnih povezav. Za navadno povezano sliko pa običajno zadostuje, da element <img> postavimo znotraj elementa <a>.

Priporočila

Za običajno povezano sliko uporabi oznaki <a> in <img>.
Pri aktivni sliki vedno dodaj smiseln atribut alt.
Slikovni zemljevid uporabi takrat, ko želiš na eni sliki določiti več različnih povezav.
Pri elementu <area> jasno določi obliko in koordinate aktivnega območja.
Za povezave v novih zavihkih uporabljaj ustrezne atribute premišljeno.

Pogoste napake

Slika je uporabljena kot povezava brez ustreznega atributa alt.
Atribut usemap ne ustreza vrednosti atributa name pri elementu <map>.
Koordinate v atributu coords ne ustrezajo izbrani obliki območja.
Za preprosto povezano sliko je uporabljen slikovni zemljevid, čeprav ni potreben.
Aktivna območja na sliki niso dovolj jasno določena.

Nazaj

Naprej