Fait suite au post : viewtopic.php?f=3&t=817
j'essaie de me former à l'utilisation du DOM pour un codage sans les instructions document.write.
Reste ce cas de figure du tableau en div affichant des listes de vignettes. Noter qu'au départ j'utilisais Class et non Id pour identifier les éléments...
Initialement class était utilisé à la place de id... donc utilisation de document.getElementsByClassName sans aucun résultat !
Bref je tourne en rond malgré diverses lectures et recherches d'exemple qui malheureusement ne listent que les instructions DOM une par une.
Merci par avance d'un éclairage nouveau.
Amitiés à vous tous
Code css :
Code : Tout sélectionner
/* =================================== */
/* =================================== */
/* Formatage liens des Cartes G et ? */
/* avec les espaces (margin-l ou r) */
/* =================================== */
/* =================================== */
.TxtL {
margin-left: 2em;
color: red;
font-weight: bold;
text-decoration: none;
padding: 2px 2px 2px 2px; /*Définition des marges intérieures du lien */
}
.TxtR {
margin-right: 2em;
color: red;
font-weight: bold;
text-decoration: none;
padding: 2px 2px 2px 2px; /*Définition des marges intérieures du lien */
}
/* =================================== */
/* =================================== */
/* Construction div cache diapos */
/* =================================== */
/* =================================== */
#EspaceVignettes {
text-align: center;
display: block;
width: 1140px; /* Déterminé dynamiquement dans la feuille HTML */
margin: auto;
/* border: 1px solid #000; /* A Supprimer - Visu pour test */
}
#container {
position: relative;
margin-top: 15px;
margin-left: 10px;
height: 185px;
width: 184px;
border-radius: 8px;
background: #F4F4F4;
box-shadow: 5px 5px 5px #777;
float: left;
}
#DiaEtiquetteH {
height: 20px;
color: blue;
font-weight: bold;
margin-top: 4px;
font-size: 12px
/* border: 1px solid #000; /* A Supprimer - Visu pour test */
}
#DiaEtiquetteB {
height: 20px;
color: blue;
font-weight: bold;
margin-top: 4px;
font-size: 12px
/* border: 1px solid #000; /* A Supprimer - Visu pour test */
}
.DiaEtiquette {
height: 20px;
color: blue;
font-weight: bold;
margin-top: 4px;
font-size: 12px
/* border: 1px solid #000; /* A Supprimer - Visu pour test */
}
#DiaVignette {
/* border: 1px solid #000; /* A Supprimer - Visu pour test */
margin: auto;
width: 182px;
height: 140px;
display: table-cell; /* Comportement visuel de cellule */
vertical-align: middle;
}
#DiaVignette img {
max-width: 158px;
max-height: 134px;
border: 1px solid #000;
box-shadow: -1px -1px 1px 1px #777;
}
/* =================================== */
/* =================================== */
/* Pour info Bulle uniquement */
/* =================================== */
/* =================================== */
/* Définition taille police indispensable pour info Bulle */
p {
font-size: 1.1em;
}
/* Rendre invisible tout le bloc span */
a.Exif span {
position: absolute;
top: -2000em;
left: -2000em;
width: 1px;
height: 1px;
overflow: hidden;
background: #DDEEFF; /* Définition du fond, sinon on a le même que notre lien */
border: 1px solid #6699FF; /* Définition des bordures */
}
a.Exif {
color: black;
font-weight: bold;
margin-left: 1em;
text-decoration: none;
padding: 2px 2px 2px 2px; /*Définition des marges intérieures de notre lien */
/* Définition de l'arrière plan de notre lien */
/* background: transparent url('comment.gif') no-repeat right center; */
position: relative; /* Indispensable pour le bon positionnement de l'info-bulle */
}
/* ligne qui corrige le bug d'IE6 et inférieur */
a.Exif:hover {
border: 0;
}
/* Rend visible tout le bloc span et lui attribue une taille */
a.Exif:hover span, a.Exif:focus span, a.Exif:active span {
top: -144px;
left: -122px;
width: 162px;
height: 140px;
overflow: visible;
}
/* =================================== */
/* =================================== */
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Version 0.01 30/01/2020</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="EspaceVignettes">
<div id="container">
<div id="DiaEtiquetteH"></div>
<div id="DiaVignette"></div>
<div id="DiaEtiquetteB"></div>
</div>
</div>
<script>
// Initialement class était utilisé à la place de id... donc utilisation de document.getElementsByClassName...
// sans résultat
// EspaceVignettes delimite la place disponible pour les vignettes
// container est la forme donnée à la diapo à dupliquer
/*
// Code exemple de référence issu du site ToutJavaScript
<style type="text/css">
div#parent, div#parent div {
border:1px solid #999;
margin:4px;
}
</style>
<div id="parent">Div parent</div>
<script>
var p=document.getElementById("parent");
for (var i=1; i<=10; i++) {
var e=document.createElement("div");
e.innerHTML="Element n°"+i;
p.appendChild(e);
}
*/
// Variables pour test
GPSlat = "45.699801";
GPSlon = "6.645525";
GPSAlt = "1622m"
file = "Diapo ";
image = "";
url = "222";
caption = "Absente";
DateExif = "22/10/2018 - 11h35";
InfoBulle = "Barrage de Roselend";
UrlRetour = "xxx"
for (i = 1; i < 12; i++) {
// Pour Test : alterner orientation image
if ((i % 2) == 0 ) {
image = "001H.jpg";
} else {
image = "001V.jpg";
}
}
// document.write('<div id="container">');
// document.getElementById("container").innerHTML = '';
document.getElementById("DiaEtiquetteH").innerHTML = '<a class="TxtR" href="https://www.google.com/maps?q=' + GPSlat + ',' + GPSlon + '&spn=0.05,0.05&t=h&om=1" target="_blank">G</a>';
document.getElementById("DiaEtiquetteH").innerHTML += '' + file + i + '.jpg';
document.getElementById("DiaEtiquetteH").innerHTML += '<a class="TxtL" href="POIs_GeoPortail_SAT.htm?' + UrlRetour + '&IconJpg=' + image + '&Lat=' + GPSlat + '&Lon=' + GPSlon + '&Alt=' + GPSAlt + '">?</a>';
document.getElementById("DiaVignette").innerHTML = '<a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a>';
document.getElementById("DiaEtiquetteB").innerHTML = '' + DateExif + '';
document.getElementById("DiaEtiquetteB").innerHTML += '<a class="Exif" href="#">[EXIF]<span><br>' + InfoBulle + '</span></a>';
// document.write('</div>');
// -->
</script>
</body>
</html>
