Jump to content
Forumu Destekleyenlere Katılın ×
Paticik Forumları
2000 lerden beri faal olan, çok şukela bir paylaşım platformuyuz. Hoşgeldiniz.

resmi ön planda göst erme (web).


Seele

Öne çıkan mesajlar

baslik pek aciklayici olmadi :). olay su elimde bir resim var bu resmi site acildiginda ön planda göstermek. Lightbox tarzi gibi yani burda resimlere tiklayinca arkaplan hafif karariyor iste ona benzer olayi site acilirken yapmayi istiyorum. sorun resmi üzerinde linkler olacak yani sirf resim degil html sayfasi gibi. her bir kösesinde baska bir link. aklima javascript geliyor ama hic bildigim örnek yok :(
Link to comment
Sosyal ağlarda paylaş



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

// Elementleri ortalamak icin fonksiyon.

$.fn.center = function (axis) {
this.css("position","absolute");
if(axis == 'x'){
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
} else if(axis == 'y') {
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
} else {
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
}
return this;
}

// Esas olayin basladigi yer.
$("#overlay").width($(window).width()).height($(window).height()).center().css("opacity",0.8).show();
$("#overlay-text").center().fadeIn();

// overlay'e ya da overlay-text'e tiklaninca da ikisini de gizlesin.

$("#overlay").click(function(){
$("#overlay").fadeOut();
$("#overlay-text").fadeOut();
});


$("#overlay-text").click(function(){
$("#overlay").fadeOut();
$("#overlay-text").fadeOut();
});


});
</script>

</head>
<body>
<div id="overlay" style="position:absolute; display:none; background-color:#000">

</div>
<div id="overlay-text" style="position:absolute; display:none; background-color:#FFF; padding:20px;">
<a href="">Haci naber?</a>
</div>
</body>
</html>




Html olarak kaydedip deneyebilirsin.
Link to comment
Sosyal ağlarda paylaş

×
×
  • Yeni Oluştur...