Far muovere immagine all'onclick

30-05-2014, 15.08.41

Ho un immagine che ha la forma di una freccia a cerchio, quando clicco sopra vorrei che questa freccia-cerchio giri un po' a destra ma che poi deve tornare subito nella posizione iniziale

Ho pensato a 2 soluzioni: o creo una gif animata oppure inserisco nel codice 2 immagini diverse, qual'è la migliore?

**alemoppo** · 30-05-2014, 15.15.53

Con la gif, come fai a controllare quando cambiare frame all'onClick?

Ciao!

30-05-2014, 15.23.16

Originalmente inviato da alemoppo

Con la gif, come fai a controllare quando cambiare frame all'onClick?

Ciao!

Si, l'avevo pensato anch'io, oppure una gif che si attica una sola volta ad ogni click. Il problema ora, è creare il codice che attiva 2 immagini

**alemoppo** · 30-05-2014, 15.35.22

Originalmente inviato da gruppoalveo

Si, l'avevo pensato anch'io, oppure una gif che si attica una sola volta ad ogni click.

Ma non puoi avere una gif che modifica i frame all'onClick! Devi per forza usare o css ( :active ), o javascript (con la document.getElementById ).

Ciao!

30-05-2014, 16.16.34

Originalmente inviato da alemoppo

Ma non puoi avere una gif che modifica i frame all'onClick! Devi per forza usare o css ( :active ), o javascript (con la document.getElementById ).

Ciao!

Ho messo così, e come le richiamo adesso?

Codice PHP:


#ref a:link { 
    background-image: url("refresh.png");
}
#ref a:active { 
    background-image: url("refresh1.png");
}

Tieni presente che questo è il codice originale (quello con una sola immagine)

Codice PHP:


<img style="width: 30px; height: 30px; cursor:pointer" src="refresh.png" onclick="reloadCaptchaS()">

**NLSweb** · 30-05-2014, 16.44.51

perchè non provi con SVG

esempio codice da mettere nel <body>

Codice:

<svg id="freccia" height="200" width="200">
  <circle cx="100" cy="100" r="100" fill="red" />
  <polygon points="20,80,100,80,100,25,180,100,100,175,100,120,20,120,20,80" style="fill:lime;" />
  <animateTransform begin="click" attributeName="transform" type="rotate" dur="1s" from="0 100 100" to="30 100 100" fill="freeze" />
  <animateTransform begin="click" attributeName="transform" type="rotate" dur="1s" from="30 100 100" to="0 100 100" fill="freeze" />
</svg>

non hai bisogno di immagini da caricare ne di script ..

**alemoppo** · 30-05-2014, 16.52.16

Originalmente inviato da gruppoalveo

Tieni presente che questo è il codice originale (quello con una sola immagine)

Codice PHP:


<img style="width: 30px; height: 30px; cursor:pointer" src="refresh.png" onclick="reloadCaptchaS()">

Codice HTML:

<img class="refresh" src="refresh.png">

Con:

Codice:

.refresh
{
  width: 30px; height: 30px; cursor:pointer
}
.refresh:active
{
 content:url("refresh1.png");
}

Try it!

EDIT:
Ah, se ti serve la reloadCaptchaS(), puoi pensare allora di farlo anche tramite JS.

Ciao!

30-05-2014, 16.54.13

Originalmente inviato da NLSweb

perchè non provi con SVG

esempio codice da mettere nel <body>

Codice:

<svg id="freccia" height="200" width="200">
  <circle cx="100" cy="100" r="100" fill="red" />
  <polygon points="20,80,100,80,100,25,180,100,100,175,100,120,20,120,20,80" style="fill:lime;" />
  <animateTransform begin="click" attributeName="transform" type="rotate" dur="1s" from="0 100 100" to="30 100 100" fill="freeze" />
  <animateTransform begin="click" attributeName="transform" type="rotate" dur="1s" from="30 100 100" to="0 100 100" fill="freeze" />
</svg>

non hai bisogno di immagini da caricare ne di script ..

Questo dove lo metto? onclick="reloadCaptchaS()"

**NLSweb** · 30-05-2014, 16.56.16

nella riga di definizione del svg :
<svg id="freccia" height="200" width="200" onclick="funzione()">

**NLSweb** · 30-05-2014, 16.58.37

SVG ha di per se alcuni limiti chiaramente... nel caso particolare l'animazione viene eseguita nel evento click con un time di un secondo , quindi se vuoi far vedere l'animazione e poi far partire la funzione devi ritardare la funzione (per esempio con un setTimeout)

30-05-2014, 17.04.29

Originalmente inviato da NLSweb

SVG ha di per se alcuni limiti chiaramente... nel caso particolare l'animazione viene eseguita nel evento click con un time di un secondo , quindi se vuoi far vedere l'animazione e poi far partire la funzione devi ritardare la funzione (per esempio con un setTimeout)

