swap and show images

**wergax** · 02-09-2006, 13:07

Ciao a tutti,

vorrei creare un immagine che cambia quando passo con il mouse su un'altra immagine e poi resta visibile. Per capirsi, quando si carica la pagina ho un immagine e sotto di essa dei quadratini, vorrei che quando passo con il mouse su uno di questi quadratini l'immagine cambi in base all'immagine associata al quadratino.

Ho travato già dei tutorial che sfruttano java che fanno si che se clicco su un immagine mi fà cambiare "quella grande"...ma cambiando l'evento da "onClick" a "onMouseOver" non funziona correttamente.

Ho provato ad utilizzare anche i layer. Ho inserito in ogni layer diverso le "immagini grandi" che vorrei vedere e facendo che al passaggio del mouse sui quadratini si nascondino tutti i layer (e quindi le immagini grandi) lasciando visibile solo quella desiderata. La cosa funziona, solo che non riesco a dare le coordinate ai layer in base alle tabella (che non occupa tutta la pagina), quindi ridimensionando la finestra la tabellasi sposta verso il centro ma i layers restano dove sono...ho posizionate i layer attraverso le coordinete assolute,ma anche cambiando metodo non restano nella posizione corretta. Ho provato ad inserire i layer all'interno della cella della tabella ma la cosa non funziona.
Come posso dare le coordinate ai layer in base alla posizione della tabella?

Qualcuno ha una soluzione alternativa al mio problema?

ciao e grazie a tutti!!!

**claudioweb** · 02-09-2006, 20:38

Sicuramente si può fare di meglio, comunque al volo con DW ho fatto questo che spero possa esserti utile come esempio

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
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_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_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>
</head>
<body onLoad="MM_preloadImages('img/1.PNG','img/2.PNG','img/3.PNG','img/4.PNG')">
<div align="center">[img]img/1.PNG[/img] </div>
<div align="center">[img]img/1a.PNG[/img][img]img/2a.PNG[/img][img]img/3a.PNG[/img][img]img/4a.PNG[/img] </div>
</body>
</html>

Ciao

P.S. i nomi delle immagini che escono in alto sono 1.png, 2.png, 3.png, 4.png quelle in basso 1a.png, 2a.png, 3a.png, 4a.png

**wergax** · 03-09-2006, 03:55

grazie..era proprio quello che mi serviva...non capisco xkè su gli altri esempi che ho trovato la facevano tanto lunga...

Discussione: swap and show images

Strumenti discussione

Ricerca discussione

Visualizza

swap and show images

Permessi di invio