• De la couleur.

    De la couleur au survol; toujours dans les codes simples.

     


    Le filtre noir et blanc/couleur est simple à installer sur une image; d'autres filtres existent comme le filtre sépia, qui rend les images comme des photographies anciennes et que l'on peut passer en couleur au survol, de la même façon.

    Si vous savez dimensionner, héberger vos images et en récupérer l'adresse, il vous faut ouvrir l'icône code source (<>) et y écrire un code du genre:
    <p><img id="ft" src="http://...jpg"></p>
    <style><!--
    #ft{-webkit-filter:grayscale(1); filter:grayscale(1); transition:all 1s linear;}
    #ft:hover{-webkit-filter:grayscale(0); filter:grayscale(0);}
    --></style>

    Votre image est identifiée par id="ft"; ses attributs au départ sont le filtre noir et blanc actif (1) et la vitesse de l'animation déterminée (1 seconde)
    Au survol, le filtre est rendu inactif (0)

    Pour simplifier ce code, je ne parle pas de positionnement dans la page ou de décoration.

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

    Si vous ne savez pas dimensionner vos images, il vous faut ajouter les attributs largeur et hauteur, en conservant leur rapport largeur/hauteur, pour ne pas les déformer; 4/3 ou 16/9 en général.

    <p><img id="ft" src="http://...jpg"></p>
    <style><!--
    #ft{-webkit-filter:grayscale(1); filter:grayscale(1); transition:all 1s linear; width:800px; height:600px;}
    #ft:hover{-webkit-filter:grayscale(0); filter:grayscale(0);}
    --></style>

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

    Si vous ne savez pas dimensionner vos images, vous pouvez les héberger sur Ekla par l'icône image; la fenêtre qui s'ouvre vous fait sélectionner votre image dans vos dossiers, choisir sa taille et sa position dans la page; vous pouvez ou non ajouter un lien au clic, vers sa taille originale; dans ce cas, le changement noir et blanc/couleur ne se fera que sur l'image de l'article et non sur celle en lien.

    Lorsque vous avez défini les paramètres de votre image et qu'elle apparaît dans votre article, vous ouvrez le code source (<>) pour voir le code écrit par le programme.

    De la couleur.


    sans lien vers l'image en taille originale: <p style="text-align: center;"><img id="ft" src="http://ekladata.com/wV9gr2gXQqxBwavIyzGFqr1lWxA.jpg" alt="De la couleur." /></p>

    De la couleur.

     


    avec lien vers l'image en taille originale: <p style="text-align: center;"><a href="http://ekladata.com/Q8iEd6BIR96XEJbUbkm-fqsulTw.jpg"><img id="ft" src="http://ekladata.com/Q8iEd6BIR96XEJbUbkm-fqsulTw.jpg" alt="De la couleur." /></a></p>

    Pour appliquer l'effet au survol, il vous faut identifier l'image publiée, comme vous l'avez fait dans les codes précédents, en ajoutant au code: id="ft"


    Code du montage en début d'article: l'image est placée en fond de boîte, ce qui permet d'ajouter des décorations du genre relief 3D.

    <p id="mal">&nbsp;</p>

    <style><!--
    #mal{width:1000px; height:563px; margin:10px auto; border:4px solid #2F4F4F ; box-shadow:4px 4px 8px black; background:url('http://ekladata.com/eFC3ceJY-nX3oCo7zO8FYxCYnv8.jpg'); background-size:cover; filter:grayscale(1); -webkit-filter:grayscale(1); transition:all 2s linear; box-shadow:inset 6px 6px 12px white, inset -6px -6px 12px black;}
    #mal:hover{filter:grayscale(0); -webkit-filter:grayscale(0);}
    --></style>