Changer le contenu d'un div au passage de la souris sur un autre div

Bonjour, j'ai fait des recherches mais je n'ai pas réussi à résoudre mon problème et c'est pourquoi je fait appel aux spécialistes que vous êtes.

J'aimerais savoir si il est possible de changer le texte contenu dans un div lorsque la souris survole un autre div?
Concretement j'ai plusieurs div contenant chacun une image miniature et je voudrais que lorsque l'utilisateur passe la souris sur un de ces div, des informations concernant l'image qu'il contient s'affiche dans un div situé plus loin sur ma page.

Merci d'avance à ceux qui pourront m'aider

Salut,

bon en gros si j'ai bien compris :
Tu souhaites lorsque l'utilisateur survole une div, il se passe une action qui affiche de nouvelles infos ?
genre un menu en vignette et lorsque tu cliques sur la vignette, un agrandissement apparait.

C'est ça ?

Salut et merci de prêter attention à mon post.

En fait ce n'est pas exactement ça.

J'ai un div A et un div B
Dans le div A il y a une image et dans le div B il n'y a rien, tout deux sont présent initialement sur ma page.
Je voudrais que lorsque l'utilisateur passe la souris sur le div A (sans cliquer, juste survoler) du texte apparaisse dans le div B.

J'espère que ça sera un peu plus clair, désolé si ça ne l'est pas

oui d'accord je comprends mieux ! enfin non !

Comment j'aborderais ton problème ?
Dans div A, je mets mon image qui lorsqu'elle est survolée nous envoie à la div B qui contient le texte.

maintenant ça ne fait qu'une semaine que je me suis mise à l'xhtml/css. je pense qu'il y a nettement mieux que moi pour te répondre !

Bonjour Cyd,

Cela se fait en JavaScript (réfléchir à une alternative pour les personnes n'activant pas cette technologie sur leur poste) :

Je considère que ton div A à un id="a" et ton div B un id="b". Dans un fichier .js ; ce qui donnerait un truc du genre :

document.getElementById('a').onmouseover = function ()
{
// possible d'améliorer avec les méthodes adéquates du DOM
document.getElementById('b').innerHTML = 'texte à mettre dans B';
}

Bonne continuation.
Romain

Bonjour,

Pourquoi veux-tu que le contenu à afficher au survol de ton bloc "A" soit dans un autre div?

Sinon, tu pourrais faire en gros quelque chose comme:

[#black][b]CSS[/b][/#]

#blocA p {visibility:hidden}
#blocA:hover p {visibility:visible}



[#black][b]HTML[/b][/#]

<div id="blocA">
<img alt="Texte" src="image.png" />
<p>Ceci est un texte affiché au survol de l'image.</p>
</div>

Rebonjour,

a écrit :

Benjamin a écrit :
Pourquoi veux-tu que le contenu à afficher au survol de ton bloc "A" soit dans un autre div?

Il me semble (c'est juste une impression ) que Cyd souhaite afficher une info diffèrente dans un cadre selon l'élément qu'il survole dans la page ... Plusieurs éléments ; une seule info (cadre).

Ta solution "full-CSS" est en effet très séduisante ; après réflexion il doit (peut être même) y'avoir moyen de faire quelque chose de bien tout en se passant du JavaScript.

Romain.

yodaswii a écrit :
Il me semble (c'est juste une impression ) que Cyd souhaite afficher une info diffèrente dans un cadre selon l'élément qu'il survole dans la page ... Plusieurs éléments ; une seule info (cadre).

Je ne vois pas bien le problème avec la solution que je propose? Il suffit dès lors de cibler l'élément (grâce à un identifiant ou autre) que l'on désire afficher et adapter le code html en conséquence. Ceci dit, je n'ai peut-être pas bien cerné le problème.

Echange de bon procédé ...

a écrit :

J'ai écrit :
Ta solution "full-CSS" est en effet très séduisante ; après réflexion il doit (peut être même) y'avoir moyen de faire quelque chose de bien tout en se passant du JavaScript.

Donc en effet, je pense que ta solution est beaucoup plus intéressante (et plus accessible) qu'un script JavaScript ... Un bémol cependant : la pseudo classe ":hover" ne fonctionnera pas sous IE si l'élément n'est pas un lien hypertexte .

yodaswii a écrit :
Un bémol cependant : la pseudo classe ":hover" ne fonctionnera pas sous IE si l'élément n'est pas un lien hypertexte .

Ouaip, heureusement qu'ie7 gagne rapidement du terrain...