onmouse e onclick

**Fari** · 03-05-2014, 17:00

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

**shane007** · 03-05-2014, 17:46

Devi per forza farlo così? Oppure puoi farlo attraverso il javascript?

**Fari** · 03-05-2014, 17:50

posso farlo anche con javasript volendo ma son punto a capo.. non so come

**shane007** · 03-05-2014, 18:12

Hai ancora programmato in javasrcript o meglio jquery?

**Fari** · 03-05-2014, 18:20

ho usato entrambi anche se non ho molta esperienza di programmazione.... prova a dirmi la sintassi

**shane007** · 03-05-2014, 21:57

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!

**Fari** · 04-05-2014, 23:35

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

**Prill** · 05-05-2014, 07:49

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>

**Fari** · 05-05-2014, 14:11

ottimo!! funziona! grazie grazie

**Fari** · 05-05-2014, 15:53

ancora una cosa? c'e' la possibilità di abbinare un contatore per click che riesca a visualizzare solo io o comunque nascosto??

Discussione: onmouse e onclick

Strumenti discussione

Ricerca discussione

Visualizza

onmouse e onclick

Permessi di invio