Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj11.01.2011, 08:57 (UTC)    
Mesaj konusu: kücük resimlere tiklayinca resmi büyültmek html kodu

Kod:
  <div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

  <div class="ienlarger"><a href="http://www.google.co.uk/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

  <div class="ienlarger"><a href="http://www.facebook.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

  <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

   <br style="clear:left" />
Mesaj11.01.2011, 08:59 (UTC)    
Mesaj konusu: bu kodta css koduna gelecek

Kod:
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.ienlarger {
   float: left;
   clear: none; /* set to left or right if needed */
   padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
   padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a {
   display:block;
   text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
    position:relative;
}

.ienlarger span img {
   border: 1px solid #FFFFFF; /* adds a border around the image */
   margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span {  /* this is for the large image and the caption */
   position: absolute;
   display:none;
   color: #FFCC00; /* caption text colour */
   text-decoration: none;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px; /* caption text size */
   background-color: #000000;
   font-weight: bold;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 13px;
   padding-left: 10px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span {
   display:block;
   top: 50px; /* means the pop-up's top is 50px away from thumb's top */
   left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
   z-index: 100;
   
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add 
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */   

/* If you want the pop-up open above the thumb, remove the top: 50px; and add 
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */   

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
   width: 150px; /* enter desired thumb width here */
   height : auto;
}

/* smart image enlarger ends here */

</style>

Mesaj11.01.2011, 09:02 (UTC)    
Mesaj konusu: üstte verdigim 2 kod

sayin arkadaslar cogumuzun aradigi bu kodu buldum ve sizlerle paylasmak istedim html kodundaki resim uslarini silip kendi resim urlarinizi ekleyin altindaki css koduna hic dokunmadan css style koduna ekleyin ve kücük resimleriniz bu sekilde yabnda acilan bir kutu ile büyüyecektir selamlar
Mesaj11.01.2011, 18:40 (UTC)    
Mesaj konusu:

Lütfen kodlarınızı aşağıdaki başlıkta paylaşınız.

http://www.bedava-sitem.com/forum/viewtopic.php?t=165478

______________
Mesaj13.01.2011, 22:11 (UTC)    
Mesaj konusu:

2.ci Eklediğiniz Kod Ne işe yarıyo Ben Siteme Ekledim Ama Hiç Birşey Gözükmedi.
Önceki mesajları göster:   


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