jQuery ile Bilgi Baloncukları Oluşturma

Bu aralar jQuery ile yakından ilgileniyorum ve yararlı gördüğüm sizlere bir şeyler katabilecek,yararım dokunacak jQuery nimetlerinden kodlar paylaşıyorum.Bugün ise jQuery ile bilgi baloncukları oluşturmayı anlatacağım ve demo link ekleyip canlı olarak test etmenizi sağlayacağım.

Araştırdığım sitede basit ve detaylı kod olarak 2 ayrı kod vermiş.İlk kodun sizi tatmin etmeyeceğini bildiğim için 2.kodu sizlerle paylaşacağım.

Öncelikle kodumuzun ne işe yaradığına kısaca bir kez daha değinelim.Bu kod sayesinde tanımladığımız yazının üzerine geldiğimizde ufak bir pencere daha açılıyor ve tanımladığımız yazı ve resim beliriyor.

Dilediğiniz gibi değiştirebileceğiniz kodları veriyorum ;

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Nazım Mert Bilgi – jQuery Bilgi Baloncukları</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script>
<script type=”text/javascript” src=”easyTooltip.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#link”).easyTooltip({
useElement: “icerik”
});
});
</script>
<style>
#easyTooltip{
margin:0 10px 1em 0;
width:250px;
padding:8px;
background:#fcfcfc;
border:1px solid #e1e1e1;
line-height:130%
}
#easyTooltip h3{
margin:0 0 .5em 0;
font:14px Arial bold, Helvetica, sans-serif;
text-transform:uppercase
}
#easyTooltip p{margin:0 0 .5em 0}
#easyTooltip img{
background:#fff;
padding:1px;
border:1px solid #e1e1e1;
float:left;
margin-right:10px
}
#icerik{display:none}
</style>
</head>
<body>
<a href=”#” id=”link”>Nazım Mert Bilgi ?</a>

<div id=”icerik”>
<h3>Nazım Mert Bilgi</h3>
<img src=”https://lh4.googleusercontent.com/-waABi549iow/AAAAAAAAAAI/AAAAAAAAAEs/uEHmIJmvXPo/s120-c/photo.jpg” />
<p>nazimmertbilgi.com Her telden yazılar içeren bir blog.</p>
<ul>
<li>WordPress ve</li>
<li>Teknoloji</li>

</ul>
</div>
</body>
</html>

 

DEMO  / Kodları indirmek için ; İndir 

Posted by Nazim Mert Bilgi

Adım Nazım Mert, soyadım ise Bilgi. 98 yılında Karaman'da doğdum, 2011 yılından itibaren Antalya'da ikâmet ediyorum. Yazılım ilmine olan merakımı 2013'de fealiyyete geçirdim ve 2015 yılı yazında Bilge Adam Akademi'den "Üstün Başarı" ve "Microsoft Certified Solution Developer" ünvanıyla mezun oldum. 2011 yılından itibaren ise, siz değerli ziyaretçilerimi en iyi içeriği sunabilmek için, bu blog'da bazı gözlemlerimi ve bazı ilimleri paylaşıyorum.

2 thoughts on “jQuery ile Bilgi Baloncukları Oluşturma”

  1. easyTooltip.js dosyası eksik oldugundan kod blogu çalışmıyor 🙂 onuda bir yere upload edip link verirsen daha yararlı olacak eline sağlık

Comments are closed.