Bonjour à tous,
Mon but est de diriger un bouton vers le lien sur lequel on fait passer le curseur de la souris (le point ou la barre dessinée sur le bouton se tournerait donc vers le lien en question, uniquement lorsque l'utilisateur survolerais ce lien avec le curseur de la souris).
Pour l'instant, voici ce que j'ai réussi à faire :
Ce code CSS me permet de faire tourner mon image de 90° vers la droite lorsque je survole cette même image :
#deplacement:hover
{
position: absolute;
left: 50px;
top: 60px;
-webkit-animation: tourne 5s;
-moz-animation: tourne 5s;
animation: tourne 5s;
}
@-webkit-keyframes tourne {
0%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
}
}
@-moz-keyframes tourne {
0%{
-moz-transform: rotate(0deg);
}
100%{
-moz-transform: rotate(90deg);
}
}
@-webkit-keyframes tourne {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(90deg);
}
}
Ensuite, ce code javaScript me permets, lorsque je survole le lien, d'effectuer une action sur l'image (avec onmouseover) :
[javascript]
<script>
var lien = document.getElementById('lien');
var img = document.getElementById('deplacement');
lien.onmouseover = function(){
//code qui permet de faire faire une rotation à l'image quand on survole le lien;
};
</script>
[/javascript]
Ce qui me manque donc, c'est précisément la partie qui doit se trouver dans la fonction anonyme, et qui me permettrait de parvenir à mon but. Il est tentant de vouloir intégrer le code CSS qui permet de faire tourner l'image, mais ce n'est évidemment pas possible. Par contre, en javaScript, il y a sûrement un code qui permet de le faire ? Quelqu'un pourrait-il me mettre sur la piste ?
Merci !
