11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Onmouseover pour changer plusieurs images en même temps

Bonjour,

Manquant cruellement de méthode en Javascript, je me permets de vous demander de l'aide pour une fonction qui me paraît simple mais sur laquel je bloque depuis quelques jours.

Voilà, sur une partie de ma page j'ai des logos de 6 réseaux sociaux en noir. Quand je passe ma souris sur l'un des logo avec un onmouseover, le logo est replacé par une image du même logo mais en couleur, et cela pour chaque logo. (voir code ci-dessous)


function twitter(element) {
element.setAttribute('src', 'http://monsite/images/twitter2hover.png');
}
function twitter_hover(element) {
element.setAttribute('src', 'http://monsite/images/twitter2.png');
}


Maintenant ce que j'aimerais c'est que lorsque je ma souris quitte l'image d'un réseau social, que celui-ci reste en couleurs, et quand je passe sur une autre image, l'image du réseau social précédent change et redevienne noir. Je peux aussi passer par un onclick si ce n'est pas possible avec onmouseover et onmouseout

Voila mon code :


<div class="ogls">
	<span type="button" id="ogl_idlocal" onclick="javascript:chg('idlocal');">
		<img src="http://%i/tportal/images/local2.png" class="img_rs" onmouseover=home(this); onmouseout=home_hover(this);>
	</span>
	<span type="button" id="ogl_idfck" onclick="javascript:chg('idfck');">
		<img src="http://%i/tportal/images/facebook2.png" class="img_rs" onmouseover=facebook(this); onmouseout=facebook_hover(this);>
	</span>
	<span type="button" id="ogl_idtwitt" onclick="javascript:chg('idtwitt');">
		<img src="http://%i/tportal/images/twitter2.png" class="img_rs" onmouseover=twitter(this); onmouseout=twitter_hover(this);>
	</span>
	<span type="button" id="ogl_idviade" onclick="javascript:chg('idviade');">
		<img src="http://%i/tportal/images/viadeo2.png" class="img_rs" onmouseover=viadeo(this); onmouseout=viadeo_hover(this);>
	</span>
	<span type="button" id="ogl_idgoog" onclick="javascript:chg('idgoog');">
		<img src="http://%i/tportal/images/googleplus2.png" class="img_rs" onmouseover=google(this); onmouseout=google_hover(this);>
	</span>
	<span type="button" id="ogl_idlinke" onclick="javascript:chg('idlinke');">
		<img src="http://%i/tportal/images/linkedin2.png" class="img_rs" onmouseover=linkdin(this); onmouseout=linkdin_hover(this);>
	</span>
</div>




//HOME Affecte la nouvelle image lorsque la souris survole l'élément
function home(element) {
element.setAttribute('src', 'http://lan1.internet-access.center/tportal/images/local2hover.png');
}
function home_hover(element) {
element.setAttribute('src', 'http://lan1.internet-access.center/tportal/images/local2.png');
}


//FACEBOOK
function facebook(element) {
element.setAttribute('src', 'http://lan1.internet-access.center/tportal/images/facebook2hover.png');
}
function facebook_hover(element) {
element.setAttribute('src', 'http://lan1.internet-access.center/tportal/images/facebook2.png');
}


//TWITTER
function twitter(element) {
element.setAttribute('src', 'http://lan1.internet-access.center/tportal/images/twitter2hover.png');
}
function twitter_hover(element) {
element.setAttribute('src', 'http://lan1.internet-access.center/tportal/images/twitter2.png');
}


//VIADEO 
function viadeo(element) {
element.setAttribute('src', 'http://lan1.internet-access.center/tportal/images/viadeo2hover.png');
}
function viadeo_hover(element) {
element.setAttribute('src', 'http://lan1.internet-access.center/tportal/images/youtube2.png');
}


//GOOGLE + 
function google(element) {
element.setAttribute('src', 'http://lan1.internet-access.center/tportal/images/googleplus2hover.png');
}
function google_hover(element) {
element.setAttribute('src', 'http://lan1.internet-access.center/tportal/images/googleplus2.png');
}


//LINKEDIN
function linkdin(element) {
element.setAttribute('src', 'http://lan1.internet-access.center/tportal/images/linkedin2hover.png');
}
function linkdin_hover(element) {
element.setAttribute('src', 'http://lan1.internet-access.center/tportal/images/linkedin2.png');
}


