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.


    Modifier une image au survol

    Partagez
    avatar
    Kazuya
    MasculinAge : 24Messages : 1497

    le 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é!



    avatar
    Zayl
    MasculinAge : 29Messages : 5311

    le Mer 8 Juil 2009 - 10:14

    Je l'utilise déjà celle-ci, très sympa pour l'esthétique ;P Merci ^^
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le 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



    avatar
    Hiroki
    MasculinAge : 29Messages : 6

    le 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 ^^
    avatar
    Primo
    MasculinAge : 22Messages : 906

    le 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.





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

    le Mar 18 Aoû 2009 - 17:39

    Merci Very Happy

    Très bonne astuce !



    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le 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 !




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Satsuki
    FémininAge : 23Messages : 11

    le Dim 13 Sep 2009 - 12:09

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

    le Jeu 12 Nov 2009 - 12:57

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

    le Ven 7 Sep 2012 - 16:16

    Merci.
    avatar
    Ithaque
    FémininAge : 25Messages : 3

    le 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 Lun 24 Juil 2017 - 16:39