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

Shagrath69 7 Messages postés jeudi 3 février 2005Date d'inscription 19 septembre 2007 Dernière intervention - 22 août 2007 à 14:08 - Dernière réponse : PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention
- 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 

5 réponses

Répondre au sujet
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 23 août 2007 à 23:51
+3
Utile
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)
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de PetoleTeam
superdje83 1 Messages postés samedi 7 juillet 2007Date d'inscription 27 février 2010 Dernière intervention - 27 févr. 2010 à 19:03
+1
Utile
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
Shagrath69 7 Messages postés jeudi 3 février 2005Date d'inscription 19 septembre 2007 Dernière intervention - 24 août 2007 à 13:21
0
Utile
Merci pour ton aide, en effet je devais juste mettre le di"splay:none" et ca roule.
Commenter la réponse de Shagrath69
Kaotic21 5 Messages postés jeudi 13 septembre 2007Date d'inscription 26 octobre 2007 Dernière intervention - 13 sept. 2007 à 13:46
0
Utile
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
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 3 mars 2010 à 18:14
0
Utile
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.