Javascript changer le CSS de plusieurs div
Résolu/Fermé
kelukelu
Messages postés
15
Date d'inscription
mardi 14 avril 2009
Statut
Membre
Dernière intervention
1 février 2011
-
5 févr. 2010 à 16:01
karinSpace - 9 mars 2012 à 15:58
karinSpace - 9 mars 2012 à 15:58
Bonjour,
J'aimerai savoir s'il est possible avec du javascript de modifier le css d'une div en passant sur une autre div en mouseover.
Voici un exemple parce que c'est pas très clair ce que j'ai dit : https://www.momkai.com/
>Quand on survol le logo, les 2 blogs de gauche change de background et de couleur de font. Et la même, si on survol un bloc de texte.
Je cherche depuis ce matin et je trouve pas de réponse sur le net. Je suis une quiche en javascript.
Merci d'avance
J'aimerai savoir s'il est possible avec du javascript de modifier le css d'une div en passant sur une autre div en mouseover.
Voici un exemple parce que c'est pas très clair ce que j'ai dit : https://www.momkai.com/
>Quand on survol le logo, les 2 blogs de gauche change de background et de couleur de font. Et la même, si on survol un bloc de texte.
Je cherche depuis ce matin et je trouve pas de réponse sur le net. Je suis une quiche en javascript.
Merci d'avance
A voir également:
- Javascript changer le CSS de plusieurs div
- Changer dns - Guide
- Changer clavier qwerty en azerty - Guide
- Changer carte graphique - Guide
- Telecharger javascript - Télécharger - Langages
- Changer wifi chromecast - Guide
8 réponses
UgglyBoy
Messages postés
422
Date d'inscription
mercredi 24 septembre 2008
Statut
Membre
Dernière intervention
30 mai 2015
64
6 févr. 2010 à 10:42
6 févr. 2010 à 10:42
si tu ne comprends pas ce que fait, et comment est construit cette ligne:
document.getElementById("cible").style.background = "#f00";
alors je pense qu'il faut que tu ailles faire un tour sur des tutoriaux (genre www.siteduzero.com)
document.getElementById("cible").style.background = "#f00";
alors je pense qu'il faut que tu ailles faire un tour sur des tutoriaux (genre www.siteduzero.com)
<html>
<head>
<style type="text/css">
div {
position: absolute;
width:50;
height:50;
}
#controleur {
top: 50;
background-color: #555;
}
#cible {
top: 100;
background-color: #999;
}
</style>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("cible").style.background = "#f00";
}
function mouseOut()
{
document.getElementById("cible").style.background = "#999";
}
</script>
</head>
<body>
<div id="controleur" onmouseover="mouseOver()" onmouseout="mouseOut()"></div>
<div id="cible"></div>
</body>
</html>
UgglyBoy
Messages postés
422
Date d'inscription
mercredi 24 septembre 2008
Statut
Membre
Dernière intervention
30 mai 2015
64
5 févr. 2010 à 17:08
5 févr. 2010 à 17:08
ceci devrait t'aider:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_animation
https://www.w3schools.com/js/tryit.asp?filename=tryjs_animation
kelukelu
Messages postés
15
Date d'inscription
mardi 14 avril 2009
Statut
Membre
Dernière intervention
1 février 2011
1
5 févr. 2010 à 21:44
5 févr. 2010 à 21:44
Merci pour le lien.
Je suis tombé sur ce code. Mais je vois pas comment l'utiliser pour modifier une image d'une autre div que celle la
Je suis tombé sur ce code. Mais je vois pas comment l'utiliser pour modifier une image d'une autre div que celle la
kelukelu
Messages postés
15
Date d'inscription
mardi 14 avril 2009
Statut
Membre
Dernière intervention
1 février 2011
1
6 févr. 2010 à 16:39
6 févr. 2010 à 16:39
Merci je vais tester ça
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
kelukelu
Messages postés
15
Date d'inscription
mardi 14 avril 2009
Statut
Membre
Dernière intervention
1 février 2011
1
6 févr. 2010 à 18:07
6 févr. 2010 à 18:07
C'est nikel. Merci beaucoup.
J'ai encore une petite question : comment je peux faire pour attribuer la fonction à une div en particulier ?
J'ai encore une petite question : comment je peux faire pour attribuer la fonction à une div en particulier ?
UgglyBoy
Messages postés
422
Date d'inscription
mercredi 24 septembre 2008
Statut
Membre
Dernière intervention
30 mai 2015
64
6 févr. 2010 à 22:10
6 févr. 2010 à 22:10
tu mets
onmouseover="mouseOver()" onmouseout="mouseOut()"comme attribut de l'élément html en question.
kelukelu
Messages postés
15
Date d'inscription
mardi 14 avril 2009
Statut
Membre
Dernière intervention
1 février 2011
1
7 févr. 2010 à 01:40
7 févr. 2010 à 01:40
ça c'est bon.
le probleme c'est que j'aimerai identifié la fonction par un id.
ainsi je pourrai utiliser les fonctions mouseOver et mouseOut plusieurs fois pour des éléments différents.
parce que la, c'est que tous les id réagissent sur le meme bloc.
je pensais que cette méthode serait bonne :
>javascript
function mouseOver(logo)
{
document.getElementById("fvb").style.backgroundColor = "#fff"
}
function mouseOut(logo)
{
document.getElementById("fvb").style.backgroundColor = "#000"
}
function mouseOver(bloc)
{
document.getElementById("title").style.backgroundColor = "#fff"
}
function mouseOut(bloc)
{
document.getElementById("title").style.backgroundColor = "#fff"
}
>html
<a id="logo" onmouseover="mouseOver(this.logo)" onmouseout="mouseOut(this.logo)"></a>
<a id="bloc" onmouseover="mouseOver(this.bloc)" onmouseout="mouseOut(this.bloc)"></a>
mais en fait, la les 2 onmouseover interagissent que sur le bloc "title", au lieu que "logo" interagisse avec "fvb" et "bloc" avec "title"
le probleme c'est que j'aimerai identifié la fonction par un id.
ainsi je pourrai utiliser les fonctions mouseOver et mouseOut plusieurs fois pour des éléments différents.
parce que la, c'est que tous les id réagissent sur le meme bloc.
je pensais que cette méthode serait bonne :
>javascript
function mouseOver(logo)
{
document.getElementById("fvb").style.backgroundColor = "#fff"
}
function mouseOut(logo)
{
document.getElementById("fvb").style.backgroundColor = "#000"
}
function mouseOver(bloc)
{
document.getElementById("title").style.backgroundColor = "#fff"
}
function mouseOut(bloc)
{
document.getElementById("title").style.backgroundColor = "#fff"
}
>html
<a id="logo" onmouseover="mouseOver(this.logo)" onmouseout="mouseOut(this.logo)"></a>
<a id="bloc" onmouseover="mouseOver(this.bloc)" onmouseout="mouseOut(this.bloc)"></a>
mais en fait, la les 2 onmouseover interagissent que sur le bloc "title", au lieu que "logo" interagisse avec "fvb" et "bloc" avec "title"
UgglyBoy
Messages postés
422
Date d'inscription
mercredi 24 septembre 2008
Statut
Membre
Dernière intervention
30 mai 2015
64
12 févr. 2010 à 20:21
12 févr. 2010 à 20:21
function mouseOver(un_id)
{
document.getElementById(un_id).style.backgroundColor = "#fff"
}
function mouseOut(un_id)
{
document.getElementById(un_id).style.backgroundColor = "#000"
}
>html
<div id="logo01"></div><a id="logo" onmouseover="mouseOver('logo01')" onmouseout="mouseOut('logo01')"></a>
<div id="bloc01"></div><a id="bloc" onmouseover="mouseOver('bloc01')" onmouseout="mouseOut('bloc01')"></a>