MAP tag használata
2013.10.04. 15:20
Ez tulajdonképp ugyan az, mint amikor Photoshopban linkeled be a fejléced menüpontjait vagy más egyéb dolgot. Csak itt a HTML kódban neked kell megadnod a kép koordinátáit. De nem kell megijedni, már erre is van online generátor. :)
De hogy lássátok miről beszélek, itt egy demó. Itt a virogok fejei vannak belinkelve, mind a saját honlapomra mutat:
Ez egy HTML kódból és egy CSS kódból épül fel. A CSS kódban kell megadnod a kép koordinátáit (hogy a linkek hova kerüljenek a képen) ahhoz kerül egy hivatkozási link, ami majd a HTML kódban kell beírni ahhoz a részhez, ahova tartozik, vagyis ahova hivatkozni szeretnél (na, ezt értelmesen megmondtam, de szerintem ez mindenkinek logikus :D).
Na de térjünk arra, hogy hogyan lehet ilyet készíteni.
-
Menj fel erre az oldalra: http://webpresencepartners.com/tools/css-image-map-generator/
-
Itt a SELECT FILES buttonra kattintva kell kiválasztanod a számítógépedről azt a képet, amire hivatkozásokat szeretnél tenni. Ennek sok értelme ugyan nem lesz, igaz majd itt kell ezeket beállítanod, de amikor majd a kódot kéred le (Generated Code) oda viszont annak a képnek az URL címét kell beillesztened a helyére, ebből pedig ugye az következik, hogy a képet fel kell töltened a tárhelyedre. De hogy lássátok miről beszélek:
<div class="map_image" style="background-image: url('IDE JÖN A KÉP URL CÍME');">.
-
A Visual Editor fülre kattintva tudod megadni a hivatkozásokat a képre.
-
A Preview résznél megnézheted a demót.
-
A Generated Code buttonra kattintva pedig megtalálod a kódot. Itt nem kell semmin sem változtatnod, kivéve az URL címen amiről a 2. pontban írtam.
Az elkészült kódot beilleszted a modulodba és kész is vagy. :)
|