• Principe PE 5

    En ce moment, je propose des affichages plein écran par un code HTML/CSS mais je voudrais vérifier une autre façon de faire.

    Cette façon oblige tout de même à ouvrir le code source (<>) mais pour des ajouts d'attributs, ce qui est plus simple.

    Essai plein écran

    Un clic gauche sur cette image l'ouvre en taille moyenne, dans la même page; si vous cliquez droit sur cette image moyenne, et choisissez la commande: "Afficher l'image", vous l'afficherez en plus grand sur votre écran puis, si vous cliquez gauche sur cette dernière image, vous l'afficherez en plein écran.

    La saisie de cette image a été faite par l'icône "Image", de la barre d'outils; j'ai défini une taille (800x450px) et cliqué que "ouvrir originale au clic".

    Le code généré est le suivant:

     <p style="text-align: center;"><a href="http://ekladata.com/rXTDyXxlNbylisrsuxPbx3we0Ss.jpg"><img src="http://ekladata.com/rXTDyXxlNbylisrsuxPbx3we0Ss@800x450.jpg" alt="Essai plein &eacute;cran" /></a></p>

    ******

    Nous pouvons le modifier en ouvrant le code source: exemple: ajout d'une bordure à l'image à cliquer:

    <p style="text-align: center;"><a href="http://ekladata.com/rXTDyXxlNbylisrsuxPbx3we0Ss.jpg"><img style="border:0.6vh ridge grey;" src="http://ekladata.com/rXTDyXxlNbylisrsuxPbx3we0Ss@800x450.jpg" alt="Essai plein &eacute;cran" /></a></p>

    avec une ombre:

    <p style="text-align: center;"><a href="http://ekladata.com/rXTDyXxlNbylisrsuxPbx3we0Ss.jpg"><img style="border:0.6vh ridge grey; box-shadow:0.4vh 0.4vh 0.8vh black; " src="http://ekladata.com/rXTDyXxlNbylisrsuxPbx3we0Ss@800x450.jpg" alt="Essai plein &eacute;cran" /></a></p>

    Je vous laisse faire vos propres essais.

    Un inconvénient est que pour revenir à l'article, il faut utiliser la flèche "Reculer d'une page".

    ******

    Nous pouvons également préférer que l'image s'ouvre,  dans une nouvelle page; saisissons une autre image par l'icône "Image" et ouvrons le code source pour modifier le code généré.

    Principe PE 5

    La flèche de la case redimensionner l'image vous ouvre un choix de tailles.

    Principe PE 5

    <p style="text-align: center;"><a href="http://ekladata.com/v4GbY6a5fW1t66762cBjnXqh5Cs.jpg"><img src="http://ekladata.com/v4GbY6a5fW1t66762cBjnXqh5Cs@800x450.jpg" alt="Principe PE 5" /></a></p>

    Ajoutons l'attribut: target="_blank" pour que le lien s'ouvre dans une nouvelle page, comme sur mon image:

    <p style="text-align: center;"><a href="http://ekladata.com/v4GbY6a5fW1t66762cBjnXqh5Cs.jpg" target="_blank"><img src="http://ekladata.com/v4GbY6a5fW1t66762cBjnXqh5Cs@800x450.jpg" alt="Principe PE 5" /></a></p>

    Au clic, l'image s'ouvre dans une nouvelle page, en taille moyenne; un clic gauche dessus l'affiche en plein écran.

    Pour revenir à l'article, il suffit de fermer l'onglet.