Rollover dinamici con Dreamweaver

**Sandrik** · 02-09-2005, 01:37

Ciao ragazzi, premetto che uso Dreamweaver Mx Ho alcune foto pescate da un database e vorrei che apparissero ingrandite sulla stessa pagina al passaggio del mouse.
Credo di essere a buon punto ma non riesco a collegare dinamicamente la foto grande con le miniature. La foto è unica solo che appare piccola o grande a seconda delle misure impostate.
affinche possiate capirmi meglio vi invio il link. Mi potete aiutare ?

http://www.greatestate.it/test.asp

Il codice che secondo me dovrei modificare è il seguente ma non so come.
Ogni foto nel database ho un ID, un codice, e un percorso

[img]<%=(Rs_foto.Fields.Item([/img]" name="foto_piccola" width="67" height="44" border="0" id="foto_piccola">

ciao a tutti

**santino83** · 02-09-2005, 02:07

la risposta mia è boh

però potresti fare una cosa. Dove deve apparire la foto grande carichi tutte le immagini, ogni immagine messa in un DIV con ID=IDFOTOGRAFIA e con style="display:none"

nelle immagini piccole metti

codice:

<img.....>

nell'head metti

codice:

<script language="javascript">

var old;
var now;
old="XX"
function showImg(id)
{
now=id;
if (now!=old && old!='XX'){

document.getElementById(old).style.display='none';
}

document.getElementById(now).style.display='';

old=now;
}
</script>

poi mi dici se funge che sono curioso essendomelo inventato adesso

**Sandrik** · 02-09-2005, 16:40

Pensavo fosse più semplice. Non ho le conoscenze sufficenti per affrontare il suggerimento di santino83. Uso dreamweaver perchè consente di creare siti dinamici senza particolari conoscenze.
Se non sbaglio, la stringa che dovrei sostituire è quella che ho scritto in grassetto sul primo messaggio.
Credo che questa stringa debba contenere il percorso che indirizza all'ID della foto che voglio vedere ingrandita.

**santino83** · 02-09-2005, 16:48

allora proviamo a fare un esempio usando dreamweaver.

questo è il codice di un'immagine rollabile (come le canne)

codice:

[img]images/english/home/villas1.gif[/img]

notiamo che nel tag img il NAME è "Image1", lo stesso che compare nella chiamata alla funzione javascript presente nel onMouseOver.

tu prova a fare questo. come foto GRANDE metti la prima dell'elenco di immagini piccole. nel tag img specifichi il name in "Image1"

poi per ogni foto piccola metti

codice:

onMouseOver="MM_swapImage('Image1','',percorso_della_foto_che_deve_apparire_grande/nome_foto_che_deve_apparire.ESTENSIONE',1)"

naturalmente nel tag img delle foto piccole non ci deve essere nessun name settato, oppure settato diversamente da "Image1"

prova e facci sapere

**santino83** · 02-09-2005, 16:55

ecco una pagina di esempio. Sostituisci i percorsi delle immagini e provalo:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript" 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>
</head>

<body>
<table width="800" border="1">
  <tr>
    <td width="500">[img]webroot/images/english/property/property_backg.gif[/img]</td>
    <td width="300"><table width="300" border="1">
      <tr>
        <td>[img]webroot/images/english/property/punto_a.gif[/img]</td>
        <td>[img]webroot/images/english/property/punto_g.gif[/img]</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

**Sandrik** · 03-09-2005, 01:48

Ho provato il codice è funziona benissimo. Io però non vorrei utilizzare percorsi assoluti per localizzare le foto bensì percorsi che siano la risultante di un interrogazione al database.
Il database è strutturato con i seguenti campi:
ID Codice Percorso

Ho semplificato l'esempio ad una sola foto.
Usando il codice che mi hai inviato ho le seguenti righe:

[img]grafica/back.jpg[/img]</td>
<td width="300">[img]<%=(Rs_foto.Fields.Item([/img]" width="100" border="0">

Con la stringa <%=(Rs_foto.Fields.Item("foto").Value)%> recupero la prima foto dal database e la mostro in formato thumb.
Suppongo che la stessa stringa debba essere riportata al posto di 'public/foto/c58esterno1.jpg'
Se così fosse qual'è la sintassi corretta visto che ho fatto innumerevoli tentativi senza successo ? temo che tra virgole , virgolette, ,0 e '1 mi sono perso.

La pagina dove sto testando il tutto è la seguente e mostra a sinistra una foto piccola recuperata dal database e una a destra con percorso assoluto.

http://www.greatestate.it/test2.asp#
Vi ho confuso ?

**Sandrik** · 03-09-2005, 01:52

Scusate il link è il seguente

http://www.greatestate.it/test2.asp

**Mems** · 03-09-2005, 02:01

Guarda qui: http://forum.html.it/forum/showthrea...hreadid=872628

**Sandrik** · 03-09-2005, 15:27

Quando penso di aver capito mi perdo. Temo di non aver fatto chiarezza su cio' che ho bisogno. Premetto che non me ne intendo di asp e uso dreamweaver mx 2004.

Vi prego per cortesia di guardare l'esempio che rappresenta esattamente quello che mi occorre.ESEMPIO

Mi domando: la soluzione che ho adottato fino ad ora le cui 2 righe di codice sono quì sotto è completamente da scartare? Che cosa devo aggiungere nella parte in grassetto o in altre parti affinchè la foto nominata Image1 mostri la stessa foto ingrandita sulla destra ?

<td width="500">[img]grafica/back.jpg[/img]</td>
<td width="300"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','',0 )">
<%
While ((Repeat1__numRows <> 0) AND (NOT Rs_foto.EOF))
%>
[img]<%=(Rs_foto.Fields.Item([/img]" width="100" height="80" border="0">

**santino83** · 04-09-2005, 12:51

gli devi mettere il percorso, come nell'esempio che ti avevo dato io!!

il percorso puoi crearlo dinamicamente!!

ad es:

codice:

strPath="images/pippo/prima.jpg"
%>
[img]<%= strPath %> name=Image1[/img]

Discussione: Rollover dinamici con Dreamweaver

Strumenti discussione

Ricerca discussione

Visualizza

Rollover dinamici con Dreamweaver

Permessi di invio