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ş.Ümraniye escort, Kadıköy escort İ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 

Bu içeriklerde ilginizi çekebilir

2 yorum

  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