Tooltip na mapiranoj povrsini

slavkan · 01. 05. 2011.

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

Kôd:

<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

Kôd:

*{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:

Kôd:

<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?

Milos Vukotic · 01. 05. 2011.

Sad ćeš reći "nisam to pitao", ali imaš gomilu jquery plugin-ova upravo za ovo

Npr. qtip: http://craigsworks.com/projects/qtip...ition/imagemap

Ili instaliraj ili čačkaj po njihovom kodu da vidiš kako su to riješili. HTH

slavkan · 01. 05. 2011.

hehehe, pa pogledacu ako ovo ne rijesim

Nesto mi je stalo da ovo naguram da radi, jer je jednostavno. Hvala u svakom slucaju

tripatwhat · 06. 05. 2011.

Ceo ovaj stil koji imas primeni na mapu. Daj mapi neki id onda umesto a u stilu stavi taj id i to bi trebalo da uradi posao.

01. 05. 2011.	#1
slavkan profesionalac Professional Datum učlanjenja: 29.08.2010 Poruke: 201 Hvala: 10 640 "Hvala" u 14 poruka	Tooltip na mapiranoj povrsini 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 Kôd: <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 Kôd: {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: Kôd: <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?

01. 05. 2011.	#2
Milos Vukotic Knowledge base Wrote a book Datum učlanjenja: 07.06.2005 Lokacija: Neđe ođe... Poruke: 1.198 Hvala: 339 688 "Hvala" u 178 poruka	Sad ćeš reći "nisam to pitao", ali imaš gomilu jquery plugin-ova upravo za ovo Npr. qtip: http://craigsworks.com/projects/qtip...ition/imagemap Ili instaliraj ili čačkaj po njihovom kodu da vidiš kako su to riješili. HTH __________________ Чак Норис може да си ги врзе врвките на чевлите со стапалата.

06. 05. 2011.	#4
tripatwhat novi član Datum učlanjenja: 21.03.2010 Poruke: 4 Hvala: 0 0 "Hvala" u 0 poruka	Ceo ovaj stil koji imas primeni na mapu. Daj mapi neki id onda umesto a u stilu stavi taj id i to bi trebalo da uradi posao. __________________ AdriaHost.rs - Pouzdan poslovni hosting za vas, redovan backup, customer friendly support, besplatna migracija sajtova, registracija domena i još puno toga...

01. 05. 2011.	#3
slavkan profesionalac Professional Datum učlanjenja: 29.08.2010 Poruke: 201 Hvala: 10 640 "Hvala" u 14 poruka	hehehe, pa pogledacu ako ovo ne rijesim Nesto mi je stalo da ovo naguram da radi, jer je jednostavno. Hvala u svakom slucaju