Fixer un texte dans un cadre

Pour toutes les discussions sur le code client, HTML et CSS
Répondre
Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Fixer un texte dans un cadre

Message par Jpe54 » 08 oct. 2019, 11:10

Bonjour,

:oops: 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;
        }

/* =================================== */
Le code HTML / JavaScript :

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>' + file + '.jpg&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 + '&nbsp;&nbsp;&nbsp;</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 + '&nbsp;&nbsp;&nbsp;</b><a class="Exif" href="#">[EXIF]<span>' + InfoBulle + '</span></a></td></tr></table>')
                }
document.write('</td>');
}

// -->
    </script>
</body>
</html>
Et un fichier du tout avec 2 vignettes :
Code_et_Vignette.zip
(25.61 Kio) Téléchargé 1419 fois
Mes amitiés à vous tous.


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...

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Fixer un texte dans un cadre

Message par webmaster » 08 oct. 2019, 18:32

Bonjour,

C'est surtout les balises <table> qu'il faut éviter.
Cela rend tout positionnement impossible à réaliser. Je sais que c'est une tannée de remplacer par des div et du css mais c'est la seule solution pour centrer du texte correctement à tous les coups.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Fixer un texte dans un cadre

Message par Jpe54 » 08 oct. 2019, 18:49

Bonjour,

Un grand merci pour cette judicieuse remarque !

Je vais tenter avec un code de ce style et surtout le css qui va bien ce qui permettra plus de souplesse et une meilleure visibilité :

Code : Tout sélectionner

<div id="container">
            <div id="TxtHaut"></div>
            <div id="VignetteJpg"></div>
            <div id="TxtBas"></div>
</div>

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Fixer un texte dans un cadre

Message par Jpe54 » 09 oct. 2019, 18:07

Bonsoir,

Le codage du tableau en DIV / CSS en cours permet effectivement un positionnement des textes très précis mais des problèmes graphique sont désormais présents.

En effet je bute en CSS sur 2 class div malgré diverses solutions lues et testées.

DIV Container :
1- Comment corriger le décalage vers le bas de l'alignement horizontal lors de la duplication des conteneurs ? (display: inline-block; voire float: left; ne fonctionnent pas pour aligner les div) avec Edge / Chrome / IE11.

Code : Tout sélectionner

.container div {
	display: inline-block;
	/* float: left; */
}
2- Comment réinitialiser la valeur left à zéro et / ou avec clear, uniquement, lors du passage à la ligne suivante ?

DIV DiaVignette :
3- Pas su trouver la solution pour centrer une image horizontale (valeur height:auto; sans effet).

Toutes remarques seraient bienvenues…

Amitiés

CSS :

Code : Tout sélectionner

/* =================================== */
/* =================================== */
/* =   CSS3 Vignettes Diapositives   = */
/* =================================== */
/* =================================== */
/*          Version 09/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;
}

/* =================================== */
/* =================================== */
/*  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     */
/* =================================== */
/* =================================== */

.container {
	position: relative; 
	margin-top: 5px; 
	margin-left: 5px; 
	height: 186px;
    width: 186px;
    border-radius: 8px;
    background: #F4F4F4;
	box-shadow: 5px 5px 5px #777;
	/* clear: left; */
	clear: both;
	/* left :185px; */
	float: left; 
}
.DiaEtiquette {
	height: 20px;
	color: blue;
	margin-top: 2px; 
	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: 160px;
	height: 140px;
	

	/* text-align: middle; 
		/* display: table-cell; 
		display: block; 
		vertical-align: middle; */
}

.DiaVignette img {
		vertical-align: middle;
		max-width: 158px;
        max-height: 138px; 
        border: 1px solid #000000; 	
    }

/* =================================== */
/* =================================== */
/*      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: -142px;
            left: -122px;
            width: 160px;
            height: 140px;
            overflow: visible;
        }

/* =================================== */
HTML :

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 09/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 = "Diapo "; 
image = "";
url = "222";
caption = "Absente";
DateExif = "22/10/2018 - 11h35";
InfoBulle = "Barrage de Roselend";

UrlRetour = "xxx"

