• Tag réactif

    Je viens de publier un montage de ce genre dans l'article 27 novembre et, à venir, un autre au 10 décembre.

    Si le principe de réalisation vous intéresse, en voici quelques détails.

    Deux images sont placées l'une sur l'autre:

    la première visible, est une image transparente (gif) qui ne reprend que les contours de l'image originale.

    la seconde, est l'image originale, qui est invisible et qui apparait au survol, selon programmation.

    Pour réaliser l'image transparente, il faut utiliser un logiciel de traitement d'image (Photofiltre, the Gimp...) et c'est le point sur lequel je vais insister ici car le code est relativement simple, d'autant que mon exemple ne sera d'abord qu'avec une image, pour le principe; je reviendrai ensuite sur un montage avec x images.

    Sur the Gimp, et je sais l'avoir fait sur Photofiltre,

    vous ouvrez votre image: onglet Fichier/ouvrir.

    Vous la dimensionnez selon votre choix: onglet image/echelle et taille de l'image.

    Vous augmentez la netteté si nécessaire: onglet Filtre/amélioration/ renforcer la netteté: mes réglages sont souvent: rayon: 19.7; quantité: 40 ou 50; seuil:0.

    Vous enregistrez cette image originale: onglet fichier/exporter comme... choisissez votre dossier d'accueil et le nom de votre image; extension jpg par défaut.

    Revenez sur votre image dans the Gimp avec votre image toujours affichée: onglet Filtre/G'mic/contour (double clic pour ouvrir liste déroulante et choisir: Edges/ les réglages que j'ai adopté ici sont: smoothness:0 et threshold:15.00 mais je vous conseille d'essayer d'autres valeurs, pour tester.

    Vous voyez le résultat du réglage choisi en cliquant sur Appliquer et, si cela vous convient, clic sur Appliquer.

    Votre image des contours est au format JPG, non transparente; pour la rendre transparente: onglet Couleur/couleur vers alpha; par défaut, ce sera le blanc du fond qui sera choisi et vous le verrez dans la fenêtre de prévision/validez.

    Onglet couleurs/luminosité et contraste: je passe luminosité à 0 et contraste au max pour que les traits noirs soient bien visibles.

    Fichier/exporter comme et choisissez l'extension Gif, dans la liste déroulante, en bas à gauche (au dessus de Aide); le format gif est moins fidèle en couleurs mais plus léger en poids que le format PNG; tout deux acceptent la transparence.

    A ce stade, vous avez donc, au même format, l'image originale (JPG) et l'image de contours (GIF); vous les hébergez  et vous récupérez leurs adresses, que vous placez dans le code ci-dessous.

    L'image de fond de mon exemple est une texture de mur de brique, hébergée sur Ekla et son adresse copiée; vous pouvez, bien entendu, mettre le fond qui vous convient ou pas ee fond du tout.

     

    Assez de texte, passons à un exemple et à son code: survolez ce montage.

     

    <div id="fd"><img id="c1" src="http://ekladata.com/vRsLxuE6Wit6__yBOwgjY7544Mo/DSCN6490.jpg" alt="" /></div>
    <style type="text/css"><!--
    #fd{width:800px; height:600px; margin:5px auto; border:6px ridge grey; background:url('http://ekladata.com/Dsj4mJaOGEZEorlwzKYyv4ndZl8/6490a.gif');}
    #c1{transition:all 2s linear; opacity:0;}
    #c1:hover{opacity:1;}
    --></style>
    Adresse image opaque et adresse image transparente.
    ...