• Image/texte 3

    Le principe étant acquit, on peut modifier la présentation selon ses goûts.

    Je vais vous proposer une zone texte centrée, toujours de 400x600px et 4 images de 800x600px, placées à droite et à gauche et qui s'agrandissent au survol.

    On peut placer plus ou moins d'images, affichées de chaque coté du texte ou non ou faire l'inverse, les images centrées et deux zones texte autour... etc, etc...

    Depuis quelques temps, j'ai adopté la technique générale d'hébergement de mes images par l'icône "image" et je récupère les adresses dans le code source(<>).

     

     

    Survolez les images latérales.

    J'ai ajouté une bordure noire au montage, afin de bien en montrer les limites;
    Il fait 806px par 606px pour tenir compte des bordures de 3 px des vignettes.

    J'ai également une texture de fond, hébergée sur Ekla, dans un dossier de mes fichiers, qui me sert dans ces cas; j'ai ainsi un stock de textures déjà hébergées, dans lequel je vais piocher.

     

     

     

    <div style="width: 806px; height: 606px; margin: 5px auto; border: 1px solid black; background: url('http://ekladata.com/0ENOgXZqC9bdBebGQGb6QqyaiYE/img694.jpg');">
    <p id="mggh">&nbsp;</p>
    <p id="mggb">&nbsp;</p>
    <p id="mgc"><span style="background-color: #ffff00;">Survolez les images lat&eacute;rales.</span></p>
    <p id="mgdh">&nbsp;</p>
    <p id="mgdb">&nbsp;</p>
    </div>

    <style type="text/css"><!--
    #mggh{position:absolute; transition:all 1s linear; transform:translate(0px,0px); width:200px; height:300px; border: 3px solid white; background:url('http://ekladata.com/Rrm0kpURHnuh5InIkFwcY6CwuBc.jpg'); background-position:50% 50%;}
    #mggb{position:absolute; transition:all 1s linear; transform:translate(0px,300px); width:200px; height:300px; border: 3px solid white; background:url('http://ekladata.com/loUeNMRpQK6DYyVXu2zNRMXNpPY.jpg'); background-position:50% 50%;}
    #mgc{position:absolute; transition:all 1s linear; transform:translate(200px,0px); width:380px; height:600px; padding:10px; text-align:center; font-size:12pt; }
    #mgdh{position:absolute; transition:all 1s linear; transform:translate(600px,0px); width:200px; height:300px; border: 3px solid white; background:url('http://ekladata.com/rXzHqgyE6kSoaP7w3eSkfgDCYKA.jpg'); background-position:50% 50%;}
    #mgdb{position:absolute; transition:all 1s linear; transform:translate(600px,300px); width:200px; height:300px; border: 3px solid white; background:url('http://ekladata.com/TuANLakJatIE12KnykFd4v-EOUE.jpg'); background-position:50% 50%;}
    #mggh:hover{width:800px; height:600px; z-index:5; transform:translate(0px,0px);}
    #mggb:hover{width:800px; height:600px; z-index:5; transform:translate(0px,0px);}
    #mgdh:hover{width:800px; height:600px; z-index:5; transform:translate(0px,0px);}
    #mgdb:hover{width:800px; height:600px; z-index:5; transform:translate(0px,0px);}
    --></style>
    ...
    Ayant changé la formule de mes articles, je peux ainsi vérifier qu'il suffit de changer les adresses des images pour les personnaliser.