for (i = 1; i < 12; i++) {
document.write('<td><table id="tablebox"><tr>')
// Pour Test : alterner orientation image
if ((i % 2) == 0 ) {
image = "001H.jpg";
} else {
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('<div class="container">');
					
					document.write('<div class="DiaEtiquette"><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.write('<b>' + file + i +'.jpg</b>'); // Variable i pour tester si ordre numérique correct
					document.write('<a class="TxtL" href="POIs_GeoPortail_SAT.htm?' + UrlRetour + '&IconJpg=' + image + '&Lat=' + GPSlat + '&Lon=' + GPSlon + '&Alt=' + GPSAlt + '">?</a></div>');
					
					document.write('<div class="DiaVignette"><a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a></div>');
					
					document.write('<div class="DiaEtiquette"><b>' + DateExif + '</b>');
					document.write('<a class="Exif" href="#">[EXIF]<span>' + InfoBulle + '</span></a></div>');
					
					// document.write('</div>');
					
                } else {
				
					document.write('<div class="container">');
					
                    document.write('<div class="DiaEtiquette"><b>' + file + i +'.jpg</b>');
					
					document.write('<div class="DiaVignette"><a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a></div>');
					
					document.write('<div class="DiaEtiquette"><b>' + DateExif + '</b>');
					document.write('<a class="Exif" href="#">[EXIF]<span>' + InfoBulle + '</span></a></div>');
					
					// document.write('</div>');
                }

// Pour Test : Passer à la ligne suivante
if (i == 6) {document.write('</div></br>');}
}
document.write('</div></br>');

// -->
    </script>
</body>
</html>
Fichier exemple :
EDIT du 10/10/2019 : Uniquement suppression du fichier joint - par moi même - pour laisser place à un fichier correct plus bas.
Modifié en dernier par Jpe54 le 10 oct. 2019, 15:07, modifié 2 fois.

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Fixer un texte dans un cadre

Message par webmaster » 10 oct. 2019, 13:24

Bonjour,

C'est nettement mieux :)
Mais je vois encore ligne 25 des histoires de table
A mon avis, il y a des fermetures de div qui ne sont pas correctes
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Fixer un texte dans un cadre

Message par Jpe54 » 10 oct. 2019, 14:49

Bonjour,

:? 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 container

Pourtant j'utilisais la méthode des 4 yeux … :lol: Les miens et mes lunettes, comme quoi le matériel ne vaut l'humain !

j'ai honte ! 1000 mercis !

C'est nettement plus compréhensible comme fonctionnement avec les fermetures div replacées aux bons endroits sans chercher à gérer décalages et sauts de ligne !

A la lecture du code résultant j'en ai profité pour coder le mode gras en CSS.

Reste le positionnement des images horizontales à centrer verticalement sur lesquelles je sèche. Certainement un truc tout bête !

CSS :

Code : Tout sélectionner

/* =================================== */
/* =================================== */
/* =   CSS3 Vignettes Diapositives   = */
/* =================================== */
/* =================================== */
/*          Version 09/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;
}

/* =================================== */
/* =================================== */
/*  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     */
/* =================================== */
/* =================================== */

.container {
	position: relative; 
	margin-top: 6px; 
	margin-left: 6px; 
	height: 186px;
    width: 186px;
    border-radius: 8px;
    background: #F4F4F4;
	box-shadow: 5px 5px 5px #777;
	float: left; 
}
.DiaEtiquette {
	height: 20px;
	color: blue;
	font-weight: bold;
	margin-top: 2px; 
	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: 160px;
	height: 140px;
}

.DiaVignette img {
		vertical-align: middle;
		max-width: 158px;
        max-height: 138px; 
        border: 1px solid #000000; 	
    }

/* =================================== */
/* =================================== */
/*      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: -142px;
            left: -122px;
            width: 160px;
            height: 140px;
            overflow: visible;
        }

/* =================================== */
HTML :

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/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 = "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";
}

