Bonjour et merci d'avance de vous intéresser à mon problème.
Je vous explique mon soucis en quelques mots :
J'aimerais configurer correctement un effet de survol d'une image, de telle manière que lorsque le curseur de souris passe dessus, l'image d'origine ne disparaisse pas, et qu'une nouvelle s'ajoute à un endroit totalement différent de ma page. (Dans mon cas l'image 1 est le lien, et l'image 2 est le titre de la page liée, stylisé par photoshop)
J'ai cru comprendre après plusieurs recherche que c'était le pseudo-style hover qui pouvait sans doute me permettre de réaliser cet effet, mais il reste des défauts:
-je ne sais pas comment faire pour que l'image 1 reste en place malgré l'apparition de l'image 2
-lorsque je modifie la position de l'image 2 (pour définir l'emplacement où je veux qu'elle apparaisse), les deux images se mettent à clignoter très rapidement, et ce aussi bien sur IE que sur FF.
Pour résumer, j'aimerais éviter si possible un Javascript (je n'y connais rien et j'ai vu beaucoup de webmasters en déconseiller l'emploi)
Voilà mon code html
<body> <div id="truc"> <a href="machin.htm"><img src="image1.png" alt="..."></a> </div> </body>
Et voilà mon CSS
#truc { position:absolute; top:400px; left:400px; width:32px; height:32px; } #truc a:hover img { display:none } #truc a:hover { display:block; background-image:url(image2.png); width:200px; height:30px; position:absolute; left:100px; top:100px; }
Dans toute cette affaire, je ne suis pas très sûr de l'utilisation du display, si vous voyez des choses à redire sur le code, n'hésitez pas.
Voilà merci d'avance pour vos réponses.
