Rollover avec affichage de limage2 en dessous
Fermé
ricarius
Messages postés
6
Date d'inscription
vendredi 13 février 2009
Statut
Membre
Dernière intervention
21 août 2009
-
21 août 2009 à 14:50
Heryu Messages postés 567 Date d'inscription mercredi 15 juillet 2009 Statut Membre Dernière intervention 28 juin 2016 - 21 août 2009 à 15:51
Heryu Messages postés 567 Date d'inscription mercredi 15 juillet 2009 Statut Membre Dernière intervention 28 juin 2016 - 21 août 2009 à 15:51
A voir également:
- Rollover avec affichage de limage2 en dessous
- Affichage facebook trop grand ✓ - Forum Facebook
- Les paramètres d'affichage nvidia ne sont pas disponibles ✓ - Forum Carte graphique
- Impossible d'initialiser le dispositif d'affichage ✓ - Forum Jeux vidéo
- Affichage d'une matrice en c ✓ - Forum C
- Affichage double ecran - Guide
5 réponses
Bonjour
Le css est la solution
voir ci dessous:
https://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
Le css est la solution
voir ci dessous:
https://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
Heryu
Messages postés
567
Date d'inscription
mercredi 15 juillet 2009
Statut
Membre
Dernière intervention
28 juin 2016
62
21 août 2009 à 15:01
21 août 2009 à 15:01
Déja, ton <td> tout seul y sert à rien !
D'autre part, TR égale ligne ! Pour mettre ton truc en dessous du 1er, il te faut deux lignes !
Donc :
<table><tr><td>Contenu</td></tr></table>
D'autre part, TR égale ligne ! Pour mettre ton truc en dessous du 1er, il te faut deux lignes !
Donc :
<table> <tr><td>Premiere_image></td></tr> <tr><td>Deuxiième_Image></td></tr> </table>
ricarius
Messages postés
6
Date d'inscription
vendredi 13 février 2009
Statut
Membre
Dernière intervention
21 août 2009
21 août 2009 à 15:30
21 août 2009 à 15:30
Merci a vous deux pour vos réponses.
Hm62, le CSS c'est cool mais trop compliqué pour moi :)
Heryu, merci pour tes précisions syntaxiques qui ne sont pas du tout inutiles pour moi. Le truc c'est que je ne vois pas comment séparer les images ( image 2 / pied_noir et image1)sur deux lignes a partir du code que j'ai,....
Hm62, le CSS c'est cool mais trop compliqué pour moi :)
Heryu, merci pour tes précisions syntaxiques qui ne sont pas du tout inutiles pour moi. Le truc c'est que je ne vois pas comment séparer les images ( image 2 / pied_noir et image1)sur deux lignes a partir du code que j'ai,....
Heryu
Messages postés
567
Date d'inscription
mercredi 15 juillet 2009
Statut
Membre
Dernière intervention
28 juin 2016
62
21 août 2009 à 15:46
21 août 2009 à 15:46
Tiens, voilà un code que je viens de faire :
<html>
<head>
<style type="text/css">
#cacher {
display: none;
}
</style>
<script type="text/javascript">
function rolloveron() {
document.getElementById("cacher").style.display="block";
}
function rolloveroff() {
document.getElementById("cacher").style.display="none";
}
</script>
</head>
<body>
<table>
<tr><td><img src="ton_image1.jpg" onMouseOver="rolloveron();" onMouseOut="rolloveroff();"><td><tr>
<tr><td id="cacher"><img src="ton_image2.jpg"><td><tr>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Heryu
Messages postés
567
Date d'inscription
mercredi 15 juillet 2009
Statut
Membre
Dernière intervention
28 juin 2016
62
21 août 2009 à 15:51
21 août 2009 à 15:51
Y a sûrement plus simple mais au moins, t'es sur que que ça marche !
Pour explication, on applique à ta deuxième image, un CSS qui va la cacher automatiquement (<td id="cacher">) ! Avec une première fonction javascript qui va s'activer au passage de ta souris (onMouseOver), tu récupère les informations du CSS et tu remplaces le display:none par display:block, ce qui te montres le contenu de ton image. Tu re-caches le tout avec une deuxième fonction qui te re-transforme ton display:block en display:none, et ce, lorsque la souris quitte l'image (onMouseOut).
Pour explication, on applique à ta deuxième image, un CSS qui va la cacher automatiquement (<td id="cacher">) ! Avec une première fonction javascript qui va s'activer au passage de ta souris (onMouseOver), tu récupère les informations du CSS et tu remplaces le display:none par display:block, ce qui te montres le contenu de ton image. Tu re-caches le tout avec une deuxième fonction qui te re-transforme ton display:block en display:none, et ce, lorsque la souris quitte l'image (onMouseOut).