3 réponses
<!DOCTYPE html> <html> <head> <title>Mosaique</title> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link href="styles/styles.css" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <!-- LES CHANNELS --> <body> <div class="wrapper"> <div id="channel-viceland" class="img-wrapper"> <img id="channel-viceland-img" class="video" src="./images-et-video/viceland.jpg" onload="this.onload=null; this.src=getImages('viceland');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">VICELAND</span> </div> <div id="channel-rmc-sport" class="img-wrapper"> <img id="channel-rmc-sport-img" class="video" src="./images-et-video/rmc-sport.jpg" onload="this.onload=null; this.src=getImages('rmc-sport');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">RMC SPORT</span> </div> <div id="channel-lci" class="img-wrapper"> <img id="channel-lci-img" class="video" src="./images-et-video/lci.jpg" onload="this.onload=null; this.src=getImages('lci');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">LCI</span> </div> <div id="channel-vision tv" class="img-wrapper"> <img id="channel-vision-tv-img" class="video" src="./images-et-video/vision-tv.jpg" onload="this.onload=null; this.src=getImages('vision-tv');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">VISION TV</span> </div> <div id="channel-loutre tv" class="img-wrapper"> <img id="channel-loutre-img" class="video" src="./images-et-video/loutre-tv.jpg" onload="this.onload=null; this.src=getImages('loutre-tv');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">LOUTRE TV</span> </div> <div id="channel-farming" class="img-wrapper"> <img id="channel-farming-img" class="video" src="./images-et-video/farming.jpg" onload="this.onload=null; this.src=getImages('farming');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">FARMING</span> </div> <div id="channel-nrj12" class="img-wrapper"> <img id="channel-nrj12-img" class="video" src="./images-et-video/nrj12.jpg" onload="this.onload=null; this.src=getImages('nrj12');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">NRJ12</span> </div> <div id="channel-arte" class="img-wrapper"> <img id="channel-arte-img" class="video" src="./images-et-video/arte.jpg" onload="this.onload=null; this.src=getImages('arte');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">ARTE</span> </div> <div id="channel-bein sport" class="img-wrapper"> <img id="channel-bein-sport-img" class="video" src="./images-et-video/bein-sport.jpg" onload="this.onload=null; this.src=getImages('bein-sport');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">BEIN SPORT</span> </div> <div id="channel-lbc" class="img-wrapper"> <img id="channel-lbc-img" class="video" src="./images-et-video/lbc.jpg" onload="this.onload=null; this.src=getImages('lbc');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">LBC</span> </div> <div id="channel-bfm" class="img-wrapper"> <img id="channel-bfm-img" class="video" src="./images-et-video/bfm.jpg" onload="this.onload=null; this.src=getImages('bfm');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">BFM</span> </div> <div id="channel-paysage tv" class="img-wrapper"> <img id="channel-paysage tv-img" class="video" src="./images-et-video/paysage-tv.jpg" onload="this.onload=null; this.src=getImages('paysage-tv');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">PAYSAGE TV</span> </div> <div id="channel-tf1" class="img-wrapper"> <img id="channel-tf1-img" class="video" src="./images-et-video/tf1.jpg" onload="this.onload=null; this.src=getImages('tf1');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">TF1</span> </div> <div id="channel-turbo" class="img-wrapper"> <img id="channel-turbo-img" class="video" src="./images-et-video/turbo.jpg" onload="this.onload=null; this.src=getImages('turbo');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">TURBO</span> </div> <div id="channel-telefoot" class="img-wrapper"> <img id="channel-telefoot-img" class="video" src="./images-et-video/telefoot.jpg" onload="this.onload=null; this.src=getImages('telefoot');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">TELEFOOT</span> </div> <div id="channel-canadian" class="img-wrapper"> <img id="channel-canadian-img" class="video" src="./images-et-video/canadian.jpg" onload="this.onload=null; this.src=getImages('canadian');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">CANADIAN</span> </div> <div id="channel-mountain-tv" class="img-wrapper"> <img id="channel-mountain-tv-img" class="video" src="./images-et-video/mountain-tv.jpg" onload="this.onload=null; this.src=getImages('mountain-tv');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">MOUNTAIN TV</span> </div> <div id="channel-ldc-news" class="img-wrapper"> <img id="channel-ldc-news-img" class="video" src="./images-et-video/ldc-news.jpg" onload="this.onload=null; this.src=getImages('ldc-news');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">LDC NEWS</span> </div> <div id="channel-sky-sport" class="img-wrapper"> <img id="channel-sky-sport-img" class="video" src="./images-et-video/sky-sport.jpg" onload="this.onload=null; this.src=getImages('sky-sport');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">SKY SPORT</span> </div> <div id="channel-lake-tv" class="img-wrapper"> <img id="channel-lake-tv-img" class="video" src="./images-et-video/lake-tv.jpg" onload="this.onload=null; this.src=getImages('lake-tv');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">LAKE TV</span> </div> <!-- LE MODAL --> <div id="modal" class="w3-modal"> <span class="w3-button w3-hover-red w3-xlarge w3-display-topright" onclick="modal.style.display='none'">×</span> <!-- Le contenu de la modal --> <div id="videoid" class="w3-modal-content w3-animate-zoom"> <video id="video" controls loop="0"> <!-- La vidéo --> <source src="./images-et-video/bfm-radio.mp4" class="video"> </video> </div> </div> </div> <script src="javascript/script.js"></script> </body> </html>
* { box-sizing: border-box; } html, body{ padding:0; margin:0; width: 100%; } /* --TOUTE LA PARTIE CSS-- */ .wrapper { display:grid; grid-template-columns: 0fr 0fr 0fr 0fr; cursor: pointer; } #video { display:block; width: 100%; position: relative; } .img-wrapper { position:relative; } /*-- Nom des chaines par images --*/ .text { color: white; text-shadow: black 0.1em 0.1em 0.2em; text-align:center; display: block; position:absolute; left: 5%; bottom: 72%; font-size: 225%; font-family: fantasy; letter-spacing: 5px; } /*-- La modal --*/ .w3-modal { width: 100%; padding-top: 10%; background-color: rgba(0,0,0,0.4); } .video { width: 475.75px; height: 251px; } /*-- LE RESPONSIVE-- */ @media all and (min-width:3412px) { .wrapper { grid-template-columns: repeat(6, 0fr); } } @media all and (min-width:2864px) { .wrapper { grid-template-columns: repeat(5, 0fr); } } @media all and (min-width:2393px) { .wrapper { grid-template-columns: repeat(6, 0fr); } } @media all and (max-width:3426px) { .wrapper { grid-template-columns: 0fr 0fr 0fr 0fr 0fr 0fr; } } @media all and (max-width:2835px) { .wrapper { grid-template-columns: 0fr 0fr 0fr 0fr 0fr; } } @media all and (max-width:2358px) { .wrapper { grid-template-columns: 0fr 0fr 0fr 0fr; } } @media all and (max-width:1915px) { .wrapper { grid-template-columns: 0fr 0fr 0fr; } } @media all and (max-width:1438px) { .wrapper { grid-template-columns: 0fr 0fr; } } @media all and (max-width:964px) { .wrapper { grid-template-columns: 0fr; } }
//-- Fonction quand je clics sur une image sa m'ouvre une modal --// function onClick(element) { document.getElementById("videoid").src = element.src; document.getElementById("modal").style.display = "block"; } function getImages(channel) { return "./images-et-video/" + channel + ".jpg" ; } //-- Fonction quand je clics juste autour de ma modal ma modal se ferme --// window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }
jordane45
Messages postés
38112
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
29 mars 2024
4 634
26 févr. 2019 à 14:11
26 févr. 2019 à 14:11
OK... et tu veux boucler sur quelles DIV ... et pourquoi faire ?
je voudrais boucler la classe wrapper mais je ne suis pas sur que sa fasse ce que je voudrais, je voudrais faire juste une div comme:
et avoir une boucle sur cela
<div id="channel-viceland" class="img-wrapper"> <img id="channel-viceland-img" class="video" src="./images-et-video/viceland.jpg" onload="this.onload=null; this.src=getImages('viceland');" onclick="onClick(this)" class="w3-hover-opacity"> <span class="text">VICELAND</span> </div>
et avoir une boucle sur cela
jordane45
Messages postés
38112
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
29 mars 2024
4 634
>
Maxime
26 févr. 2019 à 14:27
26 févr. 2019 à 14:27
Si je comprend bien...
Tu voudrais boucler sur toutes les DIV qui se trouvent dans ta div principale
Donc un truc du genre
Tu voudrais boucler sur toutes les DIV qui se trouvent dans ta div principale
<div class="wrapper">
Donc un truc du genre
function getAllDiv(){ var ancestor = document.getElementsByClassName('wrapper'); var descendents = ancestor[0].getElementsByTagName('div'); for (var i = 0; i < descendents.length; ++i) { var e = descendents[i]; console.log(e); // e contient la DIV trouvée... } }
jordane45
Messages postés
38112
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
29 mars 2024
4 634
>
Maxime
26 févr. 2019 à 15:42
26 févr. 2019 à 15:42
Ben... si tu appelles cette fonction... elle affiche dans la console du navigateur les différentes div
(via la ligne de code
A toi d'en faire ce que tu veux....
(via la ligne de code
console.log(e); // e contient la DIV trouvée...)
A toi d'en faire ce que tu veux....
jordane45
Messages postés
38112
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
29 mars 2024
4 634
26 févr. 2019 à 13:56
26 févr. 2019 à 13:56
Bonjour,
Tu n'as pas du chercher beaucoup...
par exemple :
Tu n'as pas du chercher beaucoup...
par exemple :
var divs = document.getElementsByTagName("div"); for(var i = 0; i < divs.length; i++){ //do something to each div like divs[i].innerHTML = "something new..."; }
jordane45
Messages postés
38112
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
29 mars 2024
4 634
>
Maxime
26 févr. 2019 à 14:04
26 févr. 2019 à 14:04
Tu veux que je sorte ma boule de divination ???
Nan par ce que bon... même avec la meilleur volonté du monde... je ne pourrais pas t'aider avec si peu d'informations !
Ta question était comment faire une boucle sur tes div ... je t'ai répondu !
Donc question résolue.
Si maintenant tu as d'autres pré-requis... il va falloir les expliquer en détail sans oublier de montrer le code que tu as déjà essayé... (sans ça .. pas daide ).
NB: Pour poster du code sur le forum, merci de le faire en utilisant LES BALISES DE CODE (et en y précisant le langage afin d'avoir la coloration syntaxique)
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
Nan par ce que bon... même avec la meilleur volonté du monde... je ne pourrais pas t'aider avec si peu d'informations !
Ta question était comment faire une boucle sur tes div ... je t'ai répondu !
Donc question résolue.
Si maintenant tu as d'autres pré-requis... il va falloir les expliquer en détail sans oublier de montrer le code que tu as déjà essayé... (sans ça .. pas daide ).
NB: Pour poster du code sur le forum, merci de le faire en utilisant LES BALISES DE CODE (et en y précisant le langage afin d'avoir la coloration syntaxique)
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.