Forum'da ara:
Ara


Yazar Mesaj
Mesaj04.02.2010, 14:24 (UTC)    
Mesaj konusu: Wb Production - Resimlerinizi Büyütmek

Merhaba Sevgili Bedava Sitem Ailesi Bs De yeni bir çağın başlayacağını sölemek isterim ilköncelikle.Sizlere Değişik kodlar,tasarımlar sunmaya başlayacağım.
Şimdi Bu Vereceğim Kod Sitenize Resimler koyarsınız ama boyutları küçük olur.Büyük halini görebilmek için Başka bir resim yükleme sitesi açılır.Buna Son vererek güzel bir resim büyütme kodunu sizlerle paylaşıyorumm.

Css Bölümüne :
Kod:
<style type="text/css">



/* 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>



Css kodunda Resim büyüttüğüünüz Zaman Çerçeve içinde olacağı için çerçeve arka planı ve resimin altında yazan yazının rengini fLn değiştirebilirsiniz.Css kodun içindeki

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;

bu yerden


Sayfanıza Yapıştıcağınız Kod İse :

Kod:
  <div class="ienlarger"><a href="http://www.webpaylasimi.tr.gg"><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.webpaylasimi.tr.gg/"><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.webpaylasimi.tr.gg"><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="http://www.webpaylasimi.tr.gg"><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" />



Burdada Kendi Resimlerinizi Yükleyip isimlerinizi değiştirebilirsiniz.İsterseniz Link Bile Verebilirsiniz..

Örn:

<div class="ienlarger"><a href="http://www.webpaylasimi.tr.gg"><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>

üstteki jpg dosyayı resmin küçük boyuttaki hali allttalki ise büyültülmüş haLi.


KOlay GElsin....[/quote]
Mesaj04.02.2010, 16:52 (UTC)    
Mesaj konusu:

Bi Yorum biLe yapaN Yoq Pff...
Mesaj04.02.2010, 20:51 (UTC)    
Mesaj konusu:

Bs milleti nankör be !!
Mesaj04.02.2010, 21:40 (UTC)    
Mesaj konusu:

webpaylasimi yazmış:
Bs milleti nankör be !!


üslubunuza dikkat edin çirkinleşmeyin herkes bunu yorumlamak zorunda değil ...
______________
Mesaj05.02.2010, 07:47 (UTC)    
Mesaj konusu: ..

bence güzel fakat çerçeve resmi ve geçiç efektlerini ben kendim değiştirdim başka bir yerden . süper oldu ama 30dk mi aldı... :XD
Mesaj05.02.2010, 11:36 (UTC)    
Mesaj konusu:

Bu konunun CSS ile bir alakası yoktur.Lütfen online bulduğunuz bir moderatör vasıtasıyla bu konuyu taşıtın.

Saygılar,Mylet

______________

Lütfen Tıklayınız..!!
JooPlus İnternet Yazılımımız B-S'de Yeni Çağ açıcak...
Önceki mesajları göster:   


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