• Adresse image

     

    J'ai eu le plaisir de lire qu'un fidèle visiteur essaie d'utiliser des codes sur son blog; il tente un changement d'image au survol et je voudrais revenir sur ce montage de base.

    Tout d'abord, il faut savoir héberger sur un site (galerie Ekla ou autre) et récupérer l'adresse des images.

    Bien des sites vous permettent d'héberger gratuitement vos images; je vais aller au plus simple, créer une galerie sur Ekla.

    Onglet "Contenu/nouvelle galerie"; vous donnez un nom à cette galerie et vous y importez des images depuis un fichier de votre PC.

    Une fois créée et remplie, vous retrouverez cette galerie en cliquant sur l'onglet "Contenu/Gérer les rubriques"; dans la colonne de gauche, vous trouvez le liste de vos galeries d'images.

    Vous l'ouvrez et trouvez des vignettes des images hébergées; clic sur une pour l'agrandir puis clic droit pour chercher la commande: "Copier l'adresse de l'image".

    Ne faites pas l'erreur de mes débuts (Michal) en enregistrant cette adresse sur une feuille de traitement de texte; cette feuille code l'adresse et elle ne sera plus utilisable dans votre éditeur de texte (code source(<>)); il faut l'écrire directement dans une page de votre éditeur de texte.

    Cette image sera aux dimensions dans lesquelles vous l'avez saisie; on peut supposer qu'elle sera trop grande pour la largeur de votre zone article de blog; pour la mettre à la dimension que vous souhaitez, vous pouvez utiliser l'adresse copiée: exemple:

    http://ekladata.com/CHrILOAlYfuNfOlMMOe8RJRmddI.jpg

    Mon image mesure 1920x1080px et s'affiche en 1424x801px; elle est au ratio 16/9, rapport entre la largeur et la hauteur.

    Si votre appareil photo prend des images au ratio 4/3, le ratio sera conservé.

    Si je veux que mon image mesure 1000x562px, pour conserver le ratio et ne pas la déformer, je vais écrire son adresse ainsi:

    http://ekladata.com/CHrILOAlYfuNfOlMMOe8RJRmddI@1000x562.jpg

    Imaginons que vos photos soient au ratio 4/3 et que vous vouliez les dimensionner en 1000x750px, pour conserver le ratio:

    http://ekladata.com/CHrILOAlYfuNfOlMMOe8RJRmddI@1000x750.jpg

    ********************

    Nous en sommes au point où nous savons copier les adresses de nos images et les dimensionner.

    Il est évident que pour faire un changement d'image, il nous faut 2 adresses différentes et aux mêmes dimensions; nous savons faire !

    Pour faire un changement d'image au survol, plusieurs écritures sont possibles mais vous devrez ouvrir la fenêtre code source (<>) dans la barre d'outils de votre création d'article.

     

     <p id="hov" style="width:1000px; height:562px; margin:5px auto; background:url('http://ekladata.com/CHrILOAlYfuNfOlMMOe8RJRmddI@1000x562.jpg'); background-size:cover;">&nbsp;</p>

    Vous retrouvez l'adresse de l'image dimensionnée en 1000x562px, placée en fond (background) de paragraphe (<p>) car je ne sais pas la changer directement et je crois que ce ne soit possible (?).

    Le paragraphe a été nommé (id="hov") afin de pouvoir modifier l'adresse de fond en code CSS.

    Le paragraphe est dimensionné aux dimensions des images et centré dans la zone le contenant: margin:5px auto;

    Nous allons copier l'adresse d'une seconde image et la dimensionnée de la même façon:

    http://ekladata.com/ZoF1IBx_-Bl3VwXJubhgM_hGagw@1000x562.jpg

    Complétons la ligne de code notre première image pour en changer l'adresse au survol:

    <p id="hov" style="width:1000px; height:562px; margin:5px auto;">&nbsp;</p>
    <style><!--
    #hov{background:url('http://ekladata.com/CHrILOAlYfuNfOlMMOe8RJRmddI@1000x562.jpg'); background-size:cover;}
    #hov:hover{background:url('http://ekladata.com/ZoF1IBx_-Bl3VwXJubhgM_hGagw@1000x562.jpg');}
    --></style>

    Et si nous ne sous sommes trompés, survolez l'image ci-dessous et ...

     

     Le changement est brutal mais le sujet n'est pas la transition: faisons au plus simple !

    On donne en première ligne CSS, entre <style><!-- et --></style> l'adresse de la première image de fond de "hov" et en seconde ligne, l'adresse de la seconde image de fond.

    On commande le changement d'image au survol par #hov:hover{...}

    Nous pouvons ajouter de la décoration à ce paragraphe mais, comme l'écrivait Rudyard Kipling, ceci est une autre histoire !