IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Scriptless Image Rollovers(method Pixie )


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Nouveau candidat au Club
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Janvier 2012
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Finlande

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Enseignement

    Informations forums :
    Inscription : Janvier 2012
    Messages : 1
    Par défaut Scriptless Image Rollovers(method Pixie )
    Salut !

    Pourriez-vous s'il vous plaît m'expliquer comment je puis utiliser l'image rollovers Scriptless (Méthode Pixie). Ici, j'ai une image PNG qui contient trois icônes qui dépendent de l'interaction de l'utilisateur. Une de ces icônes s'affiche, et je ne comprends pas ! Comment je peux basculer entre ces icônes en utilisant background-position avec une valeur positive et négative.
    Je vois dans le style ci-dessous qu'ils ont utilisé certaines valeurs négatives.

    Merci d'avance.

    Asadun



    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    #navigation a:link{
     
           background: url(../../images/rolloverImages.png) no-repeat 7px center;
     
    }
     
    #navigation a:visited{
     
           background: url(../../images/rolloverImages.png) no-repeat -483px center;
    }
     
    #navigation a:hover{
     
           background: url(../../images/rolloverImages.png) no-repeat -245px center;
     
    }

  2. #2
    Membre émérite Avatar de pop_up
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    877
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Avril 2006
    Messages : 877
    Par défaut
    Cette technique est celle des "sprites"
    Cela consiste à mettre toutes tes images (en général des icones) en une et de sélectionner celle que tu souhaite en modifiant la propriété background-position

    Dans tes exemples :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    background: url(../../images/rolloverImages.png) no-repeat 7px center;
    l'image est insérée dans la page avec un espacement de 7 pixels à gauche de l'image (surement parce que la première icone dans l'image source est collée tout à gauche)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    background: url(../../images/rolloverImages.png) no-repeat -483px center;
    Ici, -483px introduit un décalage de ton image de 483px vers la gauche. Cela signifie que tu verras l'icone qui se trouve à partir du 484ème pixel.

    Voici un lien qui pourra t'aider à comprendre cette technique :
    http://www.w3schools.com/cssref/pr_b...d-position.asp

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

Discussions similaires

  1. Image rollover onclick
    Par Arnaud Fournery dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 24/09/2007, 14h38
  2. [Traitement d'image] rollover ds illustrator et photoshop
    Par goldor dans le forum Webdesign & Ergonomie
    Réponses: 5
    Dernier message: 15/09/2007, 16h26
  3. [Joomla!] menu avec image rollover/rollout
    Par vodasan dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 1
    Dernier message: 02/08/2007, 14h28
  4. Menu image --> rollover flash
    Par glloq8 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 26/04/2006, 01h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo