28114 sujets

CSS et mise en forme, CSS3

[Résolu] Afficher une image en survolant un mot dans un autre div

Bonjour à tous,
Je cherche à faire afficher une image dans un div alors que je survole un mot situé dans un autre div.
En fait j'aimerais que le background de mon div image puisse changer en fonction des mots que j'aurais balisé. Je ne veux pas de popup mais bien d'une image qui s'affichera une fois le survole effectué jusqu'au prochain mot balisé survolé.
Mon site étant en construction, je n'ai pas encore d'url à vous proposer.
J'espère que j'ai été assez clair et je vous remercie pour vos futures explications sur la méthodologie css à utiliser.
Vil Coyote.
Modifié par vil coyote (29 May 2010 - 20:02)
je ne crois pas que tu puisses faire interagir deux div totalement séparés avec du css, tu peus avec du java-script( onmouseover dans ton cas), mais le mieux serait peut-être de faire en sorte que ton image soit contenue dans le texte en display:none et qu'au survole de ce texte elle passe en display:block avec un positionnement fixed ou absolute pour la placer ou tu veux indépendamment de l'emplacement de ton texte.

ce à quoi je pense:

/*CSS*/
span.mon_texte{/* mise en forme du texte */
   span.mon_texte img{display:none; position:fixed; top:0; left:0;}
   span.mon_texte:hover img{display:block;}



<!--HTML-->
<span class="mon_texte">
petite souris, petipetit...
<img src"" alt"" />
</span>
Bonjour,

e-rwan a écrit :
le mieux serait peut-être de faire en sorte que ton image soit contenue dans le texte en display:none et qu'au survole de ce texte elle passe en display:block avec un positionnement fixed ou absolute pour la placer ou tu veux indépendamment de l'emplacement de ton texte.
Non, le mieux c'est d'utiliser du JavaScript, comme tu l'avais signalé en début de réponse.

Vil Coyote > L'image que tu souhaites faire apparaitre / disparaitre semble, fortement, être du contenu et non juste de la déco. Cette image DOIT donc se trouver dans le code HTML, appellée par un élément img, et non en fond dans le CSS.
salut Laurie-Anne,
J'utilise moi même ce petit bricolage pour afficher du texte au survol d'image et j'admets avoir quelque problème avec.
Mais je ne suis pas sur de bien comprendre ta remarque, dans l'exemple que je donne, l'image est belle et bien contenue dans le code html entre des balises <img/>, elle n'est que cacher par le css, et est-ce qu'utiliser javascript ne serait pas un peu lourd?

voici un petit exemple(fait pour l'occasion)
Modifié par e-rwan (25 May 2010 - 11:34)
Bonsoir

Excusez moi de vous répondre un peu tard mais je rentre du boulot.
Je vais essayer la solution d' e-rwan mais sachant que mon div qui affiche l'image est positionné en absolu et a une largeur "extensible" à 30% pensez vous qu'une position fixe soit la solution?. De plus je voudrais que l'image reste affichée après le passage de la souris comme dans cet exemple :

http://www.domaine-grand-ormeau.com/site.php?langue=fr onglet Historique

Merci pour vos réponses.

Vil Coyote
une image avec une taille extensible? ça me semble bizarre.
en tout les cas, si tu veux que l'effet hover soit persistant(que l'image reste après le passage de l souris), la tu n'a pas le choix c'est du javascript

<img src="" id="id_img" style="display:none;">
<a href="" onmouseover="document.getElementById('id_img').style.display='block';"

un truc dans le genre, a adapter,
renseigne toi sur la fonction onmouseover
bonsoir e-rwan
Je me suis mal explqué, ce n'est pas l'image qui est extensible mais le div qui la contient.
tu as pu voir l'exemple avec le lien ?
Bonjour,

Le problème de target (outre le fait que je ne suis pas sûr que cela puisse être utilisé pour réaliser l'effet souhaité) c'est qu'il n'est pas implémenté dans IE (toutes version) et mal implémenté dans opéra. Priver 50% de visiteurs potentiels de cette fonction, c'est risqué.
re salut,
je ne sais pas si tu en avais besoin, mais je découvre le javascript et ça m'a bien amuser de bidouiller ce bout de code: ici

comme tu peux le voir dans le code source du html, j'utilise onmouseover, mais pas pour changer display:none; en display:block;

<a href="#" onmouseover="document.getElementById('id_img').src='./design/img_test1.png';" alt="">img01</a>
<img src"" id="id_img"/>

ça change directement la source de l'image(('id_img').src='./design/img_test1.png';") de l'image ayant pour id "id_img", et l'image reste, un peu comme dans le lien que tu m'as donné.
si tu veux éviter à tes visiteur de voir les images se charger, précharge les avant, en hidden en haut de ta page(un peu lourd cependant).
pour l'histoire de div extensible, je suppose que tant que tout est bien positionné ça ne pose pas de problème.

c'est rigolo le javascript!!!
Merci e-rwan

Je vais essayer cette solution mais d'après ton exemple cela semble correspondre à mon attente.
Je mets la page en ligne dès que ça marche.

A+
Sujet clos
Aller à