// 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('<div class="container">');
					
					document.write('<div class="DiaEtiquette"><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.write('' + file + i + '.jpg'); // Variable i pour tester si ordre numérique correct
					document.write('<a class="TxtL" href="POIs_GeoPortail_SAT.htm?' + UrlRetour + '&IconJpg=' + image + '&Lat=' + GPSlat + '&Lon=' + GPSlon + '&Alt=' + GPSAlt + '">?</a></div>');
					
					document.write('<div class="DiaVignette"><a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a></div>');
					
					document.write('<div class="DiaEtiquette">' + DateExif + '');
					document.write('<a class="Exif" href="#">[EXIF]<span>' + InfoBulle + '</span></a></div>');
					
					document.write('</div>');
					
                } else {
				
					document.write('<div class="container">');
					
                    document.write('<div class="DiaEtiquette">' + file + i +'.jpg</div>');
					
					document.write('<div class="DiaVignette"><a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a></div>');
					
					document.write('<div class="DiaEtiquette">' + DateExif + '');
					document.write('<a class="Exif" href="#">[EXIF]<span>' + InfoBulle + '</span></a></div>');
					
					document.write('</div>');
                }
}

// -->
    </script>
</body>
</html>
Modifié en dernier par Jpe54 le 11 oct. 2019, 13:51, modifié 1 fois.

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Fixer un texte dans un cadre

Message par webmaster » 10 oct. 2019, 15:35

Cool. Ca progresse bien.

Pour le centrage vertical en CSS, c'est une galère surtout si on ne connait pas la hauteur des éléments.
J'ai fait des essais sans succès...

Je recommande cette page qui m'a aidé souvent :
https://www.alsacreations.com/xmedia/tu ... demos.html
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Fixer un texte dans un cadre

Message par Jpe54 » 11 oct. 2019, 13:49

Bonjour,

Solution de positionnement de l'image trouvée en quelques secondes grâce à votre lien du dernier post en utilisant display: table-cell; en association avec vertical-align: middle;.

Un grand merci pour votre patience et dévouement.

Voici les codes CSS et HTML plus le fichier résultant à disposition de tous.

@mitiés,

Jean-Paul

Code : Tout sélectionner

/* =================================== */
/* =================================== */
/* =   CSS3 Vignettes Diapositives   = */
/* =================================== */
/* =================================== */
/*          Version 10/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;
}

/* =================================== */
/* =================================== */
/*  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     */
/* =================================== */
/* =================================== */

.container {
	position: relative; 
	margin-top: 6px; 
	margin-left: 6px; 
	height: 185px;
    width: 184px;
    border-radius: 8px;
    background: #F4F4F4;
	box-shadow: 5px 5px 5px #777;
	float: left; 
}
.DiaEtiquette {
	height: 20px;
	color: blue;
	font-weight: bold;
	margin-top: 2px; 
	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: -142px;
            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 19.02 10/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 = "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";
}

// 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('<div class="container">');
					
					document.write('<div class="DiaEtiquette"><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.write('' + file + i + '.jpg'); // Variable i pour tester si ordre numérique correct
					document.write('<a class="TxtL" href="POIs_GeoPortail_SAT.htm?' + UrlRetour + '&IconJpg=' + image + '&Lat=' + GPSlat + '&Lon=' + GPSlon + '&Alt=' + GPSAlt + '">?</a></div>');
					
					document.write('<div class="DiaVignette"><a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a></div>');
					
					document.write('<div class="DiaEtiquette">' + DateExif + '');
					document.write('<a class="Exif" href="#">[EXIF]<span><br>' + InfoBulle + '</span></a></div>');
					
					document.write('</div>');
					
                } else {
				
					document.write('<div class="container">');
					
                    document.write('<div class="DiaEtiquette">' + file + i +'.jpg</div>');
					
					document.write('<div class="DiaVignette"><a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a></div>');
					
					document.write('<div class="DiaEtiquette">' + DateExif + '');
					document.write('<a class="Exif" href="#">[EXIF]<span><br>' + InfoBulle + '</span></a></div>');
					
					document.write('</div>');
                }
}

// -->
    </script>
</body>
</html>
Fichier final de démo complet :
2019-10-10 Code_et_Vignette.zip
(25.79 Kio) Téléchargé 1317 fois

Répondre