Ingrandire le immagini al passaggio del mouse


Tutorial Ingrandire le immagini al passaggio del mouse

Messaggio Da CG92 Sab 19 Nov 2011 - 18:06

Ingrandire le immagini al passaggio del mouse


Foglio di stile CSS

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Immagini & Colori ► Foglio di stile CSS e aggiungiamo:
Codice:
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*/
}

Il codice Javascript

Ora andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice Javascript, assicuriamoci che la gestione del codice JS sia attivata e creiamone uno nuovo:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:

    /* Expando Image Script ©2008 John Davenport Scheuer
      as first seen in http://www.dynamicdrive.com/forums/
      username: jscheuer1 - This Notice Must Remain for Legal Use
      */

    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);
      }
     })();
    }


Come selezionare le immagini da ingrandire

Ogni qual volta che inserite un'immagine nel vostro forum, basta inserire l'attributo class="expando", ad esempio:
Codice:
<img class="expando" border="0" src="LINK DELL'IMMAGINE QUI" width="VALORE LARGHEZZA" height="VALORE ALTEZZA">




Ultima modifica di Niko il Lun 1 Mar 2021 - 21:44 - modificato 1 volta. (Motivazione : Aggiornamento)
CG92
CG92
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 30
Messaggi : 2325
Località : Angri

Visualizza il profilo http://cg92.forumattivo.it/
CG92 è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto


 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.