2008-08-24 22 views
7

Resimim var ve üzerinde logolar var (bu bir harita), kullanıcı logosunun üzerine fareyi hareket ettirdiğinde o logonun konumuyla ilgili bilgi içeren küçük bir kutu açılır penceresine sahip olmak istiyorum.Resimdeki araç ipuçları

Bunu bir javascript çerçevesi kullanmadan yapabilir miyim, öyleyse, böyle bir şeyi yapmama izin verecek küçük kitaplıklar/komut dosyaları var mı?

cevap

8

Evet, bunu Javascript olmadan yapabilirsiniz. Böyle başlık özellikler sayesinde bir HTML resim haritası kullanın:

<img usemap="#logo" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"> 
<map name="logo"> 
<area shape="rect" href="" coords="52,42,121,65" title="Stack"> 
<area shape="rect" href="" coords="122,42,245,65" title="Overflow"> 
</map> 

yığın taşması logosu bir area etiketi kullanarak iki kelimelerin her biri için bir dikdörtgen tanımlar image map, ifade eder. Her area öğesinin title öğesi, tarayıcıların genellikle bir araç ipucu olarak gösterdiği metni belirtir. shape özniteliği ayrıca bir daire veya çokgen de belirtebilir.

Nitekim
5

Tek bir görüntü, tarayıcıya içindeki logoların anlamsal bilgilerini tek başına vermez. Koordinatları sağlamak için image map kullanabilirsiniz. Araç ipuçlarını elde etmek için her bağlantıya bir title özniteliği uygulayın. Daha karmaşık araç ipuçları için (stil, çoklu çizgiler vb. Gibi), UniTip gibi standart olmayan bir şeye ihtiyacınız olacaktır.

4

MooTools bunun için şık bir betik vardır. Bakınız MooTools Tips. HTML'de de hafiftir.

İşte 1.11 sürümünün demo.

7

title özniteliği, en doğru çözümdür ve doğru şekilde desteklemeyen kullanıcılara yönelik olarak ve ayrıcalıklarını incelikle inceler.

3

Mootools bu
web sayfanıza herhangi bir öğeye işlevsellik eklemek için olanak sağlayan birçok çerçeveler
biridir. İşte küçük bir öğreticinin bağlantısı.
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips

Mootools gerçekten çerçevenin kopyalama yapıştırma türü değil,
o verilen kod ve bazı mükemmel örneklerle
rulo kendi çözümü üzerinden bakmak için teşvik eder.

2

Javascript widget'ını http://www.taggify.net/ adresinden deneyebilirsiniz. Komut dosyası resmin parçası için araç ipuçları eklemenize izin verir - kullanıcı, bölgedeki fareyi fotoğrafın üzerine getirdiğinde betik açılır pencereleri, bölge etrafındaki kenarlığı çizer ve diğer kısımları keser. Fotoğraftaki insanları işaretlemek için harika bir şey. http://www.taggify.net/demo.aspx

1

'daki demo'ya bakın, basit araç ipucu için title özniteliğini kullanabilirsiniz. Neredeyse tüm DOM nesneleri üzerinde çalışır.

İlgili konular