AccueilRechercherS'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.

Le Deal du moment :
Black Friday chez ASOS : Les plus grosses promos ...
Voir le deal

    Modifier une image au survol

    Kazuya
    Kazuya
    MasculinAge : 29Messages : 1497

    Sam 4 Juil 2009 - 2:23


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Voilà alors je décide de partagé une petit astuce avec vous, car je trouve qu'elle vaut le coup et qu'elle embellit vachement les forum =)

    Tout d'abord, de quoi il s'agit? : C'est en fait un code, qui va permettre de changer l'image, lorsque la souris passera dessus. Ainsi, on peut donner l'illusion, sans recourir au flash, que lorsque l'on passe la souris sur une image, cette dernière se met à briller. Bien sûr, ce n'est qu'une suggestion d'utilisation, ensuite, libre à vous de vous en servir comme bon vous semble.

    DANS LE CSS
    Code:
    /*Bouton 1 sans survol*/
    #bouton1 {
      display: inline-block;
      background:url(URL);
      width:LARGEURpx;
      height:HAUTEURpx;
    }
    /*Bouton 1 avec survol*/
    #bouton1:hover {
      background:url(URL);
      width:LARGEURpx;
      height:HAUTEURpx;


    /*Bouton 2 sans survol*/
    #bouton2 {
      display: inline-block;
      background:url(URL);
      width:LARGEURpx;
      height:HAUTEURpx;
    }
    /*Bouton 2 avec survol*/
    #bouton2:hover {
      background:url(URL);
      width:LARGEURpx;
      height:HAUTEURpx;


    SUR LA PAGE
    Code:

    <a id="bouton1" href="http://www.domaine.com/"></a>
    <a id="bouton2" href="http://www.domaine.com/"></a>

    Comment le modifier? :
    1 .Placez dans l'URL de "bouton 1:" L'url de l'image non survolée. Remplacez LARGEUR et HAUTEUR par la largeur et la hauteur de l'image sélectionnée.
    2. Placez, dans L'URL de "bouton 1:hover" L'url de l'image survolée. Remplacez LARGEUR et HAUTEUR par la largeur et la hauteur de l'image sélectionnée.
    3. Faites pareil pour le bouton 2 et les autres éléments si vous en avez.

    À noter qu'on a utilisé des liens ici pour simuler une navigation, mais cela aurait aussi pu se faire avec une div, un span ou autres.

    Voilà c'est fait!

    En espérant avoir été clair et vous avoir aidé!



    Modifier une image au survol CKMiDeikSo
    Zayl
    Zayl
    FémininAge : 31Messages : 5313

    Mer 8 Juil 2009 - 10:14

    Je l'utilise déjà celle-ci, très sympa pour l'esthétique ;P Merci ^^
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Sam 18 Juil 2009 - 17:53

    Merci ^^ Il complique un peu celui de Riku, mais au final avec le CSS c'est aussi plus simple, donc c'est un bon complément Wink



    sign
    Hiroki
    Hiroki
    MasculinAge : 33Messages : 6

    Ven 14 Aoû 2009 - 1:47

    J'avais peur de ne pas comprendre au départ mais en fait c'est tellement bien expliqué que ça en est relativement simple ! Merci pour cette astuce, bien utile pour l'esthétique d'un forum mine de rien ^^
    Primo
    Primo
    MasculinAge : 26Messages : 906

    Mar 18 Aoû 2009 - 14:03

    Ah merci , je cherché ce code depuis bien longtemps. Je viens de l 'installer sur mon forum ,ça marche à la perfection.



    Modifier une image au survol 4bc895766f897sign

    The Fire of the Light
    Si seulement je pouvais voir ton sourire chaque jours..
    Shigeru
    Shigeru
    MasculinAge : 27Messages : 1497

    Mar 18 Aoû 2009 - 17:39

    Merci Very Happy

    Très bonne astuce !



    Modifier une image au survol 609890Naruto_1Modifier une image au survol Naruto10
    Riku Asakura
    Riku Asakura
    MasculinAge : 34Messages : 5736

    Jeu 20 Aoû 2009 - 17:08

    Hello, sympa comme système, sur le principe, puisqu'il permet de ne pas avoir à passer par javascript, fort avantage pour les personnes qui le désactivent.
    Cependant lorsque tu survoles ton lien l'image en mode HOVER va se charger, et c'est là le danger, qu'arrive-t-il si une personne navigue rapidement (comme beaucoup de visiteurs finalement) et que les images de ta page ne sont pas encore toutes chargées...

    Réponse : l'effet hover n'est pas réactif assez rapidement, et ce sera pareil pour tous les boutons (liens).

    J'ai d'ailleurs une solution qui consiste à utilser qu'une seule est même image pour le même lien...
    Sous-entendu sur l'image tu as déjà les deux formes du bouton, ainsi quand le visiteur charge la page il charge les deux états en même temps !

    L'astuce consiste donc à positionner par exemple l'état hover en dessous de l'état normal sur ton image (physiquement donc). Lorsque tu créés ton bouton HTML/CSS tu vas lui donner des valeurs width et height qui correspondent à 100% de width et 50% de height de l'image physique (logique puisque tu ne prends qu'un des deux états.
    Ensuite en position normal tu précises la position left top dans bg-position.
    Lorsque tu es en hover tu précises à nouveaux la position, mais cette fois de la sorte : left 50%;

    C'est une forme de masque d'écrêtage en code CSS en quelque sorte ^^

    Mais je ferais un tuto, d'ailleurs pour les fouineurs de codes sources, sur HIF j'utilise ce principe pour le menu de votre espace perso Wink

    A la prochaine !



    Modifier une image au survol 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Satsuki
    Satsuki
    FémininAge : 27Messages : 11

    Dim 13 Sep 2009 - 12:09

    Oh bout de plusieur essai j'ai enfin réussit à l'utiliser!!!! Merci beaucoup pour cette astuce >w<
    Petit Canard
    Petit Canard
    FémininAge : 35Messages : 5

    Jeu 12 Nov 2009 - 12:57

    j'ai une question...
    comment l'appliquer à la barre de navigation ???
    Melody L
    Melody L
    MasculinAge : 29Messages : 22

    Ven 7 Sep 2012 - 16:16

    Merci.
    Ithaque
    Ithaque
    FémininAge : 30Messages : 3

    Mer 10 Déc 2014 - 18:20

    Je déterre un vieux topic ! 
    Merci pour ce tuto :)

    Mais même question que Petit canard, est-ce applicable à la barre des menus FA, et si oui, comment ? 

    Merci d'avance ! :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Nov 2021 - 22:15