You are not logged in.
Computer Science in 1ère
The forum to cure all your computer anxieties
Pages: 1
#1 24-Mar-2020 13:56:47
- Pacôme Giraudeau
- Member
- Registered: 12-Sep-2019
- Posts: 67
(Chap 6) grid interactive ?
Bonjour,
Alors voilà, je veux faire une grille où la couleur de la case change quand on clique dessus
Le html
<!doctype html>
<html lang="fr">
<head>
<title>test</title>
<meta charset="utf-8" />
</head>
<body>
<h1>test</h1>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
<div id="item5"></div>
<div id="item6"></div>
<div id="item7"></div>
<div id="item8"></div>
<div id="item9"></div>
</div>
</body>
</html>
Le css
#grid {
display: grid;
grid-gap: 10px;
grid-row-gap: 25px;
}
#item1 {
background-color: white;
grid-area: 1 / 1;
width: 150px;
height: 150px;
}
#item2 {
background-color: white;
grid-area: 1 / 2;
width: 150px;
height : 150px;
}
#item3 {
background-color: white;
grid-area: 1/3;
width: 150px;
height: 150px;
}
#item4 {
background-color: white;
grid-area: 2/1;
width: 150px;
height : 150px;
}
#item5 {
background-color: red;
grid-area: 2/2;
width: 150px;
height: 150px;
}
#item6 {
background-color: white;
grid-area: 2/3;
width: 150px;
height: 150px;
}
#item7 {
background-color: white;
grid-area: 3/1;
width: 150px;
height: 150px;
}
#item8 {
background-color: white;
grid-area: 3/2;
width: 150px;
height: 150px;
}
#item9 {
background-color: white;
grid-area: 3/3;
width: 150px;
height: 150px;
}
Mais quand j’utilise java pour faire « onmouseover... » pour changer la couleur du background mais ça ne marche pas
Ce que j’ai testé :
document.item1.onmouseover = function(){
document.item1.style.backgroundColor="red";};
Et
document.grid.onmouseover = function(){
document.grid.style.backgroundColor="red";};
Last edited by Pacôme Giraudeau (24-Mar-2020 13:57:07)
Offline
Pages: 1