RESOLU - onmouseover=document.getElementBy....style.visibility = 'visible' pour une classe???

[Kilka]

Bonjour,


Pour une liste de produit, je cherche à rendre visible l'intitulé de mon produit lorsque l'utilisateur passe sa souris sur la photo en fond.

J'ai donc commencer par faire ceci:

car mon élément de liste contient mon image


cette div contenant mon intitulé de produit.

Mais le probleme, c'est que je voudrais que cette action fonctionne sur tous mes éléments liste, donc il faudrait que j'utilise une class au lieu d'un id. Mais ni document.getElementByClass ni document.getElementByClassName ne marchent.

Y a-t'il une autre alternative?

J'espère que quelques développeurs pourront aider l'apprentie que je suis!

[Samy_R]

Tu aurais un exemple en ligne ? Souhaites tu un effet comme sur cette page ? http://www.groupe-photo-ecully.fr/photographes

[Kilka]

Dans l'exemple que vous me donnez, j'ai l'impression qu'il n'y a que des images, avec certainement des id distincts. Dans le cas d'une liste de produits dynamiques qui se multiplient selon le nombre de produits présentés, est-ce le même principe?

Je n'ai malheureusement rien en ligne pour l'instant.

Mais voici l'idée en image jointe. Est-ce assez compréhensible?

[Kilka]

J'ai regardé plus en détail la page que vous m'avez indiqué, et apparemment c'est l'image qui disparait onmouseover pour faire apparaitre le texte en dessous. Donc c'est le contraire de ce que je cherche mais c'est interessant aussi. Par contre c'est peut-etre la fatigue mais je ne trouve pas le script .js ni le fichier .css qui permet de gérer la classe "avatar avatar-155 avatar-default" dans le code source...Du coup je ne sais pas comment vous avez obtenu cet effet. Un indice ?

[Samy_R]

En fait il suffit de faire deux règles CSS (dont l'une se déclenche sur le :hover donc au survol).

Pour celle du hover: il suffit alors de changer une propriété qui rend le texte visible, par exemple "text-indent".

Je tâche de te faire un exemple dans la matinée.

[Kilka]

Merci Samy.

J'ai essayé ce que tu me conseillais en utilsant text-indent, mais ça marchait pas donc je suis revenu sur ce que j'avais fais avant. J'ai finalement trouvé une méthode avec le css visibility, tout simplement.

li madiv{
visibility:hidden;}

li:hover madiv{
visibility:visible;}

Ca marche très bien de cette façon, je n'avais pas besoin d'utiliser javascript!

[Broceliande]

Bonsoir,
pour les tags type blocks (dont les divs ) tu peux aussi utiliser display:block et display:none.