Javascript ile Yazı Üzerine Gelince Açılan Baloncuklar :)

Tarih: Kasım 25th, 2008 | Yazar: Ertuğrul Erkan | Kategori: Javascript | Etiketler: ajax, balloon, Balloon Tooltip, balon, baloncuk, css, etiket, html, java, javascript, link, Rich HTML Balloon Tooltip | 2 Yorum »

Merhaba arkadaşlar. Son zamanlarda bir projem için böyle bir işe bulaştım. Baloncuk olayındaki ilhamı ise Blograzzi den aldım Sonra birkaç araştırma yaptım. Bu baloncuk olayı css ile de yapılabiliyor. Yanlız javascript kullanmak isteyenler bu yöntemi uygulayabilirler.

Kısaca ne olduğundan bahsetmemiz gerekirse bir yazı belirliyorsunuz ve bu yazı üzerine gelince yine belirlediğiniz bir yazı baloncuk şeklinde gösteriliyor. Tabi bu illa yazı olarak diye birşey yok. Baloncuk içine form yerleştirilebilir. Hatta sitenin ta kendisini de koymak mümkün…

Örnek olarak yukarıda ki resmi verebiliriz. İşte böyle bir olay yapmak istiyorsanız aşağıdaki adımları uygulayalım;

İlk olarak bilgisayarınızı kaydetmeniz gereken birkaç dosya var. balloontip.js ve balloontip.css linklerine tıklayın. Açılan kodları not defterine kaydettikten sonra aynen bu isim ve uzantılar ile kayıdedin. Javascript ile yaptığımızdan dolayı bazı avantajlar mevcut. Bunlardan biri yukarıda gördüğünüz gibi linkin olduğu yere göre ok çıkartması. Alt ve üst olmak üzere iki adet;

Bu ok resimlerini js ve css dosyalarınız ile aynı dizine kayıt edin. Eğer farklı bir yere örneğin images adlı klasöre koyacaksanız css ve javascript şu kısımları şu şekilde düzenlemeniz gerekir;

arrowdown.gif veya arrowup.gif şeklinde adresleri klasöradı/arrowdown.gif veya klasöradı/arrowup.gif olarak düzeltip, kaydedin…

Şimdi işin kod kısmına geldik. Önce yapmanız gereken bu js ve css dosyalarını kendi sayfanız içerisinde açmanız. Sayfanızın içine;

< link rel="stylesheet" type="text/css" href="balloontip.css" /> < script type="text/javascript" src="balloontip.js" > < / script>

Kodlarını head etiketinden hemen önce ekleyin. Tabi ilk olarak benim bıraktığım boşlukları silerek… Bundan sonrası çok kolay. Şimdi size örnek vererek göstereceğim;

< a rel="balloon1">Buraya Başlık< /a> < div id="balloon1" class="balloonstyle" style="width: 350px; background-color: lightyellow"> Buraya da baloncuk içerisinde açılacak yazı gelecek... < /div>

Yine boşlukları sildikten sonra kodu body etiketinden hemen sonra ekleyin ve denemenizi yapın. İşte bu kadar basit. Eğer sorunuz olsursa aşağıya yazabilirsiniz…

Herkese iyi günler, iyi çalışmalar…

Benzer Yazılar;

coded by nessus