Onmouseover slideshow

TonyFavilla

Nuovo Utente
30 Giu 2009
2
0
0
Ciao a tutti
sto cercando di realizzare uno script per avere una sequenza di screenshots animata al passaggio del mouse su una immagine di base, un pò come succede in http://video.libero.it/ (Unico esempio non per adulti che ho trovato :D). I miei 10 screenshots sono nominati foto_0.jpg, foto_1.jpg, ..., foto_9.jpg
Le mie conoscenze di javascript sono veramente scarse, qualcuno riuscirebbe a darmi dei suggerimenti?
 
Ciao lo script non è difficile:

assegna allìevento on mouseover una funzionone js la quale, estrae il campo src dell'immagine
PHP:
document.getElementById("my-pic").src
e lo modifica oppurtamente:
PHP:
document.getElementById("my-pic").src = "image02.gif"
il counter dell'imagine è implementabile in vari modi, il più semplice è estrarre gli ultimi du e caratteri prima del punto (02) ed incrementare
ottenendo 03, concateni il nome col prefisso
cioè image03.gif ed assegni la nuova immagine..
A questo indirizzo il timer
http://web.tiscali.it/teknohome/tekno/home/vert/articoli/tecnica/schedehtm/timer.htm
che ti occorre per un delay tra un imm e un altra..
ciro
 
Mmm...
Guardando su dreamweaver ho trovato uno script da cui partire, che con onmouseover cambia la mia immagine di partenza.. Ma non ho ben chiaro come trasformarla in uno slideshow..

Codice:
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Codice:
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','base1.jpg',1)"><img src="base0.jpg" name="Image1" width="230" height="240" border="0" id="Image1" /></a>

Sto facendo un pò di prove.. Ma viste le mie conoscenze risulta piuttosto complicato.. Qualche dritta sarebbe ben accetta :)
 

Discussioni simili