Tooltip na mapiranoj povrsini

[stefendoza]

Postovanje imam jednu sliku koji sam mapirao. Zelim da postavim tooltip na mapiranu povrsinu. Evo recimo kako to sve izgelda:

Dakle ovo je map tag i area tag kojom obuhvatam neku povrsinu

Code:

<map name="planetmap">
<area shape="circle" coords="418,545,20" alt="Beograd" href="tb.htm"/>
<area shape="rect" coords="0,0,82,126" alt="Sun" href="bl.htm"/>
<area shape="circle" coords="124,58,8" alt="Venus" href="pd.htm" />
</map>

Evo mog css koji predstavlja tooltip

Code:

*{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
a:hover {background:#ffffff; text-decoration:none;}
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:250px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}

E sad taj tooltip se poziva jednostavno ovako:

Code:

<a href="#" class="tooltip">Tooltip<span>Ovo je tooltip<img src="tooltip.jpg"></span></a>

Dakle kad se predje misom preko ovog "Tooltip" otvara se kao mali box i ispise "Ovo je tooltip" kao i stampa mi slicicu tooltip.jpg. Znaci ovo sve radi kada radim sa nekim linkom ali kako ovo da primenim na ovu moju area povrsinu koju sam oznacio? Ima neko ideju?

[kecko]

Probaj dodati area class="tooltip"
i u css
area.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:250px;}
area.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}
Nisam nešto previše experimentirao s time, ali mislim da bi ovo moglo funkcionirati

[stefendoza]

Ih probao vec ali ne ide, totalno cudan tag ovaj <area> prijatelju, dakle nece to raditi ! :(

[kecko]

probaj mu dodati i href="#"

[stefendoza]

ne moze to :)) jer mi treba link da me vodi na odredjenu stranicu, ali ako tako uradim a onda bih morao da napisem ovako <a href="stranica.html"><area=....> </a> u tom slucaju mi automatski odstampa taj tooltip negde na stranici tako da ... ebena situacija i cini mi se da ovo nece moci bez jquery-ja :(

[kecko]

Ako ti nije problem upoadaj negdje sajt, mislim html css i js, pa ću pogledat, ovak na pamet mi je bezveze pogađat.

[stefendoza]

(03-05-2011 07:44 AM)kecko Wrote:  Ako ti nije problem upoadaj negdje sajt, mislim html css i js, pa ću pogledat, ovak na pamet mi je bezveze pogađat.

Evo saljem ti primjer problema koji ne mogu da rijesim. Mapirao sam centralni dio slike, kada predjes misom preko "PHP" treba da se pokrene tooltip. CSS je u head dijelu nisam pravio posebno da ne komplikujem.

[kecko]

Daj ti meni pošalji i primjer sa nekim najobičnijim linkom odmah i kako unutra radi. Da vidim što točno želiš.

[stefendoza]

(03-05-2011 06:48 PM)kecko Wrote:  Daj ti meni pošalji i primjer sa nekim najobičnijim linkom odmah i kako unutra radi. Da vidim što točno želiš.

Evo ti jedan primjer tooltipa kad predjes misom preko linka kako se pojavljuje prozorcic sa nekim obavjestenjem. Ja hocu recimo isto tako samo kad predjem misom preko te mapirane povrsine.