Dur de remettre les mains dans le cambouis après plusieurs années d'arrêt !Je génère des pages simulant une planche contact avec des cadres imitant une diapositive dans lesquels s'insère une vignette de la photo dont format et ratio peut changer (carré maximal de 160x160 pixels).
Désormais sur chaque cadre je souhaiterai ajouter des informations statiques, des liens, et sur le mot [EXIF] apparition d'une bulle d'information.
Comment fixer ces textes en haut et en bas du cache diapo à une position absolue, par rapport à son centre, en CSS ? (comme celle de la photo verticale en exemple car, actuellement, le positionnement varie fonction de la vignette présente).
Ceci solutionnerait par ailleurs un positionnement précis d'une bulle information de taille fixe 160x160 centrée pour masquer complétement la vignette puisque le positionnement de cette bulle - sauf erreur - dépend du lien qui l'active.
Voici le code CSS :
Code : Tout sélectionner
/* =================================== */
/* =================================== */
/* = CSS3 Vignettes Diapositives = */
/* =================================== */
/* =================================== */
/* Version 08/10/2019 */
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; /* old Navigateur */
font-size: 1.8vh; /* CSS3 Navigateur */
}
body {
background-color: #A9A9A9;
text-align: center;
display: block;
}
/* =================================== */
/* =================================== */
/* = Vignettes = */
/* =================================== */
/* =================================== */
#tablebox {
margin: 5px;
text-align: center;
font-size: 12px
}
.divbox {
height: 180px;
width: 180px;
border-radius: 8px;
background: #F4F4F4;
box-shadow: 5px 5px 5px #777;
}
.divbox b {
position: relative;
color: #0000ff;
font-weight: normal;
line-height: 20px;
}
.divbox img {
vertical-align: middle;
max-width: 160px;
max-height: 140px;
border: 1px solid #777;
box-shadow: inset 1px 1px 5px 1px #000000;
}
.divCarte img {
margin: 0px 7px 0px 0px;
max-width: 160px;
max-height: 140px;
border: 1px solid black;
box-shadow: 5px 5px 5px #777;
}
/* =================================== */
/* =================================== */
/* Formatage liens GoogleMap (G et ?) */
/* =================================== */
/* =================================== */
a.MapGoogle {
color: red;
font-weight: bold;
text-decoration: none;
padding: 2px 2px 2px 2px; /*Définition des marges intérieures de notre lien */
}
/* =================================== */
/* =================================== */
/* 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;
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: -110px;
left: -119px;
width: 160px;
height: 107px;
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 19.02 10/2019</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script>
// Variables pour test
GPSlat = "45.699801";
GPSlon = "6.645525";
GPSAlt = "1622m"
file = "Roselend";
image = "";
url = "222";
caption = "Absente";
DateExif = "22/10/2018 - 11h35";
InfoBulle = "Barrage de Roselend";
UrlRetour = "xxx"
for (i = 0; i < 3; i++) {
document.write('<td><table id="tablebox"><tr>')
// Pour test orientation image
if (i == 1) {image = "001H.jpg"};
if (i == 2) {image = "001V.jpg"};
// Si connection internet absente ou
// Si Coordonnées GPS absente ne pas permettre visualisation du lieu sur Google map "G" ou carte routière "?"
if (GPSlat != "" && navigator.onLine) {
document.write('<td class="divbox"><a class="MapGoogle" href="https://www.google.com/maps?q=' + GPSlat + ',' + GPSlon + '&spn=0.05,0.05&t=h&om=1" target="_blank">G</a> <b>' + file + '.jpg <a class="MapGoogle" href="POIs_GeoPortail_SAT.htm?' + UrlRetour + '&IconJpg=' + image + '&Lat=' + GPSlat + '&Lon=' + GPSlon + '&Alt=' + GPSAlt + '">?</a><br /></b><a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a><b><br />' + DateExif + ' </b><a class="Exif" href="#">[EXIF]<span>' + InfoBulle + '</span></a></td></tr></table>')
} else {
document.write('<td class="divbox"><b>' + file + '.jpg<br /></b><a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a><b><br />' + DateExif + ' </b><a class="Exif" href="#">[EXIF]<span>' + InfoBulle + '</span></a></td></tr></table>')
}
document.write('</td>');
}
// -->
</script>
</body>
</html>Hors Sujet : Pour les informations texte sur la diapo, le codage JavaScript n'est guère élégant et tient de la bidouille mais je n'ai pas su faire ! Je reste néanmoins preneur d'un exemple, mais là n'est pas ma question principale sauf lien direct...
Oups ! Effectivement cette portion de code en ligne 25 n'a pas lieu d'exister. Et dire que depuis hier je me focalisais uniquement sur la routine des 
Les miens et mes lunettes, comme quoi le matériel ne vaut l'humain !