Onmouseover avec javascript

Paddy · Onmouseover avec javascript

Bonsoir ,

J’essaie désespérément de faire un javascript tout bête me permettant de faire changer une image quand la sourie passe au dessus ...

Malgré mes nombreuses recherches, dans un premier temps pour savoir comment faire du JS (oui c'est mon premier) et ensuite pour essayer de trouver une solution a mon problème, j'en suis toujours au même point ..

Voici donc mon script ainsi que mon <a href> qui l'appel

<script language="javascript" type="text/javascript">
if (document.images) {
image1on = new image;
image1on.src=".../Image/Accueilv2.png";

image1off = new image;
image1off.src = ".../Image/Accueilv1l.png";
}
function chkVer(imagename,objectsrc)
{
if(document.images)
document.images[imagename].src=eval(objectsrc+".src")
}
</script>

<li><a onMouseOver="chkVer('image1','image1on')" onMouseOut="chkVer('image1','image1off')" href="#" title="Accueil"><img src=".../Image/Accueilv1l.png" name"image1" /></a></li>

Mon souci c'est que rien ne se passe ...

J'ai bien mon image normale accueilv1l.png (qui doit certainement venir de la balise img) mais je n'ai rien quand je passe ma souris :/

Est ce qu'il est impératif d'avoir une une bibliothèque type jquery pour ce genre de fonction ?

Je vous remercie par avance !

Mister $$$ · 03-06-2011 21:51:15

mic54800 · Re Onmouseover avec javascript

Bonsoir paddy !
Je crois que tu te compliques trop la vie ^^
La solution est simple, pas la peine d'aller chercher midi à quatorze heure cool

Pour le JavaScript, rien de tel que :

Code:

    <script type="text/javascript">
    function ChangeImage(IdImage, etat)
    {
        if(etat == 1) <!-- Modifier l'image d'origine -->
            document.getElementById(IdImage).src = 'approved-1.png';
        else <!-- Réafficher l'image d'origine -->
            document.getElementById(IdImage).src = 'approved.png';
    }
    </script>

Quant au HTML :

Code:

<img src="approved.png" id="image-1" onMouseOver="ChangeImage(this.id, 1);" onMouseOut="ChangeImage(this.id, 0);" />

Les fonctions du code JavaScript s'adaptent sur n'importe quelle balise HTML, nul besoin d'utiliser la balise <a> pour y insérer ce genre de script.
Il est possible de modifier le code à souhait (en fonction de son utilisation sur ton site) ^^

Si tu as des questions ... n'hésites pas !

Paddy · Re Onmouseover avec javascript

Merci beaucoup !
Je vais essayer ça sur le champ et je te tiendrai au courant

edit : ça marche IMPECABLE !! un très grand merci !

edit2 : si je veux faire la même chose sur plusieurs images , je dois réécrire la function en changeant ChangeImage par (par exemple) ChangeImage1 ... 2 ect ou est-ce possible de tout mettre dans la même fonction ?

Dernière modification par Paddy (04-06-2011 13:15:19)

c00lman · Re Onmouseover avec javascript

Salut,

Version sans fonction et sans prise de tête icon_mrgreen

Code:

<img src="image-de-reference.jpg" alt="mon image" 
 onmouseout="javascript:this.src='image-de-reference.jpg';" 
 onmouseover="javascript:this.src='image-hover.jpg';"/>

mic54800 · Re Onmouseover avec javascript

Pour plusieurs images, soit tu prends la version de c00lman, soit tu entres le nom de l'image en paramètres dans la fonction JavaScript ^^

Annonce

#1 Onmouseover avec javascript du 03-06-2011 21:51:15

03-06-2011 21:51:15

#2 Re Onmouseover avec javascript du 03-06-2011 22:47:53

Re: Onmouseover avec javascript

Code:

Code:

#3 Re Onmouseover avec javascript du 04-06-2011 12:56:26

Re: Onmouseover avec javascript

#4 Re Onmouseover avec javascript du 04-06-2011 15:56:54

Re: Onmouseover avec javascript

Code:

#5 Re Onmouseover avec javascript du 04-06-2011 17:10:43

Re: Onmouseover avec javascript

Partenaires de « créer un site internet »