• Fond 1

    J'ai déjà proposé ce genre de montage mais j'ai oublié depuis les détails et cela va me faire du bien d'y revenir !

    Mon idée de montage est de proposer des vignettes éparpillées qui, au survol, reprennent leur position et reconstituent la grande image; cela va me demander quelques pages avant d'avoir assimilé la technique !

    Nous pouvons sélectionner le fond d'une vignette par une portion précise d'une grande image.

    Nous pouvons positionner cette vignette au dessus de la grande image d'origine, en noir et blanc de préférence, de façon à ce qu'elle se place au dessus de la zone sélectionnée.

    La seule difficulté est de maîtriser les unités de sélection de la portion et celles du positionnement... et j'en suis là !

    La sélection de la portion de la grande image s'écrit par: background-position:10% 20%;

    Le positionnement s'écrit, dans mes essais par: transform:translate(100px,200px); Chez moi, les % en translate ne fonctionne pas (?)

    Il faut donc trouver le rapport entre % du fond et le positionnement en pixels !

    Cet exemple reprend des positions caractéristiques (angle gauche/haut, milieu et angle droit/bas) pour s'habituer !

     

     

     

     

     

    <div style="width: 1000px; height: 564px; border: 4px ridge white; margin: 0px auto;">
    <p id="m1" class="haie">&nbsp;</p>
    <p id="m2" class="haie">&nbsp;</p>
    <p id="m3" class="haie">&nbsp;</p>
    <p id="m4" class="haie">&nbsp;</p>
    </div>
    <style><!--
    #m1{position:absolute; width:1000px; height:564px; transform:translate(0px,0px); background:url('http://ekladata.com/u_fm0QJ_LLvJHADCICSqMf1cfI0@1000x564.jpg');filter:grayscale(1); -webkit-filter:grayscale(1); opacity:0.5;}
    .haie{position:absolute; width:200px; height:200px;  background:url('http://ekladata.com/u_fm0QJ_LLvJHADCICSqMf1cfI0@1000x564.jpg');}
    #m2{transform:translate(0px,0px); background-position:0% 0%; }
    #m3{transform:translate(800px,364px); background-position:100% 100%;}
    #m4{transform:translate(400px,182px); background-position:50% 50%;}
    --></style>

    Lorsque nous regardons les valeurs qu'il faut en translation par rapport au fond, nous constatons que le point de référence de la sélection est son angle haut/gauche, ce qui oblige à tenir compte des dimensions de la vignette pour le positionnement.

    Ainsi, pour la vignette angle droit/bas: le montage fait 1000x564px et la vignette 200x200px; son angle haut/gauche est donc positionné en X:1000-200px=800px  et Y:564-200=364px

    La vignette du milieu à son angle haut/gauche à 400px du bord gauche;  en hauteur, cette vignette prend l'image de fond à 50% donc à 564x50%=282px, ce qui correspond à son centre; l'angle haut:gauche est donc à 282-100px=182px.

    Ceci n'est pas des plus clairs mais je n'ai pas trouvé de formule plus simple !

    Je vais préparer quelques montages avec images ou texte qui se reconstituent au survol; pour les images, ce sera un type puzzle, pour les texte, un type télégramme codé !

    Bien entendu, plus il y aura des sélections, plus le code sera long ... désolé !