Bouton qui tourne quand on passe le curseur sur un lien [Résolu]

Messages postés
20
Date d'inscription
vendredi 11 novembre 2011
Dernière intervention
6 juin 2012
- - Dernière réponse : atari54
Messages postés
20
Date d'inscription
vendredi 11 novembre 2011
Dernière intervention
6 juin 2012
- 23 avril 2012 à 23:57
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) :
<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>
 



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 !
Afficher la suite 

Votre réponse

5 réponses

Meilleure réponse
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Dernière intervention
3 novembre 2018
3
Merci
avec ce script je fait tourné un carré en survolant des boutons

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">

#mondiv {
top: 300;
left: 300;
width: 400px;
height:400px;
border: 3px solid #000;
margin:auto;
}
 	  
.class1 {
background-color:red;

-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);

-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;

-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
}
  
.class2{

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
background-color:black;

-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;

-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;

}

.class3{

-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
background-color:black;

-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;

-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;

}

.class4{

-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
background-color:black;

-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;

-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;

}

.class5{

-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
background-color:black;

-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;

-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;

}

.class6{

-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
background-color:black;

-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;

-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;

}
</style>
<script type="text/javascript" language="JavaScript">

function fct(chiffre){

var elem= document.getElementById('mondiv')

switch (chiffre) {
 case 1:
elem.className = "class1";
 break;
 case 2:
 elem.className = "class2";
 break;
 case 3:
elem.className = "class3";
 break;
  case 4:
elem.className = "class4";
 break;
 case 5:
elem.className = "class5";
 break;
 case 6:
elem.className = "class6";
 break;
 
 }
 }
</script>
</head>

 transition CSS3


blabla
bloblo
blabla
bloblo
blabla
bloblo



</html>

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources a aidé 106 internautes ce mois-ci

Commenter la réponse de @karamel
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Dernière intervention
3 novembre 2018
0
Merci
tu peut essayer en modifiant la class et par class un angel preci en fonction de la position du lien

voit ce code il ne fait pas une rotation mais il devrait te permettre de comprendre

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">

#mondiv {
position: absolute;
top: 300;
left: 300;
width: 400px;
height:400px;
border: 3px solid #000;
}
 	  
.class1 {
background-color:red;

-webkit-transition-property: background-color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;


 }
  
.class2{
background-color:black;

-webkit-transition-property: background-color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;

}

</style>
<script type="text/javascript" language="JavaScript">

function fct(){

if(document.getElementById('mondiv').className== "class2"){
document.getElementById('mondiv').className = "class1";
}

else{
document.getElementById('mondiv').className = "class2";
}

}
</script>
</head>

 transition CSS3

 
 
blabla



</html>
Commenter la réponse de @karamel
Messages postés
20
Date d'inscription
vendredi 11 novembre 2011
Dernière intervention
6 juin 2012
0
Merci
Merci beaucoup à toi kazma d'avoir pris le temps de te pencher sur le sujet. L'idée de faire changer de classe à l'image lorsqu'on passe le curseur de la souris sur un lien (et donc de donner une action différente à l'image en question à chaque fois via le code CSS) est excellente.

Si j'adapte à ce que je voulais faire (un lien en haut de l'image qui représenterais un bouton, un autre en bas et un à gauche), ça donne ça :

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="bouton_rotatif.css" />
    </head>
    
          
  <script>
  function changement_classe(chiffre)
  {
      var image=document.getElementById('image');
      
      switch(chiffre)
      {
        case 1:
        image.className = "haut";
        break;
        case 2:
        image.className = "gauche";
        break;
        case 3:
        image.className = "bas";
        break;
      }
  }
  </script>
  
[ LIEN1]


[ LIEN2]


[ LIEN3]




    
</html>


img
{
    margin: 200px;
}


#LIEN3
{
    position: absolute;
    left: 270px;
    top: 480px;
}

#LIEN1
{
    position: absolute;
    left: 270px;
    top: 140px;
}

#LIEN2
{
    position: absolute;
    top: 280px;
}

.haut{

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);

-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;

-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
}
  
.gauche{

-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);

-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;

-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;

}

.bas{

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;

-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;

}



Merci encore kazma !
Commenter la réponse de atari54
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Dernière intervention
3 novembre 2018
0
Merci
on peut aussi le faire de cette facon

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">

#mondiv {

width: 400px;
height:400px;
border: 3px solid #000;
margin:auto;
}
 	  
.class1 {
background-color:red;

-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);

-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;

-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;

-o-transition-property: -o-transform;
-o-transition-duration: 1s;
-o-transition-timing-function: ease-out;

transition-property: -o-transform;
transition-duration: 1s;
transition-timing-function: ease-out;
}
  
</style>
<script type="text/javascript" language="JavaScript">

function fct(chiffre){

var elem= document.getElementById('mondiv')
var angle

switch (chiffre) {
 case 1:
angle=0
 break;
 case 2:
angle=90
 break;
 case 3:
angle=180
 break;
  case 4:
angle=270
 break;
 case 5:
angle=360
 break;
 case 6:
angle=360
 break;
 }
 var effet='rotate('+angle+'deg)';


elem.style.WebkitTransform=effet;

elem.style.OTransform=effet;

elem.style.MozTransform=effet;

elem.style.msTransform=effet;

elem.style.transform=effet;
 }
</script>
</head>

 transition CSS3


blabla
bloblo
blabla
bloblo
blabla
bloblo



</html>
Commenter la réponse de @karamel
Messages postés
20
Date d'inscription
vendredi 11 novembre 2011
Dernière intervention
6 juin 2012
0
Merci
Merci kazma pour cette deuxième proposition (qui me paraît un peu moins simple à saisir à première vu que la précédente). J'aurais décidément bien appris en venant poser ma question ici...
Commenter la réponse de atari54

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.