Mouseover s'appelle tout le temps

Version imprimable

Bonjour à tous,:coucou:

J'essaye de faire un simple effet de flipping qui se retourne que quand on passe sur l'image.
Le problème, bien que le retournement soit appelé dans le OnMouseOver, est que l'image se retourne quand je bouge sur celle-ci, pas que quand je rentre....:weird:

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#flipping{
    position: relative;
    width:400px;
    height:400px;
    top:100px;
    left:100px;
    border:solid 1px black;
    perspective:600;   /* !! distance à laquelle on voit l'animation*/
}  
.back{
    transform: rotateY(-180deg);  
}
#flipping:hover .back{
    /*     transform: rotateY(0deg);*/
}
#flipping:hover .front{
    /*    transform: rotateY(180deg);  */             
}
.back img,.front img{
    border-radius: 10px;
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
    width:100%;
    height:100%;
}
.back,.front{
    position: absolute;
    backface-visibility: hidden;  /* !! caché l'arrière*/
    transition:all 0.7s ease-in;
}
.contenu{
    position:absolute;
    left:700px;
    top:110px;
    width:400px;
    height:400px;
    border:solid 1px black;
    background-color: rgba(50,50,50,0.75);
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var bool = true;
function Mouseover(obj){  
    var back = obj.getElementsByClassName("back");
    var front =obj.getElementsByClassName("front");
    if (bool === true){
        back[0].style.transform="rotateY(0deg)";
        front[0].style.transform="rotateY(180deg)"; 
        bool=false;
    }else{
        back[0].style.transform="rotateY(180deg)";
        front[0].style.transform="rotateY(0deg)";    
        bool=true;
    }
}

et le HTML :

Code:

1
2
3
4
<div id="flipping" onmouseover="Mouseover(this)">
    <div class="back"><img src="ete.png" alt="été"></div>
    <div class="front"><img src="automne.png" alt="automne"></div>
</div>

Quelqu'un voit-il le problème??

12/04/2015, 20h00
NoSmoking

Bonjour,
ton mouseover est perdu/repris pendant la transformation, mais je ne vois pas pourquoi tu ne fais pas cela directement en CSS3 !
12/04/2015, 20h07
Basile le disciple

Bonsoir et merci NoSmoking

j'ai compris plus tard que le mouseover est appelé quand l'image tourne, provoquant mon problème... (comme tu le dis très justement d'ailleurs)
J'ai donc créé un bloc de même taille et même position que j'ai placé au dessus, et j'ai utilisé son onmouseover.
C'est pas très propre mais ça marche...

Citation:

mais je ne vois pas pourquoi tu ne fais pas cela directement en CSS3

Je n'ai tout simplement pas réussi à provoqué le retournement que quand la souris arrive sur l'image, pas quand elle en ressort....:aie:
Aurais-tu une idée?
12/04/2015, 21h18
NoSmoking
Certes si tu ne souhaites qu'un flip, je trouve l'idée un peu surprenante, tu ne peux le faire avec CSS.
Pour la méthode il suffit dans la fonction mouseover désaffecter celle ci de la sorte elle ne se reproduira plus.
Code:

1 2 3 4 function Mouseover(obj){ obj.onmouseover=function(){}; // annule la fonction var back = obj.getElementsByClassName("back"); // la suite du code
13/04/2015, 17h44
Basile le disciple

Citation:

Pour la méthode il suffit dans la fonction mouseover désaffecter celle ci de la sorte elle ne se reproduira plus.

C'est pas mal du tout cette méthode, un grand merci à toi!! :ccool: