• Diaporama 4 images

    Cette page me sert surtout d'exemple, suite à une demande.

    J'ai la chance d'habiter dans une petite maison, entourée d'un hectare de bois; l'électricité arrive du village voisin, par câble aérien, soutenu par des poteaux bois.

    Dans peu de temps, ce câble sera enterré et passé dans des gaines déjà en place mais, en raison d'un budget dépassé, les travaux ne sont pas terminés et la solution provisoire a été de me laisser en bout de ligne, en doublant le poteau, afin qu'il résiste au poids venant d'une seule direction.

    Depuis quelques temps, j'avais constaté une inclinaison de ce dernier poteau; je pensais que le poids du câble en était la raison mais elle n'est pas la seule d'après les photos que vous découvrirez en cliquant sur les noms, avec retour par le bouton rouge.
    Je vois souvent un pic épeiche venir se nourrir devant ma porte ... et je sais maintenant où il niche !


    <div id="mont">
    <div id="ancres"><a id="lien1" class="ancre"></a> <a id="lien2" class="ancre"></a> <a id="lien3" class="ancre"></a>
    <p id="tr0"><a href="#lien"><img src="http://ekladata.com/5vYRXqnn3UosWx7Y0xF1eIgstfw/btrec1.png" alt="" /></a></p>
    <p id="cde"><a style="font-size: 25pt; color: lime; text-shadow: 1px 1px black; font-weight: bold;" href="#lien1">PIC 1</a><br /> <a style="font-size: 25pt; color: lime; text-shadow: 1px 1px black; font-weight: bold;" href="#lien2">PIC 2</a><br /> <a style="font-size: 25pt; color: lime; text-shadow: 1px 1px black; font-weight: bold;" href="#lien3">PIC 3</a></p>
    <img id="pic1" src="http://ekladata.com/AtEWBMtpmnTIV0zkvw78eR-6nTA/6613.jpg" alt="" /> <img id="pic2" src="http://ekladata.com/gdHMgZRRnx5ASMzilaf2fjEUp90/6614.jpg" alt="" /> <img id="pic3" src="http://ekladata.com/bQH8WT7bG8hOg8LU9EqINP3lQSY/6614b.jpg" alt="" /></div>
    </div>

    <style type="text/css"><!--
    #mont{position:relative; width:800px; height:600px; margin:5px auto; background:url('http://ekladata.com/1QGpU-Lhy7ID5s8kEaHH_YODE3M/6612.jpg');}
    #tr0{transform:translate(750px,20px);position:absolute;z-index:15; }
    #cde{position:absolute; width:100px; height:300px; text-align:center; transform:translate(700px,100px);}
    #pic1{ position:absolute; transition:all 2s linear; width:0px; height:0px; transform:translate(400px,300px);}
    #pic2{ position:absolute; transition:all 2s linear; width:0px; height:0px; transform:translate(400px,300px);}
    #pic3{ position:absolute; transition:all 2s linear; width:0px; height:0px; transform:translate(400px,300px);}
    #ancres a#lien1:target ~ #pic1{width:800px; height:600px; transform:translate(0px,0px);}
    #ancres a#lien2:target ~ #pic2{width:800px; height:600px; transform:translate(0px,0px);}
    #ancres a#lien3:target ~ #pic3{width:800px; height:600px; transform:translate(0px,0px);}
    --></style>