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

jQuery Discussion :

Lien actif : afficher une image, remettre les autres en noir et blanc


Sujet :

jQuery

  1. #1
    Membre éprouvé
    Avatar de beegees
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2004
    Messages
    3 610
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : Mars 2004
    Messages : 3 610
    Points : 1 277
    Points
    1 277
    Par défaut Lien actif : afficher une image, remettre les autres en noir et blanc
    Bonjour tout le monde,

    J'ai ce code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function afficher_logo_couleur()
    {
    	$('#lien_logo_site').mouseover(function() {
    		$('#logo_site').attr('src','images/planet.png');
     
    	});
     
    	$('#lien_logo_site').mouseout(function() {
    		$('#logo_site').attr('src','images/planet_nb.png');
    	});
    qui affiche une image en couleur au survol d'un lien et qui réaffiche l'original (en noir et blanc) quand on est hors du lien.

    Je me demandais si on pouvait ajouter à ce code du code qui permettrait d'afficher l'image en couleur (en continu) sur le click du lien (la même image que sur le onover) pour montrer que l'on est sur l'onglet.

    Il faudrait alors que si un lien a été cliqué (et qui affiche une certaine image en couleur) affiche alors son image en noir et blanc.

    Les images d'un même onglet en couleurs et noir et blanc sont identiques (excepté la couleur) mais pour chaque onglet, j'ai une image différente (d'où l'impossibilité de créer une classe "valide" en css).

    Merci d'avance.

    beegees

  2. #2
    Membre régulier
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Avril 2008
    Messages
    49
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Avril 2008
    Messages : 49
    Points : 70
    Points
    70
    Par défaut
    Pour l'image en couleur sur le click de souris faut voir avec les évènements mousedown et mouseup.
    Mousedown quand on appuis sur le bouton et mouseup quand on relache le bouton de la souris si mes souvenirs sont exacts.

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 665
    Points
    66 665
    Billets dans le blog
    1
    Par défaut
    il faut attribuer un data à l'image lors du click de l'image en modifiant le data des autres (avec not this)
    du coup au survol il ne reste plus qu'a tester le data de l'image pour savoir si l'on doit mettre l'image en noir et blanc ou en couleur ...

  4. #4
    Membre à l'essai
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 15
    Points : 19
    Points
    19
    Par défaut
    Et avec unbind ?

    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
    17
    function afficher_logo_couleur()
    {
    	$('#lien_logo_site').mouseover(function() {
    		$('#logo_site').attr('src','images/planet.png');
     
    	});
     
    	$('#lien_logo_site').mouseout(function() {
    		$('#logo_site').attr('src','images/planet_nb.png');
    	});
            $('#lien_logo_site').click(function() {
    		$('#logo_site').attr('src','images/planet.png');
                    $('#logo_site').unbind('mouseout') ;
                    $('#logo_site').unbind('mouseover') ;
    	});
     
    }
    D'après moi ca pourrait donner le fonctionnement voulu :
    Tant qu'on a pas cliqué : ca garde le fonctionnement actuel
    Une fois qu'on a cliqué : ca désactive le fonctionnement précédent et garde l'image en couleur

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 665
    Points
    66 665
    Billets dans le blog
    1
    Par défaut
    et tu rebind quand ?

  6. #6
    Membre à l'essai
    Profil pro
    Inscrit en
    Novembre 2007
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2007
    Messages : 15
    Points : 19
    Points
    19
    Par défaut
    Citation Envoyé par beegees Voir le message
    Il faudrait alors que si un lien a été cliqué (et qui affiche une certaine image en couleur) affiche alors son image en noir et blanc.
    j'ai pas bien pigé cette partie là mais le 'rebind' doit être en rapport avec ca...

  7. #7
    Membre éprouvé
    Avatar de beegees
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2004
    Messages
    3 610
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : Mars 2004
    Messages : 3 610
    Points : 1 277
    Points
    1 277
    Par défaut
    Citation Envoyé par gnappy Voir le message
    j'ai pas bien pigé cette partie là mais le 'rebind' doit être en rapport avec ca...
    Merci pour ta réponse et désolé pour le retard de la mienne.

    Cela ne fonctionne pas du tout.

    Je vais par contre essayer d'appliquer l'algorithme de SpaceFrog (merci à toi grenouille).

    Bon W.E.
    beegees

Discussions similaires

  1. Afficher une image toutes les 5 secondes
    Par Bois990 dans le forum Général JavaScript
    Réponses: 14
    Dernier message: 30/03/2012, 08h57
  2. [Débutant] Afficher une image parmi les elements importés d'une picturebox
    Par Attila54 dans le forum VB.NET
    Réponses: 46
    Dernier message: 13/01/2012, 15h53
  3. [XL-2007] creer un lien pour afficher une image
    Par eliot.raymond dans le forum Excel
    Réponses: 8
    Dernier message: 07/01/2010, 11h36
  4. Afficher une image toutes les 20 secondes
    Par sab_etudianteBTS dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 16/02/2008, 18h27
  5. Un lien qui affiche une image au survole
    Par Edoxituz dans le forum Général JavaScript
    Réponses: 14
    Dernier message: 28/01/2006, 12h06

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