Bouton qui tourne quand on passe le curseur sur un lien

Résolu

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

A voir également:

Bouton rond css
Exemple page d'authentification html css - Conseils pratiques -PHP
Bouton rechercher ✓ - Forum Visual Basic
Bouton grisé - Forum C# / .NET
[->Javascript] Griser ou éteindre un bouton ✓ - Forum Javascript / DHTML
Bouton Rechercher - Forum Visual Basic

5 réponses

Réponse 1 / 5

@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 148
20 avril 2012 à 22:50

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>

Réponse 2 / 5

@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 148
20 avril 2012 à 13:30

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>

Réponse 3 / 5

atari54 Messages postés 20 Date d'inscription vendredi 11 novembre 2011 Statut Membre Dernière intervention 6 juin 2012
21 avril 2012 à 12:54

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 !

Réponse 4 / 5

@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 148
22 avril 2012 à 15:59

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>

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

atari54 Messages postés 20 Date d'inscription vendredi 11 novembre 2011 Statut Membre Dernière intervention 6 juin 2012
23 avril 2012 à 23:57

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...

Discussions similaires

Personnaliser bouton Submit

Activer un bouton de commande

CSS MAP et AREA

exemple de page d'accueil avec la balise div et css

bouton retour

Votre réponse

Discussions similaires