Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11

Discussione: onmouse e onclick

  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2014
    Messaggi
    32

    onmouse e onclick

    ciao ragazzi, ho un problema con queste due funzioni: onmouse e onclick.
    Parto da un'immagine (1), passando sopra col mouse cambia immagine (2) (onmouseout), togliendo il mouse ritorna visualizzata la 1, clicckandoci su cambia e visualizzo l'immagine 3 (onclick) e fin qui l'ho programmata e funziona... vorrei ora che l'immagine 3 rimanesse visualizzata sempre anche spostando il mouse o ripassandoci sopra,(invece dopo il click, spostando il mouse torna l'immagine 1....) o che in alternativa torni pure sull'immagine 1 ma solo con un secondo click. Come devo fare?
    codice HTML:
    <!DOCTYPE html>
    <html>
      <head>
        <meta content="text/html; charset=windows-1252" http-equiv="content-type">
        <title></title>
        <meta content="Fa" name="author">
      </head>
      <body> <img id="cuore" style="margin-top: 40px; height: 40px; width: 40px; align=middle"
    
          src="index_files/cuore1.jpg" onmouseover="this.src='index_files/cuore2.jpg'"
    
          onmouseout="this.src='index_files/cuore1.jpg'" onclick="this.src='index_files/cuore3.jpg'" > 
      </body>
    </html>
    Sul forum ho trovato discussioni simili ma non son riuscita a trovare la soluzione adatta a me... Grazie

  2. #2
    Utente di HTML.it L'avatar di shane007
    Registrato dal
    Jun 2011
    residenza
    Trentino, tra vacche ed aria buona.
    Messaggi
    55
    Devi per forza farlo così? Oppure puoi farlo attraverso il javascript?
    Siamo nel 2014, ci sono tante belle cose come Google, CodePen, Stackoverflow, ecc. Perché non usare?

  3. #3
    Utente di HTML.it
    Registrato dal
    Mar 2014
    Messaggi
    32
    posso farlo anche con javasript volendo ma son punto a capo.. non so come

  4. #4
    Utente di HTML.it L'avatar di shane007
    Registrato dal
    Jun 2011
    residenza
    Trentino, tra vacche ed aria buona.
    Messaggi
    55
    Hai ancora programmato in javasrcript o meglio jquery?
    Siamo nel 2014, ci sono tante belle cose come Google, CodePen, Stackoverflow, ecc. Perché non usare?

  5. #5
    Utente di HTML.it
    Registrato dal
    Mar 2014
    Messaggi
    32
    ho usato entrambi anche se non ho molta esperienza di programmazione.... prova a dirmi la sintassi

  6. #6
    Utente di HTML.it L'avatar di shane007
    Registrato dal
    Jun 2011
    residenza
    Trentino, tra vacche ed aria buona.
    Messaggi
    55
    Prova a dare un occhiata qui: https://api.jquery.com/on/ C'è un esempio molto simile a quello che vuoi fare te.
    Io ti consiglio di provarci da sola anche con l'aiuto di google.
    Se non ci riesci io l'ho fatto qui: http://codepen.io/shane007/pen/xGoAI
    Se non capisci il mio codice o perché ho fatto in quel modo fammi sapere!
    Ultima modifica di shane007; 03-05-2014 a 22:45
    Siamo nel 2014, ci sono tante belle cose come Google, CodePen, Stackoverflow, ecc. Perché non usare?

  7. #7
    Utente di HTML.it
    Registrato dal
    Mar 2014
    Messaggi
    32
    ho provato a guardare i riferimenti che mi hai dato ma mi sono un po' persa... Domani eventualemente ci riprovo. Pensavo in alternativa: si puo' pensare di fare la stessa cosa con un'immagine sola e farla scorrere in alto e in basso rispetto ad un quadro (nel mio caso semplificato la visualizzazione singola di un cuore 40x40px)? allego la foto per far capire meglio... grazieImmagine.JPG

  8. #8
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,948
    un esempio con due immagini di sfondo e la terza impostata con onclick (ma si potrebbe, invece che inserire un'immagine trasparente, anche inserire nel link direttamente l'immagine 3 e con onclick variarne la visibilità, da un'opacity settata su zero all'inizio a opacity:1) :

    codice:
    <style type="text/css">
    <!--
    a#cuore {
        display:inline-block;
        width:40px;
        height:40px;
        background:url(cuore1.jpg)}
    
    a#cuore:hover {
        background:url(cuore2.jpg)}
    -->
    </style>
    </head>
    
    <body>
    <div>
      <a href="#nullo" id="cuore"><img src="transparent.gif" height="40" width="40" onclick="this.src='cuore3.jpg'" />
            </a>
    </div>
    Ultima modifica di Prill; 05-05-2014 a 07:52

  9. #9
    Utente di HTML.it
    Registrato dal
    Mar 2014
    Messaggi
    32
    ottimo!! funziona! grazie grazie

  10. #10
    Utente di HTML.it
    Registrato dal
    Mar 2014
    Messaggi
    32
    ancora una cosa? c'e' la possibilità di abbinare un contatore per click che riesca a visualizzare solo io o comunque nascosto??

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 © 2021 vBulletin Solutions, Inc. All rights reserved.