Rollover avec affichage de limage2 en dessous
Bonjour à tous,
J'aurais voulu savoir si quelqu'un avait une astuce pour faire un rollover de 3 images comme l'exemple dans le liens qui suit où l'on voit une main et lorsqu'on passe dessus on voit un pied à droite : http://tecfa.unige.ch/themes/FAQ-FL/rollover/rollover.html (la différence étant que j'aimerais bien que le pied s'affiche en bas de mon image primaire)
voici le code donné par tecfa UNIGE pour ce rollover. l'image 2 c'est la main / l'image 1 est vide / l'image intitulée pied_noir est le pied
<HEAD>
<script language="JavaScript">
<!-- Begin
roll_exp6 = new Image();
roll_exp6.src = "images/pied_noir.gif";
end -->
</script>
</HEAD>
<BODY>
<td><a href="#" onclick="Go('presentation')" onmouseover="roll_exp6.src='images/pied_noir.gif';" onmouseout="roll_exp6.src='images/image1.gif';"><img src="images/image2.gif" border="0" width="59" height="72"></a><img src="images/image1.gif" name="roll_exp6" border="0" width="59" height="72"></td>
<BODY>
J'ai essayé de mettre des align (dans tous les sens,... je ne suis pas un expert en web :)) mais rien n'y a fait, peut etre que vous connaissez la solution.
J'attends vos réponses et votre aide avec impatience
Merci à vous
J'aurais voulu savoir si quelqu'un avait une astuce pour faire un rollover de 3 images comme l'exemple dans le liens qui suit où l'on voit une main et lorsqu'on passe dessus on voit un pied à droite : http://tecfa.unige.ch/themes/FAQ-FL/rollover/rollover.html (la différence étant que j'aimerais bien que le pied s'affiche en bas de mon image primaire)
voici le code donné par tecfa UNIGE pour ce rollover. l'image 2 c'est la main / l'image 1 est vide / l'image intitulée pied_noir est le pied
<HEAD>
<script language="JavaScript">
<!-- Begin
roll_exp6 = new Image();
roll_exp6.src = "images/pied_noir.gif";
end -->
</script>
</HEAD>
<BODY>
<td><a href="#" onclick="Go('presentation')" onmouseover="roll_exp6.src='images/pied_noir.gif';" onmouseout="roll_exp6.src='images/image1.gif';"><img src="images/image2.gif" border="0" width="59" height="72"></a><img src="images/image1.gif" name="roll_exp6" border="0" width="59" height="72"></td>
<BODY>
J'ai essayé de mettre des align (dans tous les sens,... je ne suis pas un expert en web :)) mais rien n'y a fait, peut etre que vous connaissez la solution.
J'attends vos réponses et votre aide avec impatience
Merci à vous
Configuration: Windows XP Firefox 3.0.13
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 -
Déja, ton <td> tout seul y sert à rien !
<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>
-
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,.... -
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> -
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).
