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