Vous n'êtes pas identifié.

Annonce

#1 description image avec onmouseover du 27-11-2013 18:11:33

jurafsky
c00lnaute nouveau
Date d'inscription: 27-11-2013
Messages: 4

description image avec onmouseover

Salut tout le monde,
je suis nouvelle avec js !
J'aimerais bien utiliser l'evenement onmouseover sur des images dans une page web. Si je pose le souris sur l'image, il me donne une petite description.

Comment pourrais-je faire ça?

merci :)


Hors ligne

 

27-11-2013 18:11:33

Mister $$$


#2 Re description image avec onmouseover du 28-11-2013 08:30:27

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: description image avec onmouseover

Bonjour jurafsky,

Je suis une brêle en Javascript également 014 , néanmoins, voici ce que je peux vous proposer :

On fixe une taille à toutes les images :

Code:

        
    <style type="text/css">
    .hover{
    width:409px;
    height:101px;
    border:1px solid black;
    margin:5px;
    }
    </style>

Une petite fonction qui récupère l'identifiant du "div" concerné et qui affiche un texte de remplacement :

Code:

    <script language="JavaScript" type="text/javascript">
        function AFFICHE(mon_texte,id){
            document.getElementById(id).innerHTML = mon_texte;
        }
    </script>

Le code pour afficher une image + description:

Code:

    <div id="1" class="hover" onMouseOver="javascript:AFFICHE('Voici mon premier texte.',this.id);" onMouseOut="javascript:AFFICHE('<img src=\'http://creer-un-site.fr/images2/logo-forum.png\'/>',this.id);"><img alt="texte 1" src="http://creer-un-site.fr/images2/logo-forum.png"/></div>

Pour chaque nouvelle image, il faut juste changer le numéro "id" du div, la description et l'image :

<div id="2" class="hover" onMouseOver="javascript:AFFICHE('Voici mon second texte.',this.id);" onMouseOut="javascript:AFFICHE('<img src=\'http://creer-un-site.fr/images2/creer-un-site-internet.png\'/>',this.id);"><img alt="texte 2" src="http://creer-un-site.fr/images2/creer-un-site-internet.png"/></div>

Hors ligne

 

#3 Re description image avec onmouseover du 28-11-2013 09:11:32

jurafsky
c00lnaute nouveau
Date d'inscription: 27-11-2013
Messages: 4

Re: description image avec onmouseover

Merci :)

Et au cas où j'avais des descriptions dans un tableau, comment je pourrais utiliser le texte contenu dans ce tableau avec les images en passant la souris sur l'image?

Tu peux m'expliquer qu'est-ce que c'est "this"?


Hors ligne

 

#4 Re description image avec onmouseover du 28-11-2013 09:20:38

jurafsky
c00lnaute nouveau
Date d'inscription: 27-11-2013
Messages: 4

Re: description image avec onmouseover

en fait

Code:

"javascript:AFFICHE('<img src=\'http://creer-un-site.fr/images2/logo-forum.png\'/>',this.id);">

est-ce qu'on peut faire quelque chose  comme ça ?

Code:

"javascript:AFFICHE('réference_array',this.id);"> 
<img alt="texte 1" src="http://creer-un-site.fr/images2/logo-forum.png"/>

Hors ligne

 

#5 Re description image avec onmouseover du 28-11-2013 09:27:11

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: description image avec onmouseover

Comme dit plus haut, je suis une brêle en Javascript alors il ne faut pas m'en demander de trop siffle .
Pour l'histoire du tableau, je pense qu'un truc comme ça devrait le faire :

Code:

<td class="hover" id="3" onMouseOver="javascript:AFFICHE('<img src=\'http://creer-un-site.fr/images2/logo-forum.png\'/>',this.id);" onMouseOut="javascript:AFFICHE('Voici mon premier texte.',this.id);">Voici mon premier texte</td>

this.id fait référence à l'id du div (id="1") qui est repris dans la fonction (id) et qui permet de savoir quelle description doit s'afficher à quelle endroit. Ainsi, si this.id = 1, la fonction affichera le texte dans le div ayant l'id = 1.

Hors ligne

 

#6 Re description image avec onmouseover du 28-11-2013 09:34:17

jurafsky
c00lnaute nouveau
Date d'inscription: 27-11-2013
Messages: 4

Re: description image avec onmouseover

hahaha! Tu es génial...
Peut etre je me suis mal expliquée (je ne suis meme pas française grater) Avec "tableau" je voulais dire "array" !

Merci et excuse-moi:desesp:


Hors ligne

 

Propulsé par PunBB
© Copyright 2007
Forum créer un site

Partenaires de « créer un site internet »