Faire en sorte qu'une porte s'ouvre...

...en passant la souris dessus.

Sujet résolu

7 avril 2009 à 15:04:38

Bonjour à tous,
j'envisage de faire un site dont l'apparence représente la façade d'une boutique. Et, j'aimerais que quand on passe la souris au niveau de la porte de la boutique, celle-ci s'entre-ouvre (vers l'intérieur).
Comment puis-je faire ça? Avec quel(s) type(s) de langage(s) puis-je réaliser cela?
Merci d'avance pour votre aide.
Marsu !

Mulugruntz

7 avril 2009 à 15:18:37

Tu veux que ta façade ait 2 états ? (ouverte/fermée)
Si oui, c'est faisable juste en css/html :

<div class=facade></div>

div.facade{
width: 500px; /* ici, la largeur de ton image */
height: 500px; /* ici, la hauteur de ton image */
background-image: url('monimage_portefermee.jpg'); /* le chemin vers ton image */
}

div.facade:hover{
background-image: url('monimage_porteouverte.jpg'); /* le chemin vers ta 2eme image */
}

Le code est simplifié au maximum, mais après, tu peux rajouter des trucs.

Ensuite, tu as la méthode JS :

<div style="background-image: url('monimage_portefermee.jpg');" onmouseover="this.style.backgroundImage='url(\'monimage_porteouverte.jpg\')';" onmouseout="this.style.backgroundImage='url(\'monimage_portefermee.jpg\')';"

Mais ça ne marchera pas si l'internaute a désactivé son JS.

Par contre, si tu veux faire que la porte s'ouvre petit à petit, il va falloir le faire en Flash, j'en ai bien peur :/
Une solution JS est envisageable, pour afficher des images des différents états de la porte les uns après les autres, mais ce serait beaucoup trop lourd pour l'internaute. Une image n'aurait pas le temps de se charger qu'on lui demande d'afficher la suivante :/.

karvaneg

7 avril 2009 à 16:10:19

Merci pour ta réponse très rapide et très complète...

Je vais faire un essai avec le html/css et le javascript pour voir le rendu que ça donne dans les 2 cas. Et je ferais mon choix par la suite. Je reposte si j'ai un problème avec le javascript.

karvaneg

8 avril 2009 à 15:20:26

Bon ben voilà, j'ai réussi à faire ce que je voulais avec html/css et pour ceux que ça pourrait intéresser, je mets les codes :
j'ai utilisé 3 images : une photo de la façade entière du bâtiment, une photo de la porte ouverte et une photo de la porte fermée.
Bien sûr, les images de la porte doivent avoir la même dimension que la porte sur l'image de la façade (j'espère que je suis claire !!

)

<!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" xml:lang="fr" >
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />

   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
   <div class="porte"></div>
   </body>
</html>

body{
background-image: url('background.jpg'); /* image de fond par exemple façade entière d'un immeuble, d'une maison, d'une boutique */
background-repeat: no-repeat;
}

div.porte{
width: 162px; /* ici, la largeur de l'image de la porte */
height: 380px; /* ici, la hauteur de l'image de la porte */
margin-top: 240px; /* pour positionner l'image de la porte sur la porte de l'image de la façade*/
margin-left: 462px; /* pour positionner l'image de la porte sur la porte de l'image de la façade*/
background-image: url('portefermee.jpg'); /* le chemin vers l'image de la porte fermée */
background-repeat: no-repeat;
}

div.porte:hover{
background-image: url('porteouverte.jpg'); /* le chemin vers l'image de la porte ouverte */
}

Je vous mets les photos aussi comme ça vous pourrez essayer tout de suite !