Merci d'avance votre aide.
Modifié par MrLeo (26 Apr 2018 - 15:52)
Bonjour MrLeo,

je t'ai fait un exemple pour t'expliquer le concept à toi de l'adapter
Sur mon codepen les images en hover n'existent pas cher moi
donc pour les hover tu auras une image 404, fait abstraction de cela dis toi que c'est une autre image
https://codepen.io/Zonecss/pen/wjWXBg
Meilleure solution
Salut

@aliasdmc : attention un ID doit être unique dans la page web et il y a 3 id="ogl_idtwitt" dans votre code HTML

Il est préférable d'utiliser mouseenter au lieu de mouseover et mouseleave au lieu de mouseout. L'événement mouseover est déclenché lorsqu'un dispositif de pointage passe au-dessus d'un élément lié à l'écouteur d'événement, ou au-dessus de l'un de ses enfants. Ce qui peut provoquer une avalanche d'événements mouseover.

Exemple en ES2015+ :

<div class="ogls">
    <img width="128" height="128" src="http://pngimg.com/uploads/bmw_logo/bmw_logo_PNG19712.png">
    <img width="128" height="128" src="https://wiki.videolan.org/images/Ubuntu-logo.png">
    <img width="128" height="128" src="https://seeklogo.com/images/G/get-connect-logo-D7A11A9D0A-seeklogo.com.png">
</div>


window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible

    // début code du test

    const
        logos = [
            ['http://lofrev.net/wp-content/photos/2014/09/Apple-logo-png.png', 'http://pngimg.com/uploads/bmw_logo/bmw_logo_PNG19712.png'],
            ['https://n6-img-fp.akamaized.net/free-icon/youtube-logo_318-49909.jpg?size=338c&ext=jpg', 'https://wiki.videolan.org/images/Ubuntu-logo.png'],
            ['http://pluspng.com/img-png/logo-template-png-logo-templates-1655.png', 'https://seeklogo.com/images/G/get-connect-logo-D7A11A9D0A-seeklogo.com.png'],
        ],
        images = Array.from( document.querySelectorAll('.ogls img') ),
        resetImages = () => {
            for (let [i, image] of images.entries()) {
                image.src = logos[i][1];
            }
        };

    for (let [i, image] of images.entries()) {
        image.addEventListener('mouseenter', ev => {
            resetImages();
            image.src = logos[i][0];
        }, {
            capture: false,
            passive: true,
            once: false
        });
    }

    // fin code du test
}, {
    capture: false,
    passive: true,
    once: false
});
Je croyais que les "onclick" c'était "has been"

Ma petite contribution
https://codepen.io/bazooka07/pen/erzXPJ

Si on travaille avec Linux :
#!/bin/sh

#Se placer dans le dossier qui contient les icônes en couleur
# génération des icones en gris
mkdir gray
mogrify -path gray -colorspace Gray *.png

# génération de la liste des balises <img data=".." />
ls *.png | sed -e 's/^\(.*\)\.png$/<img data="\1" \/>/'


Je n'ai aucune ID sur le sujet Smiley lol
Modifié par bazooka07 (25 Apr 2018 - 23:56)
danielhagnoul a écrit :
Salut
@aliasdmc : attention un ID doit être unique dans la page web et il y a 3 id="ogl_idtwitt" dans votre code HTML

ok, supprimé
@bazooka07 : Pas moi, j'ai trop plein ID sur le sujet Smiley lol , enfin ca c'etait avant!
Merci beaucoup @aliasdmc , en adaptant ton code j'obtiens le résultat voulu.

J'aurais encore une question mais juste par curiosité personnelle.
Si je voudrais qu'une image soit chargée de base en couleur (en hover).
Est-ce que si j'utilise une fonction "onload" comme ci-dessous.


function selectdepart(element) {
document.getElementById('local').src='http://lan1.internet-access.center/tportal/images/local2hover.png';
 }


alors grâce à l'autre fonction, l'image changera t'el aussi quand je passerais ma souris sur une autre image ?
Bonjour MrLeo,

J'image que mettre la bonne url dans ton code n'est pas possible! Smiley cligne
Tu as la solutions de renommer tes images :
- local2hover.png => local2.png
- local2.png => local2hover.png

Mais si tu veux te prendre la tête, tu peux faire en js qui sera déclenché sur le onload
Sujet clos
Aller à