Expando image script

Salutare tuturor din nou!
Astazi vreau sa va prezint un script foarte frumos pentru prezentarea imaginilor,numit "Expando Image".

Deci,prima data va trebuii sa creeati un nou document numit expando.js .
Pentru asta,trebuie sa creeati prima data un document text nou,si sa scrieti urmatorul cod in el:

Cod:

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[i].jump / times) * Math.PI)) / 2;
    im.style.width = widthHeight (e.ims[i].w);
    im.style.height = widthHeight (e.ims[i].h);
    if (e.ims[i].d && times > e.ims[i].jump){
    ++e.ims[i].jump;
    e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump > 0){
    --e.ims[i].jump;
    e.ims[i].timer = setTimeout(resize, speed);
    }
  }, d = document.images, i = d.length - 1;
  for (i; i > -1; --i)
    if(d[i] == im) break;
  i = i + im.src;
  if (!e.ims[i]){
    im.title = '';
    e.ims[i] = {im : new Image(), jump : 0};
    e.ims[i].im.onload = function(){
    e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
    e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
    e (im);
    };
    e.ims[i].im.src = im.src;
    return;
    }
  if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
  e.ims[i].d = !e.ims[i].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);
  }
 })();
}

Apoi,mergeti sus la File=>Save As si la numele documentului scrieti expando.js ,neaparat la sfarsit sa fie .js

Apoi,aveti urmatorul cod HTML,care trebuie adaugat in sursa paginii pentru a se putea identifica documentul JS:

Cod:

<style type="text/css">

img.expando{
border: none;
vertical-align: top;
}

</style>

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

Inlocuiti in cod expando.js cu link-ul documentului uploadat.
Il puteti pune pe http://psmc.free.fr/ .

Imaginile le puteti adauga folosind acest cod:

Cod:

<img class="expando" border="0" src="LINK IMAGINE" width="100" height="75">

Inlocuti LINK IMAGINE cu linkul imaginii pe care doriti sa aplicati efectul.De asemenea,puteti inlocuii si dimensiunile imaginii(width,height).
Asta a fost tot!

_{Coduri originale de pe http://www.dynamicdrive.com/}

Tutorial acceptat.
Multumim pentru ajutor!

tutorial copiat de pe dynamicdrive.com :
originalul il aveti aici ! ( si mult mai bine explicat , ca de ! e original ! )


http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm

1.Acel site este in engleza,eu am facut tutorialul in romana.
2.Codurile le-am primit de la un prieten,nu aveam de unde sa stiu ca exista si pe acel site.

Si totusi,nu inteleg problema.
Multe coduri sunt gasite pe internet si multi le traduc pentru a face tutoriale .

din punctul meu de vedere chiar nu ma intereseaza de unde l-ai copiat , ci faptul ca nu ai specificat originalul (sursa ! ). stiam ca exista un regulament ( parca ! ) . si ala trebuia respectat ! . e o chestie de bun simt chiar ! asa face un bun coder ! ceilalti traduc sau din engleza si modifica pe ici pe colo mici chestiuni dar nu uita sa isi asume " drepturile " . stiu ca e cool acu sa ii spui la pitzi : " hei iubi, `ete ce site mi-am tras ! " il loc sa te tragi in poza cu o multime de euroi trasi la xerox , dar fa chestia asta pe hi5 si nu aici ! mai suntem cativa pe aici care stim cu ce se mananca programarea web !


later edit : vad ca faci parte din "staff" . si cu asta te lauzi ?

Gata,multumit?
Si as avea o rugaminte,sa continuam discutia in privat,nu trebuie sa spammam forumul cu mesaje inutile .

Discutia se incheie aici,pentru alte detalii poti sa imi dai PM!

MA bag si eu Dar nu cred ca intereseaza pe nimeni de unde a fost luat mai ales ca a fost in engleza si el la tradus in romana , daca administratorii si moderatorii au accept tutorialul inseamna ca e ok

Frumos tutorial.

multumim e foare folositor