Les Allergies
Alimentaires
Posez votre question Signaler

Javascript changer le CSS de plusieurs div [Résolu]

kelukelu 19Messages postés 14 avril 2009Date d'inscription 1 février 2011Dernière intervention - Dernière réponse le 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 : http://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
Lire la suite 

Javascript changer le CSS de plusieurs div »

10 réponses
Réponse
+1
moins plus
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)

<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>
Ajouter un commentaire
Réponse
+0
moins plus
ceci devrait t'aider:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_animation
Ajouter un commentaire
Réponse
+0
moins plus
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
Ajouter un commentaire
Réponse
+0
moins plus
Merci je vais tester ça
Ajouter un commentaire
Réponse
+0
moins plus
C'est nikel. Merci beaucoup.

J'ai encore une petite question : comment je peux faire pour attribuer la fonction à une div en particulier ?
Ajouter un commentaire
Réponse
+0
moins plus
tu mets
onmouseover="mouseOver()" onmouseout="mouseOut()"
comme attribut de l'élément html en question.
Ajouter un commentaire
Réponse
+0
moins plus
ç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"

Ajouter un commentaire
Réponse
+0
moins plus
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>


taousna - 9 mars 2010 à 22:29
svp si quelqu'un peut me montrer comment appliquer la hauteur d'une div à une autre avec javascript
j'explique si le contenu d'une div change alors sa hauteur aussi,je veux avoir la même hauteur pour la dexième div
Merci bien
karinSpace - 9 mars 2012 à 15:58
comment cibler plusieurs IDs? du typedocument.getElementById('janvier').style.backgroundColor='red';
sauf qu'il y aurait 'janvier' certes mais aussi 'fevrier' 'mars'... merci!!!
Ajouter un commentaire
Ce document intitulé « javascript changer le CSS de plusieurs div » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?