Printable View
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?
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 immaginiCitazione:
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 ).Citazione:
Originalmente inviato da gruppoalveo
Ciao!
Ho messo così, e come le richiamo adesso?Citazione:
Originalmente inviato da alemoppo
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()">
perchè non provi con SVG
esempio codice da mettere nel <body>
non hai bisogno di immagini da caricare ne di script ..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>
Citazione:
Originalmente inviato da gruppoalveo
Con:Codice HTML:<img class="refresh" src="refresh.png">
Try it!Codice:.refresh
{
width: 30px; height: 30px; cursor:pointer
}
.refresh:active
{
content:url("refresh1.png");
}
EDIT:
Ah, se ti serve la reloadCaptchaS(), puoi pensare allora di farlo anche tramite JS.
Ciao!
Questo dove lo metto? onclick="reloadCaptchaS()"Citazione:
Originalmente inviato da NLSweb
nella riga di definizione del svg :
<svg id="freccia" height="200" width="200" onclick="funzione()">
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"Citazione:
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.Citazione:
Originalmente inviato da NLSweb
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..
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>
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.
Vedo che funziona :mrgreen: 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.
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 :thumbsup:Citazione:
Originalmente inviato da NLSweb