[Newbie JS] rollover

**StratOz** · 19/01/2016, 18h07

Bonjour, je suis en train de réaliser un rollover sur deux images. Quand je survole la première, l'aspect de la deuxième change et quand je passe sur la deuxième l'aspect de la première change aussi.
Le problème c'est que je suis encore dans html5, css3 et que je peux pas faire ça sans utiliser l'api DOM (du moins si je me trompe pas ?).
Voici mon code html5 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
 <head>
	  <meta charset="utf-8"/>
	  <link rel="stylesheet" href="style.css" />
	  <title>rollover</title>
 </head>
<body>
    <div id="images_container">
        <img src="image.png" id="MyImg1">
        <img src="image.png" id="MyImg2">
    </div>
</body>
</html>

Au niveau du css j'ai ça :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
body {
    background-color: rgb(40, 40, 50);
    margin: 0px;
    padding-top: 0px;
}
 
body, html {
    height: 100%;
}
 
#images_container {
    position: relative;
    margin: auto;
    width: 1000px;
    height: 100%;
    background-color: white; 
}
 
#images_container img {
    position: absolute;
    top: 40%;
    filter: blur(0px;)
    transition-property: filter;
    transition-duration: 750ms;
    transition-timing-function: ease-in-out;
}
 
#images_container img:first-child {
    left: 140px;
}
 
#images_container img:last-child {
    right: 140px;
}

et voilà le css que j'attend au niveau de rollover :
filter: blur(5px);
transform: scale(1.05);

Genre quand je passe la sourie sur la première image la deuxième prend le css ci-dessus et vice-versa.
'ai commencé à apprendre le JS(ça fait à peine quelques heures), à utiliser DOM mais c'est tellement frai que je vois pas comment je pourrait procéder sans faire des trucs horribles. Je suis preneur de toutes suggestions ou raisonnement pour y parvenir. Merci pour ceux qui ont pris la peine de me lire ou de me répondre.

**SylvainPV** · 19/01/2016, 18h29

On peut faire ça en CSS uniquement, mais que pour la seconde image lorsqu'on survole la première image : #images_container img:hover ~ img La raison est qu'il n'y a pas de sélecteur CSS qui permette de revenir "en arrière" dans la lecture DOM, pour des raisons de performance. Ça viendra peut-être en CSS4: http://dev.w3.org/csswg/selectors4/#subject

Démo : http://codepen.io/anon/pen/eJejJG

Pour que cela marche dans les deux sens, il faut effectivement JavaScript et l'API du DOM. Voilà un exemple avec les attributs onmouseover et onmouseout : http://codepen.io/anon/pen/QyOBdG ; pas forcément le plus "propre", mais le plus simple à comprendre pour un novice en JS.

**StratOz** · 19/01/2016, 18h34

Merci beaucoup pour votre aide , je vais prendre mon temps pour comprendre le code.

**NoSmoking** · 19/01/2016, 19h47

Bonjour,

Envoyé par SylvainPV

La raison est qu'il n'y a pas de sélecteur CSS qui permette de revenir "en arrière" dans la lecture DOM

on peut toujours "tricher" en déplaçant "l'écouteur", :hover, sur le parent et en maintenant un "écouteur" sur l'enfant pour faire croire que l'on remonte.
avec cette structure HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="image">
  <img src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_outils_css.gif">
  <img src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_livres_css_old.gif">
</div>

et ce CSS par exemple

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#image {
  display:inline-block;
  border:1px solid #abc;
}
#image img{
  border:2em solid #cde;
  width:200px;
  height:175px;
  float:left;
}
/* écouteur sur le parent */
#image:hover img{
  transform:scale(1.05);
}
/* écouteur sur l'enfant */
#image img:hover{
  transform:scale(1);
}

l'ilusion est parfaite sur les navigateurs récents.

**SylvainPV** · 19/01/2016, 22h44

Tu arriverais à l'appliquer sur son exemple NoSmoking ? D'après son CSS les images sont bien séparées et le cadre parent est bien plus grand que les images elles-mêmes, donc je ne pense pas qu'un hover sur le parent soit une solution ici.

[Newbie JS] rollover

JavaScript

Discussions similaires

Partager

Partager