Slika s poljubno povezavami in sporočili

slika_povezave_thumb
S HTMLjem lahko uporabite sliko, jo določite za ozadje in preko nje razporedite področja, ki služijo, kot povezave ali sporočila. Z značko <map> lahko sedaj naredite svoje zemljevide, posebne menije in različne slike s povezavami in razlagami.




HTML koda:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<img src="/zemljevid.png" usemap="#menges">
<map name="menges">
<area shape=rect coords=162,151,232,261 href="http://moje-mesto.com" title="Mengeš">
<area shape=rect coords=258,282,314,349 href="http://moje-mesto.com" title="Domžale">
<area shape=rect coords=157,338,191,383 href="http://moje-mesto.com" title="Trzin">
</map>

</body>
</html>
PRIKAZ zemljevida


Razlaga HTML kode:

Značka img prikaže sliko na spletni strani. Slika bo delovala, kot zemljevid oz. podlaga za povezave. Pomembno je, da slika vsebuje atribut usemap="" z imenom zemljevida povezav (v mojem primeru je ime "menges"). Pred imenom ne pozabite pripisati lojtre ( # ).

Značka <map> določa področja, ki bodo služila, kot povezave oz. razlage. V znački <map> moramo nujno definirati atribut name="", ki potem sliki z atributom usemap="" jasno določa, da mora uporabiti ta zemljevid in ne enega tretjega.

Značka <area> določa področje povezave, ki lahko deluje, kot dodatna razlaga, če ji določimo atribut title="".

shape=rect coords=162,151,232,261 določa obliko pravokotnika (shape – oblika; rect – pravokotnik; coords – koordinate). Kot koordinate moramo določiti dve točki in sicer čisto zgornjo-levo točko (162 – odmik od levega roba slike; 151 – odmik od zgornjega roba slike) in pa čisto spodnjo-desno točko (232 – levi odmik; 261 – zgornji odmik).

Kako dobiti točke? Če uporabljate Windowse, odprite sliko v Slikarju (paint). Ko greste z miško čez sliko se vam v spodnjem desnem kotu stalno spreminjata dve številki. Ti dve številki uporabite, kot koordinate.

V atribut href="/" vpišemo povezavo.
Vsi vodiči so na voljo BREZPLAČNO!
Pišite mi

Želite mnenje ali pomoč pri vašem projektu?

Pišite mi in bom pomagal, kakor bom v tistem trenutku lahko.