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 

Google'den Gelen Aramalar

  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1831 V6upnqHx7663RqZSJBa4AvJCEPN1Zlsz1Qf-EHbWUCR67q4vt8FvwO98Da5JBeE- 740273ffe822d100e08a34ac0acb07904f3546a5&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme

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