Questa è la mia immagine, non posso inserire questa? src="refresh.png"

**NLSweb** · 30-05-2014, 17.19.38

se vuoi usare una immagine non ti serve SVG che è graffica vettoriale ...

se preferisci crei una classe con con transform:rotate(Xdeg) e all'evento onclick associ una funzione javascript che assegna la classe per l'effetto animato e poi esegue l'azione che desideri.

30-05-2014, 17.25.40

Originalmente inviato da NLSweb

se vuoi usare una immagine non ti serve SVG che è graffica vettoriale ...

se preferisci crei una classe con con transform:rotate(Xdeg) e all'evento onclick associ una funzione javascript che assegna la classe per l'effetto animato e poi esegue l'azione che desideri.

Ti spiego meglio, come vedi il form SITO c'è la freccia verde che all'onclick aggiorna il captcha. Io vorrei che quando ci clicco sopra, si gira un po' a destra e che poi torna subito al suo posto originale.

**NLSweb** · 30-05-2014, 17.37.39

ok allora assegna un id all'immagine quindi crei una classe di stile con l'effetto di rotazione, a questo punto scrivi una funzione javascript che prende l'emento con id che hai creato , gli assegna la classe di stile con la rotazione e poi esegue la tua funzione reloadCaptchaS()

se mi dai un minito ti scrivo il codice..

**NLSweb** · 30-05-2014, 17.49.23

Codice:

<!DOCTYPE html>
<head>
<script>
function funzione(){
 var elemento = document.getElementById("immagine");
 elemento.className = "ruota";
 setTimeout(function(){elemento.className = "";reloadCaptchaS();},1000);
}
</script>
<style>
.ruota{
 animation: gira 1s;
 -moz-animation: gira 1s;
 -webkit-animation: gira 1s;
 -o-animation: gira 1s;
 animation-iteration-count: 1;
 -moz-animation-iteration-count: 1;
 -webkit-animation-iteration-count: 1;
 -o-animation-iteration-count: 1;
 animation-timing-function: ease;
 -moz-animation-timing-function: ease;
 -webkit-animation-timing-function: ease;
 -o-animation-timing-function: ease;
 -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes gira 
{0%{transform: rotate(0deg);}
50%{transform:rotate(20deg);}
100%{transform:rotate(0deg);}}

@-moz-keyframes gira 
{0%{-moz-transform: rotate(0deg);}
50%{-moz-transform:rotate(20deg);}
100%{-moz-transform:rotate(0deg);}}

@-webkit-keyframes gira 
{0%{-webkit-transform: rotate(0deg);}
50%{-webkit-transform:rotate(20deg);}
100%{-webkit-transform:rotate(0deg);}}

@-o-keyframes gira 
{0%{-o-transform: rotate(0deg);}
50%{-o-transform:rotate(20deg);}
100%{-o-transform:rotate(0deg);}}
</style>
</head>
<html>
<body>
<img src="http://img.jgi.doe.gov/images/img-user-forum.png" id="immagine" onclick="funzione()"/>
</body>
</html>

**NLSweb** · 30-05-2014, 17.51.31

nell'esempio che ti ho postato all'immagine (che puoi cambiare come vuoi) ho associato la funzione javascript
che prima assegna la classe con l'animazione , poi aspetta un secondo che l'animazione conclude quindi rimuove la classe ed esegue la tua funzione.

30-05-2014, 18.02.26

Vedo che funziona

c'è ancora1 cosa che vorrei modificare:

Ho notato che l'immagine captcha si aggiorna quando la freccia è ruotata a destra, vorrei che l'aggiornamento avvenisse quando si clicca sulla freccia, non alla fine.

**NLSweb** · 30-05-2014, 19.14.29

basta sposti dal setTimeout la tua funzione , così che quando clicchi esegue l'animazione e contemporaneamente aggiorna il captcha.
per essere più precisi :
setTimeout(function(){elemento.className = "";reloadCaptchaS();},1000);
diventa
setTimeout(function(){elemento.className = "";},1000);
reloadCaptchaS();

30-05-2014, 20.39.21

Originalmente inviato da NLSweb

basta sposti dal setTimeout la tua funzione , così che quando clicchi esegue l'animazione e contemporaneamente aggiorna il captcha.
per essere più precisi :
setTimeout(function(){elemento.className = "";reloadCaptchaS();},1000);
diventa
setTimeout(function(){elemento.className = "";},1000);
reloadCaptchaS();

Ok, funziona tutto

Discussione: Far muovere immagine all'onclick

LinkBack

Strumenti discussione

Display

Far muovere immagine all'onclick

Regole di scrittura