HoverCard.js – Mouse üzerine gelince açılan pencere

Mouse linklerin üzerine gelince div açılması olayı ger zaman olmasa da ara sıra işimize yarayan bir özelliktir. Kimisi açılan div içine menü eklemek ister kimisi de reklam eklemek ister. Bu tarz aklınıza gelebilecek bir çok içeriği mouse linklerin üzerine geldiğinde açılan pencerelere ekleyebilirsiniz. Bu tarz örnekler hazırlamanız  için geliştirilmiş olan birçok jQuery eklentisi mecvut. Bu tarz örnekler sayesinde  çok kolay bir şekilde sitenize mouse üzerine gelince açılan div ekleyebilirsiniz.

Bu yazıda paylaştığımız uygulama mouse linklerin üzerine gelince çerçeve açılmasını sağlayan en gelişmiş örnek diyebilirim. Resim, yazı, link, web sitesi, mail adresi gibi içeriklerin dışında Twitter takip ve Facebook beğen kutusu da eklemenizi sağlıyor.
Prashant Chaudhary’nin geliştirdiği HoverCard eklentisi ile sizlere bir kaç tane örnek hazırladım.

Demo örneklerini Jsfiddle üzerinden eklediğim için js  dosyaları görünmüyor. JavaScript, Css ve Html kodları görünüyor sadece. Bu kodların dışında sayfanıza ayrıca  jQuery ve Hover Card  eklentisinin dosya adreslerini eklemeniz gerekiyor. Download butonundan  HoverCard.js dosyasını temin edebilirsiniz.

Sayfanızın head etiketleri arasına aşağıdaki kodda olduğu gibi Js dosya adreslerini eklemeniz gerekiyor.

  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
 <script type='text/javascript' src="jquery.hovercard.min.js"></script>

Buradaki demoda mouse linklerin üzerine geldiğinde  resim, yazı, e-mail, web site adresi, link gibi açıklamalar çıkıyor.

name: “İsminizi girin”,
link: “Herhangi bir link ekleyebilirsiniz”,
bio: “Hakkınızda birşeyler girin”,
image: “Görünmesini istediğiniz resim url si girin”,
mail: “mail adresi girin”

Buradaki demoda mouse ile linkin üzerine geldiğinizde açılan çerçeve biraz yukarda çıkıyor. Bu yüzden çerçevenin tamamı görünmüyor.

Yazı içindeki herhangi bir kelimenin üzerine mouse geldiği an açılan pencerede Twitter sayfanızın takip edilmesi için bir buton çıkıyor. Mouse kelimenin üzerine geldiğinde div içinde Twitter takip etme butonunun görünmesi için kelimeden önce <label id=”demo-twitter” data-hovercard=”mintikdotcom” > kodunu ve kelimeden sonra da </label> kodunu eklemeniz gerekiyor. Buraya eklediğim mintikdotcom benim Twitter sayfamın id si. Siz kendi sayfanızı eklersiniz bu şekilde.

Bu örnek te Facebook sayfaları için yapılmış. Kullanım şekli Twitter ile  aynı ama buradaki örnek biraz daha gelişmiş. Facebook sayfanızın bazı verilerini de çekiyor. Facebook sayfasından hakkında, web site adresi, sayfa url adresi ve resmini çekebiliyor bu örnek. Kelimelere açılan div eklemek için kelimeden önce <label id=”demo-facebook” data-hovercard=”mintikdotcom”> kodunu ve kelimeden sonra da </label> kodunu eklemeni gerekiyor.

Hover Card uygulamasının diğer örneklerine demo butonunda ulaşabilirsiniz. Kısa yoldan göstermek için bir kaç tane örnek ekleme ihtiyacı duydum. Umarım yeteri kadar açıklayıcı olmuştur.