card
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.

Bu Yazıyı Paylaş

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

  1. özge dedi ki:

    DW site yapıyorum yapmaya calısıyorum aslında ögrenciyim daha ama linkin üzerine gelince resim acılan kodu istiyorum hemn yardım ederseniz sevirim lütfen 🙁

  2. Ayben Şensoy dedi ki:

    Windows 10 yükledim. Etkinleştirilmiş değil. Fare imleci, ekran üzerinde, herhangi bir yere geldiğinde, imlecin yanında, küçük bilgilendirme kutucuğu açılıyor. Gıri renkli ve küçük siyah yazılı bir kutucuk. Bu fare imlecinin yanında açılan bilgilendirme kutucuğu, İnternet Explorer, Microsoft Edge, Google Chrome, ”Windows 10 Posta Uygulaması”nda da açılıyor. Bu bilgilendirme kutucuğunun açılmasını nasıl engelleyebilirim. Teşekkür ederim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla