0
Kayıt Ol

resimin üstüne geldiğinde büyütme ??

3

●

3.141

  • 17-07-2010, 23:43:04
    #1
    pckurdu
    pckurdu
    arkadaşlar bi site tasarlıyorum ürünler kısmına resimler ekledim ufak resimler var ben istiyorumki resimlerin üstüne gelindiğinde resimler büğüsün örn:hepsiburada

    gibi nasıl yapabilrm?
  • 19-07-2010, 09:09:51
    #3
    justices
    justices
    pckurdu adlı üyeden alıntı: mesajı görüntüle
    arkadaşlar bi site tasarlıyorum ürünler kısmına resimler ekledim ufak resimler var ben istiyorumki resimlerin üstüne gelindiğinde resimler büğüsün örn:hepsiburada

    gibi nasıl yapabilrm?
    nasıl büğür bende bilmiyorum ama javascript kullanırsan büyüyebilir o
  • 03-08-2010, 10:42:27
    #4
    batuhankok
    batuhankok
    Resmin üzerine mause ile geldiğinizde güzel bir efektle büyüyor, mause çekince küçülüyor diyorsan:

    </head> tagından önce aşağıdaki kodu ekleyin

    <style type="text/css">

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}

</style>

<script type="text/javascript" src="ex.js">

</script>
    ex.js dosyası oluşturup içine aşağıdaki kodları kopyalayın

    ex.js dosyası oluşturup içine aşağıdaki kodları kopyalayın

if (document.images){
 (function(){
  var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
  var expConIm = function(im){
   im = im || window.event;
   if (!expConIm.r.test (im.className))
    im = im.target || im.srcElement || null;
   if (!im || !expConIm.r.test (im.className))
    return;
   var e = expConIm,
   widthHeight = function(dim){
    return dim[0] * cos + dim[1] + 'px';
   },
   resize = function(){
    cos = (1 - Math.cos((e.ims.jump / times) * Math.PI)) / 2;
    im.style.width = widthHeight (e.ims.w);
    im.style.height = widthHeight (e.ims.h);
    if (e.ims.d && times > e.ims.jump){
     ++e.ims.jump;
     e.ims.timer = setTimeout(resize, speed);
    } else if (!e.ims.d && e.ims.jump > 0){
     --e.ims.jump;
     e.ims.timer = setTimeout(resize, speed);
    }
   }, d = document.images, i = d.length - 1;
   for (i; i > -1; --i)
    if(d == im) break;
   i = i + im.src;
   if (!e.ims){
    im.title = '';
    e.ims = {im : new Image(), jump : 0};
    e.ims.im.onload = function(){
     e.ims.w = [e.ims.im.width - im.width, im.width];
     e.ims.h = [e.ims.im.height - im.height, im.height];
     e (im);
    };
    e.ims.im.src = im.src;
    return;
    }
   if (e.ims.timer) clearTimeout(e.ims.timer);
   e.ims.d = !e.ims.d;
   resize ();
  };

  expConIm.ims = {};

  expConIm.r = new RegExp('\\bexpando\\b');

  if (document.addEventListener){
   document.addEventListener('mouseover', expConIm, false);
   document.addEventListener('mouseout', expConIm, false);
  }
  else if (document.attachEvent){
   document.attachEvent('onmouseover', expConIm);
   document.attachEvent('onmouseout', expConIm);
  }
 }();
}
    Kullanımı :

    <p>
<img class="expando" border="0" src="amster2.jpg" width="100" height="75">
<img class="expando vacation" border="0" src="amster3.jpg" width="100" height="66">
<img class="expando" border="0" src="amster4.jpg" width="100" height="75">
</p>

<p>
<img class="expando cat" border="0" src="cat.png" width="200" height="88">
</p>