Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj17.09.2015, 20:06 (UTC)    
Mesaj konusu: Üstüne geldiğinde çıkan bilgi kutusu

Merhaba arkadaşlar, bir metnin ya da bir url adresinin üstüne geldiği zaman yeni açılan bir kutu nasıl yapılır. Ya da üstüne tıkladığımızda ufak bir bilgi kutusu nasıl yapabilirim?
______________
Teknoanaliz'e hiç girmediniz mi? Hemen girin ve sitenizi düzenleyin!
Mesaj17.09.2015, 20:55 (UTC)    
Mesaj konusu: Re: Üstüne geldiğinde çıkan bilgi kutusu

teknoanaliz yazmış:
Merhaba arkadaşlar, bir metnin ya da bir url adresinin üstüne geldiği zaman yeni açılan bir kutu nasıl yapılır. Ya da üstüne tıkladığımızda ufak bir bilgi kutusu nasıl yapabilirim?


Buna benzer birşey olabilir mi?
Kod:
<script  src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.online").mouseover(function() {;               $('#resimac').css("position","absolute").css("border","1px solid gray");
$("#resimac").html('<img src="'+$(this).attr("rel")+'">');}
).mouseout(function () {
$('#resimac').empty();}
).mousemove(function(e){                           
var x=e.pageX ;
var y=e.pageY ;               
$('#resimac').css("top", y+10);
$('#resimac').css("left", x-30);}
);
});
</script> 
<div id="online">
<a href="#" rel="http://icons.iconarchive.com/icons/ampeross/qetto/64/facebook-icon.png" class="online">Facebook</a>
<a href="#" rel="http://icons.iconarchive.com/icons/ampeross/qetto/64/twitter-icon.png" class="online">Twitter</a>
</div><br />
<div id="resimac"></div> 


Ya da bir diğer kod :


CSS Bölümüne:
Kod:
.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}

.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white;
}

.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */

-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}


İçerik kısmına/sayfalar
Kod:
<div class="imagepluscontainer" >
<img src="http://1.bp.blogspot.com/-NgFHAcyOU_Q/T62LYoIidoI/AAAAAAAAB7c/J4MwhCEE3vs/s1600/yorum.png" style="width:263px; height:199px; z-index:2" />
<div class="desc">
Tüm Blogger eklentilerini , eklentileri.blogspot.com adresinde bulabilir , blogunuza ekleyebilirsiniz..
</div>
</div>


Kodlar üzerinde değişiklik yapıp geliştirebilirsiniz. İyi forumlar dilerim.
______________
Tanrı Yüce Türk'ünü Korusun.
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu