HTML-ben van egy olyan kód ami egy képre több linket is rá tud helyezni, ezzel remekül lehet menüt, rovatdobozt csinálni, te is biztosan találkoztál már ezzel (1 példa: az MSN magazin bal oldali menüje is ilyen kódot használ), de a profilomon a tartalmak közötti navigációt is ezzel oldottam meg.
<img style="border: none !important;" src="Ide jön a képed direkt linkje" usemap="#NÉV"><!-- HTML by VESTEL -->
<map id="NÉV" name="NÉV">
<area shape="rect" coords="1,2,3,4"
href="1. link">
<area shape="circle" coords="5,6,7"
href="2. link">
<area shape="poly" coords="9,10, 11,12, 13,14, 15,16"
href="3. link">
</map>
A kód csak annyiból áll amit fent láthatsz, de elmagyarázom hogyan működik: először is megjelenítjük a képet a szokásos img tag-el, majd hozzáadjuk a usemap="#NÉV"-et és utána lesz a map tagunk, melynek a nevének és id-jének egyeznie kell az img tag-ban megadott névvel. Tehát a 3 pirossal jelölt NÉV szót átírhatod de mindháromnak ugyanannak a szónak kell lennie és a kettőskereszt maradjon a usemap-nál. Add meg a linkeket amire mutassanak a képrészek. Most jön a legfontosabb része, a kódnak, azoknak a helyeknek a kijelölése ahova a linkek kerüljenek, ezeket a pontokat koordinátákkal kell megadni, de ezt is 3 féle képpen tehetjük meg, van a rect ami téglalapot határoz meg, az első 2 szám a téglalap bal felső sarkának koordinátái, a másik két szám a téglalap jobb alsó koordinátái.
Ha nem téglalapot akarunk hanem kör-t akkor a rect szót cseréljük ki circle-re, ilyenkor elég 3 számot megadnunk, az első 2 szám határozza meg a kör középpontját tehát az oldalától és tetejétől való távolságot, a 3. szám a kör sugarát (átmérő fele), természetesen pixelben.
A harmadik módszer az hogy sokszöget határozunk meg, ilyenkor a rect szó helyére poly-t kell írni, tetszőleges számú csúcsa lehet a sokszögnek, a csúcsok koordinátáit ugyanúgy határozzuk meg, 2 szám határoz meg 1 csúcsot, és akármennyi csúcs lehet. A számokat mindig vessző választja el egymástól, de üthetünk szóközt bármelyik vessző után tetszés szerint. A felső kódban az 1. area a téglalap, a 2. a kör, a 3. pedig a sokszög.
A koordinátákat úgy mérheted le hogy megnyitod a képed paint-ben, kinagyítod annyira hogy látszódjanak a pixelek, átváltasz ceruzára, ráviszed az egeret arra a pontra aminek a koordinátáit tudni akarod és a jobb alsó sarokban kiír 2 számot, ezek lesznek a pont koordinátái.
Egy másik leírás (ahol én is megtanultam):
Thomas Web Műhely
Ha valamit nem értesz kommentelj a cikk alá.
Az ezzel a kóddal készült képeken volt egy 3 px vastag kék keret, ezt a böngésző tette rá, ennek az eltüntetésére kiegészítettem a kódot, már nem lesz keret, ezért írtam a cikk fejlécébe h javítva.
Nincsenek megjegyzések:
Megjegyzés küldése