Image mapping tutorial

[Loud]

Image mapping tutorial


Sigurno se dosta vas pita kako napraviti banner sa više linkova na sebi, kao što postoji na našem forumu. Postupak je jednostavan samo pažljivo sljedite upute!

1. Uzmite svoj banner i idite na
Image mappin editor online( http://www.maschek.hu/imagemap/imgmap )

Tu uploadajte svoj banner, pritisnite accept i krenite sa označavanjem područja na koje ćete moći klikati jedno po jedno...

Popunjavate samo dva područja, a to je HREF i ALT... U href upisujete link do kojeg će voditi klik, a u alt naziv linka (npr. Forum, Portal i sl.)

2. Kada ste završili, pritisnite dole na Code i izbacit će vam potreban kod...
Nešto kao:

Kod:


<map id="imgmap2010322101214" name="imgmap2010322101214"><area shape="rect" alt="" title="" coords="6,3,23,23" href="/" target="" /><area shape="rect" alt="" title="" coords="25,3,50,25" href="/" target="" /><area shape="rect" alt="" title="" coords="56,1,83,26" href="/" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>


3. Idite u overall_header_new template (samo u PunBB i phpBB2 verziji moguće)
pronađite ovaj dio:
Kod:
<a href="/{U_INDEX}" id="pun-logo"><img src="/{LOGO}" alt="{L_INDEX}" /></a>


i sada učinite sljedeće... unutar tog dijela morat ćete ubaciti i usemap="#kod", a kod koji ćete koristiti vam je iz map id= iz koda kojeg ste mapirali... dakle u mom slučaju to bi sada izgledalo ovako:

Kod:

<a href="/{U_INDEX}" id="pun-logo"><img src="/{LOGO}" alt="{L_INDEX}" usemap="#imgmap2010322101214"/></a>

4. Odmah nakon tog koda zaljepite cijeli gore navedeni kod.. Dakle ovako:

Kod:


<a href="/{U_INDEX}" id="pun-logo"><img src="/{LOGO}" alt="{L_INDEX}" usemap="#imgmap2010322101214"/></a><map id="imgmap2010322101214" name="imgmap2010322101214"><area shape="rect" alt="" title="" coords="6,3,23,23" href="/" target="" /><area shape="rect" alt="" title="" coords="25,3,50,25" href="/" target="" /><area shape="rect" alt="" title="" coords="56,1,83,26" href="/" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>


5. Spremite promjene i vaš banner sada je mapiran i na njemu imate više linkova...

Uživajte!

Tutorial by: MEX

[VrTunA Najmladji]

ddddddd