Texte au survol d'une image [Résolu]

Messages postés
7
Date d'inscription
jeudi 3 février 2005
Dernière intervention
19 septembre 2007
- - Dernière réponse : PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 3 mars 2010 à 18:14
Bonjour à tous,

pour le site que je suis en train de développer j'ai besoin d'un texte qui s'affiche au survol d'une image.

Ne connaissant rien au JS, j'ai trouvé un bout de code qui me permet de le faire et qui marche très bien. Le souci arrive quand j'ai 3 images les unes à coté des autres dans une div (en CSS) et que je veux qu'en passant sur chaque image un texte différent pour chaque image apparaisse dans ma div.

Pour le moment j'ai un bug qui fait que les 2 premiers textes s'affichent automatiquement dès l'arrivée sur la page alors que je souhaiterais qu'il n'y en ait aucun.

Je vous mets ici le code (désolé j'ai fait du bricolage pour tester) dans le header de la page:
<script type="text/javascript">
<!--

window.onload=montre;

function montre(id) {

var d = document.getElementById(id);

        if (document.getElementById('legende')) {document.getElementById('legende').style.display='none';}

if (d) {d.style.display='block';}

}

window.onload=montre3;

function montre3(id) {

var d3 = document.getElementById(id);

        if (document.getElementById('legende3')) {document.getElementById('legende3').style.display='none';}

if (d3) {d3.style.display='block';}

}//-->

</script>

et ceci pour l'appel de la fonction au survol des images:

<dt onmouseover="javascript:montre('legende');" onmouseout="javascript:montre('') ;">[# ]</dt>
<dt onmouseover="javascript:montre3('legende3');" onmouseout="javascript:montre3('') ;">[# ]</dt>

Et ceci pour l'affichage de la légende:

<dd id="legende"> Texte </dd>

Si vous avez une solution, je suis évidemment preneur.

Je vous remercie d'avance.
Afficher la suite 

Votre réponse

5 réponses

Meilleure réponse
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
3
Merci
B
onjour...






qu'en passant sur chaque image



ton événement onmouseover n'est pas sur l'image à ce que je vois, mais dur les DTs




un texte différent pour chaque image apparaisse dans ma div.


je ne vois pas de notion de DIV dans ce que tu fournis



les 2 premiers textes s'affichent automatiquement dès l'arrivée sur la page





il suffit de mettre le style à display:none au départ


<dd style="display:none" id="legende"> Texte </dd>
<dd style="display:none" id="legende3"> Texte3 </dd>











;0)

Merci PetoleTeam 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources a aidé 100 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Messages postés
1
Date d'inscription
samedi 7 juillet 2007
Dernière intervention
27 février 2010
1
Merci
Bonjour,

Le script est vraiment pas mal, mais je rencontre un souci.

Je modifié ce script en supprimant le onmouseout car je voudrais que la légende reste même si je ne suis plus sur mon image.
Par contre dès que je suis sur une autre image, je voudrais que la légende précédente s'efface et que la nouvelle s'affiche.

Auriez-vous une solution à me donner ?

Merci pour votre aide
Commenter la réponse de superdje83
Messages postés
7
Date d'inscription
jeudi 3 février 2005
Dernière intervention
19 septembre 2007
0
Merci
Merci pour ton aide, en effet je devais juste mettre le di"splay:none" et ca roule.
Commenter la réponse de Shagrath69
Messages postés
5
Date d'inscription
jeudi 13 septembre 2007
Dernière intervention
26 octobre 2007
0
Merci
Salut Shagrath69, je t'ai piqué ton code et l'ai utilisé, et j'ai trouvé une autre solution, en fait ton code affiche le texte meme lorsque l'on passe en dehors de l'image MAIS sur sa meme ligne,
car en effet dans ton code tu effectue le Mouseover du le DIV.

Le code qu'il te faut pour ton image est le suivant :

grace a cela ton texte ne s'affichera uniquement sur le survol de ton image!

Voila ! a bientot
Commenter la réponse de Kaotic21
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
0
Merci
Bonjour,
il eu mieux valu faire un nouveau post, mais bon, il te suffit d'écrire un cookie lorsque la légende apparaît et de lire son état lorsque tu ouvres une nouvelle page, ainsi si le cookie existe tu passes le display de none à block par exemple.
;O)
Commenter la réponse de PetoleTeam

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.