Vous n'êtes pas identifié.

Annonce

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

Paddy
c00lnaute nouveau
Date d'inscription: 15-05-2011
Messages: 23

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 !


Hors ligne

 

03-06-2011 21:51:15

Mister $$$


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

mic54800
Super Modérateur ^^
Lieu: Brainville (54)
Date d'inscription: 25-08-2007
Messages: 819
Site web

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 !

Hors ligne

 

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

Paddy
c00lnaute nouveau
Date d'inscription: 15-05-2011
Messages: 23

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)


Hors ligne

 

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

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

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';"/>

Hors ligne

 

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

mic54800
Super Modérateur ^^
Lieu: Brainville (54)
Date d'inscription: 25-08-2007
Messages: 819
Site web

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 ^^

Hors ligne

 

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

Partenaires de « créer un site internet »