Tutorijali


You are not connected. Please login or register

Image mappin tutorial - više linkova na jednoj slici

Go down  Message [Page 1 of 1]

Admin


Admin
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

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:

Code:
<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:

Code:
<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:

Code:
<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:

Code:
<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

www.tutorial.forum.st

View user profile http://tutorials.your-talk.com

Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum