• 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">&nbsp;</p>
    <p id="lien2">&nbsp;</p>
    <p id="lien3">&nbsp;</p>
    <p id="lien4">&nbsp;</p>
    <p id="lien5">&nbsp;</p>
    <p id="lien6">&nbsp;</p>
    <p id="mg1">&nbsp;</p>
    <p id="mg2">&nbsp;</p>
    <p id="mg3">&nbsp;</p>
    <p id="mg4">&nbsp;</p>
    <p id="mg5">&nbsp;</p>
    <p id="mg6">&nbsp;</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&eacute;sentent un lieu, avec un texte de pr&eacute;sentation et des images les unes sous les autres; je vous propose une pr&eacute;sentation o&ugrave; le texte et les images sont compris dans un cadre d&eacute;fini.</p>
    <p>La taille de la police est param&eacute;tr&eacute;e en adaptatif pour appara&icirc;tre grande, sur les grands &eacute;crans et petite, sur les petits.</p>
    <p>Les images, invisibles au d&eacute;part, s'afficheront au survol de mots pr&eacute;cis et rempliront la totalit&eacute; 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&eacute;rer, dans le texte, des noms &agrave; survoler et de placer dessous, en invisible, les images correspondantes.</p>
    <p>Le texte s'&eacute;crit normalement, les boutons invisibles et les images sont plac&eacute;s en absolute.</p>
    <p>Les mots/lien sont color&eacute;s en rouge, par l'outil couleur de texte, et &agrave; d&eacute;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&rsquo;en fait un tuteur en lui l&eacute;chant l&rsquo;&eacute;corce,<br />Grimper par ruse au lieu de s&rsquo;&eacute;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&ecirc;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>