Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it
    Registrato dal
    Aug 2001
    Messaggi
    162

    Rollover dinamici disgiunti

    Ciao a tutti !!
    Vorrei costruire una pagina che mostri delle miniature ed una foto grande al centro.
    Il tutto dovrebbe essere il risultato dell'interrogazione di un database.
    Quello che riesco a fare è una pagina con delle miniature, risultato appunto dell'interrogazione di un database e una pagina dove riesco a visualizzare la thumbnail in un formato più grande.
    Cosa devo fare se voglio visualizzare il tutto su un'unica pagina ?
    Vorrei cioè che al passaggio del mouse su una thumb comparisse al centro della stessa pagina la miniatura ingrandita senza passare la variabile della foto ad un'altra pagina.
    Le foto sono recuperate da un database.
    Chi gode un pò non tribola sempre.

  2. #2
    E' un misto di codice asp, il quale reperisce i percorsi delle immagini piccole e grandi e di javascript il quale, al mouseover, applica all'immagine centrale, in base al suo name, il src opportuno, cambiandolo appunto dinamicamente.
    Provo a costruire un esempio.

  3. #3
    Allora, una regola importante è che le immagini grandi siano tutte di uguale dimensione.
    Io, nel mio esempio, al posto di reperire i path delle immagini da un db, ho utilizzato un array, ma non dovrebbe essere difficile modificare il codice in modo da adattarlo al db.
    codice:
    <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
    <%
    pathSmallImages = "/img/small/"
    pathBigImages = "/img/big/"
    
    dim arrImages(2)
    arrImages(0) = "foto(505).jpg"
    arrImages(1) = "foto(506).jpg"
    arrImages(2) = "foto(507).jpg"
    for i = 0 to uBound(arrImages)
    strPreload = strPreload & pathBigImages & arrImages(i) & "'"
    if i < uBound(arrImages) then strPreload = strPreload & ","
    next
    %>
    <!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>Documento senza titolo</title>
    <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 onLoad="MM_preloadImages(<%=strPreload%>)">
    <center><%
    for i = 0 to uBound(arrImages)
    %>
    <%=arrImages(i)%>',1)">[img]<%=pathSmallImages%><%=arrImages(i)%>[/img]
    <%
    next
    %>
    [img]<%=pathBigImages%><%=arrImages(0)%>[/img]
    </center>
    </body>
    </html>

  4. #4
    Utente di HTML.it
    Registrato dal
    Aug 2001
    Messaggi
    162
    Ho tentato di modificare il codice ma non ci sono riuscito.
    In effetti quello che mi serve è lievemente diferente.
    Io non uso FotoBig e FotoSmall bensì un'unica foto che poi ridimensiono con (width="100" height="80").
    Quindi:
    1) estraggo una foto dal database
    2) la posiziono sulla cella di destra di una tabella con 2 celle ridimensionandola.


    Ora vorrei che al passaggio del mouse sopra alla Thumb oppure con un click sulla stessa, La cella di destra si "accendesse" la stessa foto questa volta pero' con le sue dimensioni originali e quindi più grande.

    L'url qui a fianco riguarda il codice dei passaggi 1 e 2.
    Come lo devo modificare ???? LINK DI PROVA


    Questo sotto è il codice della pagina che dovrei correggere per adattarlo alla mia esigenza:

    <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>

    <%
    Dim Rs_FOTO__MMColParam
    Rs_FOTO__MMColParam = "Ville e Casali"
    If (Request("MM_EmptyValue") <> "") Then
    Rs_FOTO__MMColParam = Request("MM_EmptyValue")
    End If
    %>
    <%
    Dim Rs_FOTO
    Dim Rs_FOTO_numRows

    Set Rs_FOTO = Server.CreateObject("ADODB.Recordset")
    Rs_FOTO.ActiveConnection = MM_Rss_Greatestate_STRING
    Rs_FOTO.Source = "SELECT * FROM tab_immobili WHERE tipologia = '" + Replace(Rs_FOTO__MMColParam, "'", "''") + "'"
    Rs_FOTO.CursorType = 0
    Rs_FOTO.CursorLocation = 2
    Rs_FOTO.LockType = 1
    Rs_FOTO.Open()

    Rs_FOTO_numRows = 0
    %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Documento senza titolo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .Stile1 {color: #FFFFFF}
    -->
    </style>
    </head>

    <body>
    <table width="100%" border="0">
    <tr>
    <td width="44%" bgcolor="#990000">Foto Grande </td>
    <td width="56%" bgcolor="#333333"><div align="center">[img]<%=(Rs_FOTO.Fields.Item([/img]" width="100" height="80"><span class="Stile1"> Foto Piccola</span> </div></td>
    </tr>
    </table>
    </body>
    </html>
    <%
    Rs_FOTO.Close()
    Set Rs_FOTO = Nothing
    %>
    Chi gode un pò non tribola sempre.

  5. #5
    Utente di HTML.it
    Registrato dal
    Aug 2001
    Messaggi
    162
    Scusate nello scrivere il messaggio precedente ho commesso un errore e non si capisce niente .

    Il testo corretto è quello sottostante:
    Ciao
    .................................................. ...................

    Ora vorrei che al passaggio del mouse sopra alla Thumb oppure con un click sulla stessa, La cella di SINISTRA si "accendesse" mostrando la stessa foto con le sue dimensioni originali, quindi più grande.
    .................................................. ...............
    Chi gode un pò non tribola sempre.

  6. #6
    Con un piccolo sforzo ce la fai.
    In fondo non hai nemmeno provato a modififarlo l'esempio che ti ho postato...

  7. #7
    Utente di HTML.it L'avatar di kluster
    Registrato dal
    Jul 2003
    Messaggi
    1,288
    e cmq inutile dirti che un'immagine sola è una cavolata.
    A quel punto presentala direttamente grande.
    Se hai una foto di 500 kb sempre 500kb sono anche se tu la ridimensioni a width=100.
    Cmq se cosi' ti aggrada ...

  8. #8
    Utente di HTML.it
    Registrato dal
    Aug 2001
    Messaggi
    162
    Ciao Mem nel tuo esempio tu usi gli array che dovrebbe essere come un contenitore con le foto ????
    e comunque.... dovendo usare un path ricavato da un database devo modificare il codice togliendo tutti i riferimenti agli array presenti ???
    Chi gode un pò non tribola sempre.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.