Rollover avec affichage de limage2 en dessous
ricarius
Messages postés
6
Statut
Membre
-
Heryu Messages postés 645 Statut Membre -
Heryu Messages postés 645 Statut Membre -
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
A voir également:
- Rollover avec affichage de limage2 en dessous
- Affichage double ecran - Guide
- Windows 11 affichage classique - Guide
- Affichage ips processeur graphique ✓ - Forum Matériel & Système
- Problème affichage fenêtre windows 10 - Guide
- Problème affichage facebook ✓ - Forum Facebook
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
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>
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,....
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
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).
