Projet sur espace web
Révision datée du 13 novembre 2020 à 14:20 par Lionel (discussion | contributions) (Page créée avec « <source> <!doctype html> <html> <head> <link href="styles.css" rel="stylesheet" type="text/css"> <title>Demo</title> </head> <body> <div id="bloc1">voir... »)
<!doctype html>
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Demo</title>
</head>
<body>
<div id="bloc1">voir le bloc numéro 2</div>
<div id="bloc2">voir le bloc numéro 3</div>
<div id="bloc3">ceci est le bloc numéro 3</div>
<script src="script.js"></script>
</body>
</html>
div{
position:absolute;
width:200px;
height:200px;
border:1px solid black;
cursor:pointer;
}
div:hover{
background:gray;
}
#bloc1{
}
#bloc2{
right:10px;
top:10px;
display:none;
}
#bloc3{
bottom:10px;
display:none;
}
function montrerBloc2(){
bloc2 = document.querySelector('#bloc2');
bloc2.style.display = "block";
}
function montrerBloc3(){
bloc3 = document.querySelector('#bloc3');
bloc3.style.display = "block";
}
bloc1 = document.querySelector('#bloc1');
console.log(bloc1);
bloc1.addEventListener('click', montrerBloc2);
bloc2 = document.querySelector('#bloc2');
bloc2.addEventListener('click', montrerBloc3);