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 + Hover [CSS/HTML]

    Partagez
    Kazuya
    MasculinAge : 24Messages : 1497

    le Sam 4 Juil 2009 - 2:23

    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:
    #bouton1{float: left ;background:url(URL);width:LARGEURpx;height:HAUTEURpx;margin:0 2% 0 0}
    #bouton1:hover {background:url(URL);width:LARGEURpx;height:HAUTEURpx;} 

    #bouton2{float: left ;background:url(URL);width:LARGEURpx;height:HAUTEURpx;margin:0 2% 0 0}
    #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>
    [url=http://www.domaine.com/][/url]

    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. Dans la page ou vous souhaitez placer le bouton, placez le code html correspondant, pour le bouton 1.
    Code:
    <a id="bouton1" href="http://www.domaine.com/"></a>
    Bien entendu remplacez l'URL bidon par l'URL de votre choix.

    Voilà c'est fait!

    Pour rajouter des boutons : Copiez collez tout simplement le code du bouton 1 ou 2 proposé plus haut, et remplacez le chiffre par le chiffre du nouveau bouton. Remplacez evidement l'URL des images, ainsi que la largeur. Faite de même dans le code HTML en replaçant l'id par l'id du bouton correspondant!

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



    Zayl
    MasculinAge : 28Messages : 5311

    le Mer 8 Juil 2009 - 10:14

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

    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



    Hiroki
    MasculinAge : 28Messages : 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 ^^
    Primo
    MasculinAge : 21Messages : 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..
    Shigeru
    MasculinAge : 22Messages : 1497

    le Mar 18 Aoû 2009 - 17:39

    Merci Very Happy

    Très bonne astuce !



    Riku Asakura
    MasculinAge : 29Messages : 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
    Satsuki
    FémininAge : 22Messages : 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<
    Petit Canard
    FémininAge : 30Messages : 5

    le Jeu 12 Nov 2009 - 12:57

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

    le Ven 7 Sep 2012 - 16:16

    Merci.
    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é

    Aujourd'hui à 21:18


      La date/heure actuelle est Dim 4 Déc 2016 - 21:18