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

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

5 réponses

Répondre au sujet
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscription 19 avril 2018 Dernière intervention - 20 avril 2012 à 22:50
+3
Utile
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>
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de @karamel
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscription 19 avril 2018 Dernière intervention - 20 avril 2012 à 13:30
0
Utile
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
atari54 20 Messages postés vendredi 11 novembre 2011Date d'inscription 6 juin 2012 Dernière intervention - 21 avril 2012 à 12:54
0
Utile
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
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscription 19 avril 2018 Dernière intervention - 22 avril 2012 à 15:59
0
Utile
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
atari54 20 Messages postés vendredi 11 novembre 2011Date d'inscription 6 juin 2012 Dernière intervention - 23 avril 2012 à 23:57
0
Utile
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.