(plus tard car pour l'instant l'ajout d'images ne fonctionne pas !!)

xavierm02

8 avril 2009 à 15:50:59

Ca marchera pas avec IE...

karvaneg

8 avril 2009 à 15:51:52

Ben si j'utilise IE et ça marche très bien !!

xavierm02

8 avril 2009 à 16:02:58

[censuré]
IE n'accepte les :hover etc. que sur les <a> ...

karvaneg

8 avril 2009 à 16:08:31

pas la peine d'être désagréable..Je le teste actuellement sur mon ordi, avec IE et ça marche, c'est pas une blague !! le 1er avril, c'était mercredi dernier !!

xavierm02

8 avril 2009 à 16:18:30

T'as le tout nouveau IE ?
Peut-être qu'il le gère... mais les autres non...

karvaneg

8 avril 2009 à 16:19:48

Ah ok, effectivement, j'ai IE 8 et ça marche..Pour les versions précédentes,j'ai pas essayé...

Sous IE 7, ça marche aussi !!

xavierm02

8 avril 2009 à 16:33:22

J'ai le IE par défaut de XP et ça marche pas...

<html>
<head>
<style>
body
{
background-color:red;
}
body:hover
{
background-color:blue;
}
</style>
</head>
<body>
</body>
</html>

karvaneg

8 avril 2009 à 16:39:52

et c'est quoi la version de ton IE??

C'est ton code qui n'est pas bon. Je viens de l'essayer sous IE 8 et ça ne marche pas !!

Essai avec le mien tu verras que ça fonctionne.

xavierm02

8 avril 2009 à 16:42:58

Je sais pas... j'ai vaguement cherché dans les menus j'ai pas trouvé...

karvaneg

8 avril 2009 à 16:47:22

Dans IE tu cliques sur le ? dans le menu en haut et ensuite sur A propos d'Internet Explorer...
Je pense que hover ne fonctionne peut-être pas avec des couleurs...

ça fonctionne très bien :

<!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" xml:lang="fr" >
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />

   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
   <div class="porte"></div>
   </body>
</html>

div.porte{
width: 100px;
height: 100px;
background-color: red;

}

div.porte:hover{
background-color: blue;
}

Le petit carré passe du rouge au bleu quand tu passes la souris dessus !!

xavierm02

8 avril 2009 à 16:57:59

7.0.5730.13

karvaneg

8 avril 2009 à 17:05:26

Mon IE 7 est un tout petit peu plus récent (7.0.60....) et ça fonctionne...copie mes codes exactement et regarde si ça marche sous le tien..

Tillertan

8 avril 2009 à 17:06:17

J'ai la même version (7.0.5730.13) et ça marche aussi =o

Marsu 1 - Xavier 0

Citation : Xavierm2

Mon c** oui...

Et c'est vrai que niveau politesse on a deja vu mieux

Golmote

8 avril 2009 à 18:08:16

Tiller +1 ...

Doit y avoir plus de subtilité qu'on ne croyait quand à l'acceptation du hover par IE !

xavierm02

8 avril 2009 à 19:31:50

Ca marche aussi chez moi son code...

<!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" xml:lang="fr" >
<style type="text/css">
div.porte{
width: 100px;
height: 100px;
background-color: red;

}

div.porte:hover{
background-color: blue;
}
</style>

   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
   <div class="porte"></div>
   </body>
</html>

C'est le doctype qui le fait marcher...
Dès qu'on l'enlève ça marche plus >_<

Je viens d'apprendre quelquechose...

Ca ne marche pas pour les IE qui sont dans multi-ie (du 3.0 au 6.0)...

1 partout, la balle au centre

Timot

8 avril 2009 à 21:45:39

Vive le quirks mode d'IE : ici et ici bande d'inculte (que pour versions 7 apparement)

xavierm02

8 avril 2009 à 22:12:57

Même... il faut rajouter le truc en javascript... sinon sous les vieux IE ça marche pas... et ils sont malheureusement encore pas mal utilisés...

karvaneg

9 avril 2009 à 10:38:37

Merci Tiller et Golmote, ça fait du bien de se sentir soutenue !!

Citation : Timot

Vive le quirks mode d'IE : ici et ici bande d'inculte (que pour versions 7 apparement)

Tout le monde ne peut pas tout savoir sur tout !!