-
Présenter un lieu
Code d'un article publié mais comme le texte est spécifique à chaque article, n'en retenez que le principe !
Survolez les mots en rouge.
Nous voyons des articles, qui présentent un lieu, avec un texte de présentation et des images les unes sous les autres; je vous propose une présentation où le texte et les images sont compris dans un cadre défini.
La taille de la police est paramétrée en adaptatif pour apparaître grande, sur les grands écrans et petite, sur les petits.
Les images, invisibles au départ, s'afficheront au survol de mots précis et rempliront la totalité du cadre: exemple.
Vous pourrez ainsi proposer soit des liens dans le texte, soit une liste de noms de lieux, avec affichage du lieu au survol de chaque nom.
Le principe est d'insérer, dans le texte, des noms à survoler et de placer dessous, en invisible, les images correspondantes.
Le texte s'écrit normalement, les boutons invisibles et les images sont placés en absolute.
Les mots/lien sont colorés en rouge, par l'outil couleur de texte, et à déterminer dans votre texte.
Au dessus de chacun, on place un bouton, en premier plan et en dessous,une image en taille 0w/0w.
Le survol du bouton agrandit l'image correspondante, en premier plan.
Premier lien lierre.
Et comme un lierre obscur qui circonvient un tronc
Et s’en fait un tuteur en lui léchant l’écorce,
Grimper par ruse au lieu de s’élever par force ? (Ed Rostand)Feuille jaune.
Feuille de chêne.
<div style="width: 60vw; height: 33.75vw; margin: 0.1vh auto; font-size: 0.8vw; text-align: center;">
<p id="lien1"> </p>
<p id="lien2"> </p>
<p id="lien3"> </p>
<p id="lien4"> </p>
<p id="lien5"> </p>
<p id="lien6"> </p>
<p id="mg1"> </p>
<p id="mg2"> </p>
<p id="mg3"> </p>
<p id="mg4"> </p>
<p id="mg5"> </p>
<p id="mg6"> </p>
<p style="text-align: center; font-size: 0.8vw;"><span style="background-color: #ffff00;"><strong>Survolez les mots en rouge.</strong></span></p>
<p>Nous voyons des articles, qui présentent un lieu, avec un texte de présentation et des images les unes sous les autres; je vous propose une présentation où le texte et les images sont compris dans un cadre défini.</p>
<p>La taille de la police est paramétrée en adaptatif pour apparaître grande, sur les grands écrans et petite, sur les petits.</p>
<p>Les images, invisibles au départ, s'afficheront au survol de mots précis et rempliront la totalité du cadre: <span style="color: #ff0000;"><strong>exemple</strong></span>.</p>
<p>Vous pourrez ainsi proposer soit <span style="color: #ff0000;"><strong>des liens</strong></span> dans le texte, soit une liste de noms de lieux, avec affichage du lieu au survol de chaque nom.</p>
<p>Le principe est d'insérer, dans le texte, des noms à survoler et de placer dessous, en invisible, les images correspondantes.</p>
<p>Le texte s'écrit normalement, les boutons invisibles et les images sont placés en absolute.</p>
<p>Les mots/lien sont colorés en rouge, par l'outil couleur de texte, et à déterminer dans votre texte.</p>
<p>Au dessus de chacun, on place un bouton, en premier plan et en dessous,une image en taille 0w/0w.</p>
<p>Le survol du bouton agrandit l'image correspondante, en premier plan.</p>
<p>Premier lien <span style="color: #ff0000;"><strong>lierre.</strong></span></p>
<p>Et comme un <span style="color: #ff0000;"><strong>lierre obscur</strong></span> qui circonvient un tronc<br />Et s’en fait un tuteur en lui léchant l’écorce,<br />Grimper par ruse au lieu de s’élever par force ? (Ed Rostand)</p>
<p><span style="color: #ff0000;"><strong>Feuille jaune.</strong></span></p>
<p><span style="color: #ff0000;"><strong>Feuille de chêne.</strong></span></p>
</div>
<style><!--
#lien1{position:absolute; z-index:10; width:6vw; height:1.5vw; transform:translate(48vw,6vw);}
#lien2{position:absolute; z-index:10; width:5vw; height:1.5vw; transform:translate(15vw,7.5vw);}
#lien3{position:absolute; z-index:10; width:4vw; height:1.5vw; transform:translate(31vw,17.5vw);}
#lien4{position:absolute; z-index:10; width:7vw; height:1.5vw; transform:translate(24vw,19vw);}
#lien5{position:absolute; z-index:10; width:8vw; height:1.5vw; transform:translate(26vw,23vw);}
#lien6{position:absolute; z-index:10; width:10vw; height:1.5vw; transform:translate(25vw,25vw);}
#mg1{position:absolute; z-index:1; width:0vw; height:0vw; background:url('http://ekladata.com/PjvhsLNdS2EdaDQK1QQKptKPrVc.jpg'); background-size:cover; transform:translate(50vw,7vw); transition:all 1s linear;}
#mg2{position:absolute; z-index:1; width:0vw; height:0vw; background:url('http://ekladata.com/YTMog5_CVqViyxXhHK9wbXzgjUE.jpg'); background-size:cover; transform:translate(17vw,8vw); transition:all 1s linear;}
#mg3{position:absolute; z-index:1; width:0vw; height:0vw; background:url('http://ekladata.com/vyMaPTiUCP8hficaZ9AxMF78uNg.jpg'); background-size:cover; transform:translate(33vw,18vw); transition:all 1s linear;}
#mg4{position:absolute; z-index:1; width:0vw; height:0vw; background:url('http://ekladata.com/nhSeVFvXi0ZdZIjKrnrpnv5bjLw.jpg'); background-size:cover; transform:translate(26vw,20vw); transition:all 1s linear;}
#mg5{position:absolute; z-index:1; width:0vw; height:0vw; background:url('http://ekladata.com/2VsYdrrWoK_huZjvit6y7DQXuFs.jpg'); background-size:cover; transform:translate(28vw,24vw); transition:all 1s linear;}
#mg6{position:absolute; z-index:1; width:0vw; height:0vw; background:url('http://ekladata.com/7FZLPneLUv89aiI1mzRcZFrwFDg.jpg'); background-size:cover; transform:translate(28vw,26vw); transition:all 1s linear;}
#lien1:hover ~ #mg1,#lien2:hover ~ #mg2,#lien3:hover ~ #mg3,#lien4:hover ~ #mg4,#lien5:hover ~ #mg5,#lien6:hover ~ #mg6{width:60vw; height:33.75vw; transform:translate(0vw,0vw); }
--></style>