AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Image noir et blanc en couleur au survol

    Partagez
    Alzufen
    MasculinAge : 21Messages : 2102

    le Jeu 4 Sep 2014 - 1:56

    Bonjour, bonsoir, bonne nuit, bonne année, ou ce que vous voulez.

    Me voici, me voilà, me riz voilà ! Pour un tuto, encore un, et un petit en plus, encore et toujours je dois être fidèle au fait de poster des petits tutos, ce sont mes amis, ils me donnent des curly !

    Trêve de plaisanterie, aujourd'hui je vais vous présenter un petit effet qui permet de passer une image en couleur au survol de celle-ci, elle sera en noir et blanc de base, mais elle peut aussi être rouge pour devenir bleu, si si.

    Important
    Ce tutoriel ne fonctionnera seulement si vous avez accès à une feuille de style CSS, de préférence donc via le panneau d'administration de votre forum, ou dans le pire des cas via une page HTML et donc grâce à une iframe relié au forum où vous souhaitez vous en servir.

    Malheureusement, cette version du tutoriel ne fonctionne que sur Chrome, du moins l'effet de transition ne marche qu'a condition d'être sous Google Chrome, sinon l'effet sera instantané, pour ceux désirant quand même cet effet de transition sous tous les navigateurs, veuillez suivre la version alternative ci-dessous.

    Ce tuto est court et extrêmement facile, la personnalisation autant que la réalisation est à la portée de toutes personnes même non codeur.


    Tout d'abord, avant toute chose, il va vous falloir utiliser un peu de Graphisme, prenez l'image que vous désirez utiliser et donnez lui sa couleur de base (Dans notre cas, noir & blanc), je me suis servi de mon avatar pour l'exemple ci-dessous :

    Spoiler:


    Utilisation optimal
    Se code peut causer un petit soucis assez idiot. En réalité, vu que l'effet de transition est progressif (1sec dans mon cas) il vous faut rester sur l'image pendant ce laps de temps, ou rester en dehors de celle-ci pendant le même laps de temps. Sinon, l'image ne va pas faire l'effet progressif et retournera à sa couleur d'origine ou à celle au survol d'un coup.


    Maintenant, pour apprendre à faire ça, il vous faudra avoir appris les transitions et les pseudo élément notamment "hover", pensez donc à consulter les tutos en lien avec ceux-ci si jamais vous voulez pousser la chose un peu plus loin mais ils ne sont pas indispensable pour réaliser se tuto là.

    Tout d'abord, mettons en place le html, il vous faudra ajoutez ceci là où vous devez avoir votre image de base :

    Code:
    <div id="image1"></div>

    Information
    C'est tout petit, et vous avez sans doute remarqué qu'il n'y a pas d'imager. Effectivement, pour le bon fonctionnement du code nous allons appliquer celle-ci via le CSS et en fond (donc background). Sans cela, il serait un peu plus difficile de faire l'effet désiré, pas impossible mais plus dur ou moins optimal.


    Maintenant, il vous faudra ajouter le css en lien avec celui-ci, pour rappeler il vous faudra l'ajouter à votre feuille de style css (PA > Affichage > Couleurs > Feuille de style CSS) ou entre balise "style" dans votre page HTML.

    Pour l'image de base :

    Code:
    #image1{
    background: url(http://image.noelshack.com/fichiers/2014/36/1409787523-1401284846-alzufen-avatar.png);
    width: 170px;
    height: 320px;
    transition: 1s all;
    }


    / ! \ Pensez à adapter la largeur et la hauteur à celle de votre image, elles doivent être identique. / ! \

    Pour l'image au survol :

    Code:
    #image1:hover{
    background: url(http://image.noelshack.com/fichiers/2014/22/1401284846-alzufen-avatar.png);
    transition: 1s all;
    }

    Pour personnaliser
    Si vous souhaitez personnaliser le code, gardez bien à l'esprit que le "hover" signifie quand le bloc sera survoler, et l'autre le bloc de base.

    Ensuite, si vous souhaitez rajouter des images, il vous faudra copier/coller ce code en changeant l'id par autre chose (par exemple, dans notre cas, il faudra mettre "image2") et il faudra faire la même chose dans le css, remplacer "#image1" par "#image2".

    Si vous souhaitez appliquer l'effet à la même image mais plusieurs fois sur la même page, remplacez id="image1" par class="image1" et dans votre css remplacer "#image1" par ".image1" et le tour est jouez Wink

    Dernière chose, si vous souhaitez que l'effet soit instantané ou au contraire qu'il soit plus long à se mettre en place, il vous faudra soit retirer les "transition: 1s all" pour retirer le laps de temps, ou augmenter le "1s" par autre chose (exemple 5s) pour augmenter le temps. Si autrement vous souhaitez ajouter un temps différent entre le survol de la souris et le moment où elle quitte l'image, il suffit de mettre un temps différent aux deux mais je ne vous conseille rien de tout ça à part "retirer" la transition pour que ce soit immédiat.


    Un petit commentaire au sujet n'est pas de refus, même s'il n'y a pas de hide et que poster n'est pas obligatoire, un petit retour d'éventuels dérivé de ce tuto ou même un simple cookie ou merci sera déjà quelque chose d'assez sympathique. Même chose pour un éventuel remerciement sur votre forum, certes ce n'est qu'un petit tuto mais ça fais toujours plaisir.

    Pour rappeler, si vous avez un quelconque soucis avec ce tuto il y a une section spécialement pour ça, Si vous souhaitez un effet particulier mais dans le même style, n'hésitez pas à poser vos questions ici ou à faire des demandes, je tâcherais de vérifier et d'y répondre si possible. Pour tout oublie, merci de me le signaler aussi Wink


    Dernière édition par Alzufen le Jeu 11 Sep 2014 - 23:41, édité 3 fois



    Alzufen
    MasculinAge : 21Messages : 2102

    le Jeu 4 Sep 2014 - 2:12

    Solution Alternative 1 : Triche - L'image Invisible.


    Comme le titre l'indique, c'est une solution alternative à ce tuto, cette solution donne un code HTML plus long mais fonctionnement sur tous les navigateurs même IE (si si). Bien entendu, il se peut que je découvre d'autres solutions alternatives intéressante à vous proposer, pour ça j'éditerais certainement ce message. Je ne vous réexplique pas le principe entier puisque vous l'avez au dessus, je vous explique seulement comment réaliser cette solution.

    Tout d'abord, pour ceux étant sous chrome, inutile de revoir l'exemple, l'effet est le même (ou presque) la seule différence réside dans le code utilisé pour y parvenir. Pour les autres, voici l'effet (qui cette fois-ci devrait marcher sous n'importe quel navigateur à jour)

    Spoiler:


    Nous allons nous servir d'une mode que j'appelle "triche" j'utilise souvent se terme en codage.

    Mais... Pourquoi "Triche" ?
    En codage, j'utilise se terme pour tout code qui utilise des choses un peu "osé", des choses qu'on ne voit pas, ou qui ne devrais pas exister, ou même parfois une façon de forcer quelque chose de manière simpliste. Effectivement, pour moi ce terme est utilisé dans plusieurs cas, dans le notre le principe est simple. Je dis triche car on va se servir d'une image "invisible" qui va apparaître quand on survol l'autre, pourquoi ce serait de la triche ? Parce que on fait croire aux gens que la couleur de l'image change quand on survol celle-ci alors qu'en fait non, c'est une autre image qui apparaît à la place, on trompe donc les gens si je puis dire Wink


    Le principe est très simple, au lieu d'utiliser le code HTML fournis plus haut, utilisez celui-ci :

    Code:
    <div id="image1"><div id="image1mouse"></div></div>

    Encore une div ?
    Effectivement, j'utilise encore une seconde div avec une seconde ID, remarque que celle-ci est identique à la première, seule "mouse" est rajouté pour les distinguer, c'est simplement pour mieux les reconnaître. J'aurais pu mettre "Souris/Survol/Hover" à la place de mouse. Bien entendu, cette div peut-être remplacé par une image, dans ce cas là, vous n'êtes même pas obligé d'attribuer une seconde ID, merveilleux non ? Le hic, c'est qu'une image, on fait un clic gauche, copier l'url ou enregistrer sous, et hop on pique l'image. Pour un background c'est un peu plus dur pour quelqu'un qui ne code pas Wink


    Ensuite, une fois qu'on a ceci, il va nous falloir utiliser la même méthode CSS qu'au dessus, mais cette fois-ci ce n'est pas le fond qui va changer mais l'opacité. Appliquez donc vos images à vos deux ID (Inutile si vous utilisez une image à la place d'une div pour la seconde image)

    Code:
    #image1{
    background: url(VOTRE_URL);
    height: HAUTEUR DE VOTRE IMAGE EN PX;
    width: LARGEUR DE VOTRE IMAGE EN PX;
    }
    #image1mouse{
    background: url(VOTRE_URL);
    height: HAUTEUR DE VOTRE IMAGE EN PX;
    width: LARGEUR DE VOTRE IMAGE EN PX;
    opacity: 0;
    transition: 1s all;
    }

    A ce moment-là, vous ne devriez voir que la première image, et la deuxième ne s'affiche pas au survol... Ô désespoir comment faire ? Simple, il vous suffit d'ajouter ceci à votre CSS et... MAGIE :

    Code:
    #image1mouse:hover{
    opacity: 1;
    }

    Avantage
    Se code a un avantage. Contrairement au précédent, si vous quittez l'image alors que l'effet de transition n'est pas fini, ou que vous revenez dessus alors que ce n'est pas fini, ça ne se remettra pas "directement", l'effet continuera d'être progressif. Je vous conseil donc largement cette version si vous n'avez pas peur de rallonger d'un chouilla votre code Wink

    Le second avantage réside aussi dans le fais de pouvoir personnaliser autrement, étant donné que c'est une seconde image qui apparaît par dessus, il est facilement réalisable de faire en sorte que l'image viennent d'un code, du haut, du bas, ou quoi que ce soit d'autre, ça peut devenir vite intéressant, on peut-même changer la taille de l'image si la seconde est plus grande, merveilleux non ?



    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Jeu 22 Jan 2015 - 20:58

    Merci du tuto Alzu, je classe (enfin)! =D



    Alexielios
    FémininAge : 25Messages : 54

    le Mar 24 Nov 2015 - 13:19

    Merci pour ce tuto :) Bien classe en effet !







    "People live their lives bound by what they accept as correct and true. That's how they define reality.
    But what does it mean to be correct or true?"
    Contenu sponsorisé

    Aujourd'hui à 7:06


      La date/heure actuelle est Dim 11 Déc 2016 - 7:06