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>
easyTooltip.js dosyası eksik oldugundan kod blogu çalışmıyor 🙂 onuda bir yere upload edip link verirsen daha yararlı olacak eline sağlık
Kusuruma bakmayın. Buradan indirebilirsiniz.