Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 29
  1. #1

    [JS] visualizzare un'immagine quando si passa col mouse sopra un'altra

    È la prima volta che mi addentro dentro la programmazione js, perciò vi chiedo di essere clementi
    Vi spiego quello che dovrei fare: io ho nella pagina un'immagine che per qualche motivo è ridimensionata e non si vedere per bene. Io vorrei che quando vado sopra questa immagine comparisse a schermo la stessa immagine però a dimensioni naturali.
    Ora, da grande newbie, avevo individuato due metodi:
    1. fare una funzione da richiamare con onmouseover per cui quando si passa sopra l'immagine viene scritto il codice della seconda e quindi visualizzato
    2. scrivere subito i codici di tutte e due però tenere nascosta la seconda immagine, facendola visualizzare, sempre tramite javascript richiamato da onmouseover, quando si passa sopra la prima.

    Ora: per il primo caso ho provato questo:
    codice:
    <script type="text/javascript">
    function zoom(){
     document.write("<img src=\"abstract.png\" class=\"zoom\" alt=\"Screenshot\">")
    }
    </script>
    e però appena mi sposto solo l'immagine scompare tutta la pagina e tenta di caricare non so cosa all'infinito. Per il secondo caso invece non ho la più pallida idea di come procedere; so solo che non posso usare GetElementById perché tutte le immagini in questione hanno l'attributo class e non id.
    Un'ultima cosa: l'esempio che ho portato sopra presuppone una sola immagine per pagina. Dato che, però, le immagini da far passare sotto zoom sono più di una, sarebbe utile poter passare l'immagine come parametro nella funzione.
    Amministratore mozillaitalia.org

    Le truppe sono state spiegate, ma chi sa perché io continuo a non capirle.

  2. #2
    Utente di HTML.it
    Registrato dal
    Aug 2002
    Messaggi
    8,013
    posta il codice di una delle immagini. L'immagine rimpicciolita ha lo stesso nome (src) di quella a grandezza reale?

    Qualcosa del genere?
    codice:
    [img]tua_immagine.jpg[/img]
    <´¯)(¯`¤._)(¯`»ANDREA«´¯)(_.¤´¯)(¯`>
    "The answer to your question is: welcome to tomorrow"

  3. #3
    allora, questo è il codice del'immagine:
    codice:
    [img]abstract.png[/img]
    e questo il css relativo:
    codice:
    .piccola {
     max-width: 100%;
     display: block;
     margin: auto;
    }
    in modo che quando la grandezza dell'immagine supera la dimensione del contenitore, questa viene ridimensionata.

    Ora: io vorrei che passandoci sopra l'immagine rimpicciolita rimanesse dov'è, e però mi facesse apparire l'immagine stessa a grandezza naturale in un determinato pundo dello schermo, da definire con la proprietà css position:fixed. Per far questo ho provato il codice scritto sopra, ma potrebbe andare bene anche scrivere il codice dell'immagine a dimensione naturale direttamente nella pagina e mettere visibility:none così che non venga mostrata nella pagina e scrivere una funzione che quando passo il mouse sopra l'immagine rimpicciolita mi modifichi la proprietà css dell'altra da none a quello che serve per farla vedere (ora mi dovrei ricordare cos'è, ma non è un grosso problema)
    Amministratore mozillaitalia.org

    Le truppe sono state spiegate, ma chi sa perché io continuo a non capirle.

  4. #4
    up
    Amministratore mozillaitalia.org

    Le truppe sono state spiegate, ma chi sa perché io continuo a non capirle.

  5. #5
    Utente di HTML.it
    Registrato dal
    Aug 2002
    Messaggi
    8,013
    metti un div con id, ad esempio "imgfulls" per l'immagine a dimensione normale dove vorresti che apparisse l'immagine, poi nell'immagine a dimensione ridotta metti

    onMouseOver="document.getElementById('imgfulls').i nnerHTML='<img src=\"'+this.src+'\">'";
    <´¯)(¯`¤._)(¯`»ANDREA«´¯)(_.¤´¯)(¯`>
    "The answer to your question is: welcome to tomorrow"

  6. #6
    ci stiamo avvicinando molto a quello che cerco. Ho inserito il tuo codice nella pagina ma questo è quello che mi dice la console javascript:

    Amministratore mozillaitalia.org

    Le truppe sono state spiegate, ma chi sa perché io continuo a non capirle.

  7. #7
    Utente di HTML.it
    Registrato dal
    Aug 2002
    Messaggi
    8,013
    togli gli apici: questo va.

    codice:
    <html>
    <body>
    <div id="zoom" style="width:600px; height:600px;">
    [img]goofy.jpg[/img]';" />
    </body>
    </html>
    <´¯)(¯`¤._)(¯`»ANDREA«´¯)(_.¤´¯)(¯`>
    "The answer to your question is: welcome to tomorrow"

  8. #8
    ok, ora va
    il metodo per farla andare via quando esco col mouse l'ho trovato e anche lì non ci sono problemi.
    Ora però ho un'ultimo problema, e ho paura che non sia di così facile soluzione: se l'immagine che apre il js si sovrappone a quella rimpicciolita, come muovo il mouse si vede uno sfarfallio assurdo, e un continuo visualizzarsi/chiudersi dell'immagine che apre il js.
    C'è una soluzione a tutto ciò? Vuoi un esempio pratico (una pagina da vedere)?
    Amministratore mozillaitalia.org

    Le truppe sono state spiegate, ma chi sa perché io continuo a non capirle.

  9. #9
    ri-uppettino
    Amministratore mozillaitalia.org

    Le truppe sono state spiegate, ma chi sa perché io continuo a non capirle.

  10. #10
    Utente di HTML.it
    Registrato dal
    Aug 2002
    Messaggi
    8,013
    non puoi strutturare la pagina di modo che non sia possibile che il div in cui visualizzi l'immagine a grandezza normale non posso mai e poi mai sovrapporsi alla immagine rimpicciolita? Non ho giocato con z-index e proprietà simili... in caso, comincio a pensare che il problema adesso non sia più di javascript bensì di CSS/(X)HTML
    <´¯)(¯`¤._)(¯`»ANDREA«´¯)(_.¤´¯)(¯`>
    "The answer to your question is: welcome to tomorrow"

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.