IKTeroak

Aspaldiko partez ez dut ezertxo ere egin CSSarekin jolastuz, baina CSS Play web orrian egiten dituzten gauzak ikusita, ezin izan dut nire burua errepremitu eta Euskal Herriko mapa turistiko bat egitea otu zait. Garik barka nazala .

Mapa hau egiteko CSSa besterik ez dut erabili eta nabigatzaile guztientzat baliagarria delakoan nago. Kontrakoa bada, iruzkinetan adierazi.

Nik Euskal Herriko mapa batekin egin dut lan hau, baina berdin-berdin egin daiteke beste edozein irudiaren gainean (giza gorputzaren atalak azaltzeko, landareen atalak adierazteko…). Informazioa lortzeko gune ezberdinak erabili ditut, baina Ihesi “Euskal Herriko gida” izan da iturririk garrantzitsuena. Gainera, sagua puntuen gainean jartzerakoan zabaltzen den leihatilaren gainean klik egiteak gida horretara garamatza.

Nik egindako mapa ikusteko klik egin hementxe bertan edo goiko argazkian

Antzeko zer edo zer egiteko asmoa baduzu, hauxe da nik erabili dudan kodea:

CSS

.eh {padding:0; margin:0; list-style-type:none; background:#fff url(/images/euskalherria.gif); width:435px; height:375px; margin:100px 25px 100px 25px; position:relative;}
.eh li a {text-indent:-999px; display:block; width:8px; height:8px; background:#ffcc00; position:absolute; line-height:8px;}
.eh li a em {visibility:hidden; position:absolute;}
.eh li a.dg {top:85px; left:360px;} /*dg= Donibane Garazi eta 85 - 360 dira puntuaren "kordenatuak" argazkian.*/
.eh li a.ma {top:70px; left:410px;} /*ma= Maule eta 70 - 410 dira puntuaren "kordenatuak" argazkian.*/
.eh li a.ba {top:10px; left:305px;}
.eh li a.ir {top:155px; left:280px;}
.eh li a.or {top:110px; left:211px;}
.eh li a.ga {top:152px; left:112px;}
.eh li a.bi {top:50px; left:75px;}
.eh li a.en {top:75px; left:30px;}
.eh li a.el {top:75px; left:130px;}
.eh li a.le {top:35px; left:120px;}
.eh li a.am {top:115px; left:60px;}
.eh li a.ae {top:220px; left:140px;}
.eh li a.ag {top:160px; left:170px;}
.eh li a.ei {top:75px; left:165px;}
.eh li a.do {top:55px; left:230px;}
.eh li a.tu {top:320px; left:310px;}
.eh li a.ar {top:120px; left:260px;}
.eh li a:hover {background:#600; text-indent:0; height:1.2em; font-size:1em; color:#fff; line-height:1em; padding:2px 10px; width:90px;}
/* hack for IE5.x */
* html .eh li a:hover {width:110px; height:1.5em; width:90px; height:1.2em;}
.eh li a:hover em {visibility:visible; margin-left:5px; background:#fff; border:1px solid #600; width:300px; color:#600; padding:25px;font-style:normal; top:-135px; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; letter-spacing:1px; line-height:1.5em;}
/* hack for IE5.x */
* html .eh li a:hover em {width:200px; width:150px;}
.eh li a:hover em img {border:1px solid #000; display:block; margin-bottom:10px;}
.eh li a:hover em span {display:block; width:0; height:0; overflow:hidden; border:15px solid #fff; border-width:15px 0 15px 15px; border-left-color:#600; position:absolute; left:0; top:128px;}
/* hack for IE5.x */
* html .eh li a:hover em span {width:30px; height:30px; width:0; height:0;}

(X)HTML

<ul class="eh">
<li><a class="ma" href="http://www.argia.com/gida/maule1a.htm">Maule<em><img src="/images/maule.jpg" alt="Argazkiaren izena" title="Argazkiaren izena"/>Hemen, jarri nahi dugun testua idatziko dugu.<span></span></em></a></li>

Eta horrela, banan-banan kokatu nahi ditugun puntu guztiekin.