Forum
Aktif konular
Üyeler
Kurallar
Arama
Javascript İle Açıklama Balonu Javascript İle Açıklama Balonu
-
Selamlar,
Snap shotsları bilirsiniz, linkin üstüne geldiğinde ufak bir pencere açılır ve sitenin ufak görüntüsünü verir (veya resim, video vs)
Benim yapmak istediğim bunun çok daha basidi, yine bir kelimenin üstüne gelindiğinde ufak bir pencere açılıp kısa bir açıklama balonu oluşturmak. fakat bunu nette türkçe sayfalarda bulamadım bir türlü. (Bir kaç bulduğum kod ise çok uzun geldi,) Mümkün olan en kısa kod öneriniz ne olabilir. (JQuery kütüphanelerinden de olabilir)
Yardımlarınız için teşekkürler. -
Kodlar aşağıdaki gibidir anlamadığın yer olursa sorarsın. Hiçbir yerde denemedim direkt olarak burada yazdım ama yanlış bir şey yok sanırım, çalışmazsa söylersin bakarız dostum.
function kelimeGoster(gosterilecekKelime) {
document.getElementById("divIDsi").style.display = "block";
document.getElementById('divIDsi').innerHTML = gosterilecekKelime;
}
function kapat() {
document.getElementById("divIDsi").style.display = "none";
}
< a on mouse over = ' kelimeGoster'wking'; ' on mouse out = ' kapat; ' hr ef="#" > ali < /a >
< div id="divsi" >
< /div >
İstersen kelimeGoster fonksiyonuna top, left, right, bottom verip sayfanın neresinde açılacağını da
belirleyebilirsin. Hatta mouse koordinatlarını alıp ona göre de çıkarabilirsin.
Not: Tagler arasındaki boşlukları kaldır.
Metin editörü sıçmış durumda yazdığım kodları bok etti :| -
edit : hep sıctık icine. opera & chrome da sorun var, ya da bende sorun var.
-
Yok Deniz olmuyo işte abi, gosterilecekKelime('wking'); ve kapat(); diye yazması lazım ama editör otomatik olarak parantez açma kapamayı siliyor :| Neyse artık arkadaş yazdıklarımızdan anlayıp yapar sanırım...
Ayrıca div ve a elementleri script içinde olmaz html içinde olur iyi bak kodlarıma :D Yanlış kopyalamışsın :P -
maille atabilir misin?
-
Maile gerek kalmadı, denedim gönderdiğini. Oluyor ama istediğim gibi değil. Aslında istedğim şey tam olarak şu sayfada ki gibi.
http://www.vegabit.com/Examples/different-elements.html
Fakat orada bir sorun var, innerHtml önceden tanımlanmış, ben ise nesneden aktarmak istiyorum.
Yani sizin verdiğiniz örnekteki gibi. FAkat fonksiyonları çok uygun değil gibi, yada ben çözemedim desem daha doğru olur.
-
maskelisinek bunu yazdı:
-----------------------------Maile gerek kalmadı, denedim gönderdiğini. Oluyor ama istediğim gibi değil. Aslında istedğim şey tam olarak şu sayfada ki gibi.
http://www.vegabit.com/Examples/different-elements.html
Fakat orada bir sorun var, innerHtml önceden tanımlanmış, ben ise nesneden aktarmak istiyorum.
Yani sizin verdiğiniz örnekteki gibi. FAkat fonksiyonları çok uygun değil gibi, yada ben çözemedim desem daha doğru olur.
-----------------------------
Hoca kaynaktan çalsana yahu. -
innerHtml değiştiremiyorum, ordaki fonksiyonda baştan tanımlanmış, ben her linke ayrı açıklama eklemek istiyorum. :))
-
http://cssglobe.com/lab/tooltip/01/
en basitleri bunlar
tooltip gözükcek linke class="tooltip" demen yeterli.
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
-
Sağol, bu işimi görecek gibi. ;)
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla