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 :

Comment remplacer une image par une icône dans un script Toggle


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Par défaut Comment remplacer une image par une icône dans un script Toggle
    Bonsoir à tous,
    J'ai un footer qui s'affiche et ce cache via Toggle. En voici les CSS :
    Code css : 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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    #toggler{
    	text-align: center;
    	position: fixed;
    	bottom: 30px;
    	width: 100%;
    	height: 30px;
    	z-index: 9999999;
    	left: 0px;
    	right: 0px;
    	background-color: #000000;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 0px;
    }#toggle{
    	text-align: center;
    	bottom: 0px;
    	position: fixed;
    	width: 100%;
    	z-index: 999999;
    	background-color: #000000;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 0em;
    }
    #toggle p{text-align:center;padding:0}
     
    .button {
    	background-image: url(imgs/fleche_haut.jpg);
    	background-repeat: no-repeat;
    	text-align: center;
    	position: relative;
    	background-position: 50% 0%;
    	margin-bottom: 0px;
    }
     
    .background {
    	/* [disabled]background-color: #CC3300; */
    	background-image: url(imgs/fleche_bas.jpg);
    	background-repeat: no-repeat;
    }
    et le js :
    Code javascript : 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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    jQuery(document).ready(function()
    {
       jQuery('#toggle').hide();
       // toggle()
       jQuery('a#toggler').click(function()
      {
          jQuery('#toggle').slideToggle(400);
          return false;
       });
    });
    /* ]]> */
    </script>
    <script>
    $(".button").on('click', function(){ $(this).toggleClass('background'); })
    </script>
    <script>
    $(document).ready(function(){
    	$('.logo').hide();
    });
    $(window).load(function(){
    	$('.header').fadeIn('slow');
    	$(".header").delay(1800).animate({
    		marginTop:'0px',
    		opacity:1
    	},1800,'swing');
    });
    </script>

    Y'a y'il moyen de remplacer les images (fleche_haut et _bas.jpg) par du texte/icônes ?
    Voici mon html actuel :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <a href="#" id="toggler" class="button">Ouvrir</a>
    <div id="toggle" style="display:none;">
    Merci pour votre aide.
    Bonne fin de week-end,
    dh

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 208
    Par défaut
    Bonjour,
    ...moyen de remplacer les images (fleche_haut et _bas.jpg) par du texte/icônes ?
    qu'est ce qui t'en empêche !?! tu mets bien ce que tu veux, ou presque, entre <a> et </a>.

  3. #3
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Par défaut
    Bonjour NoSmoking,
    Je ne vois pas du tout
    Puis-je en savoir plus ?
    Merci et bonne journée,
    dh

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    peux-tu toi-même expliquer plus clairement et en détail ce que tu veux faire ?

    • Changer quelle flèche par quelle autre sur quel évènement ?
    • Remplacer quel texte par quel autre sur quel évènement ?
    • ...


    En jQuery, on peut modifier :

    As-tu au moins eu la curiosité de faire une recherche ?

  5. #5
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Par défaut
    Bonjour Jérôme,
    Voici une partie du code initial :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .button {
    	background-image: url(imgs/fleche_haut.jpg);
    	background-repeat: no-repeat;
    	text-align: center;
    	position: relative;
    	background-position: 50% 0%;
    }
     
    .background {
    	/* [disabled]background-color: #CC3300; */
    	background-image: url(imgs/fleche_bas.jpg);
    	background-repeat: no-repeat;
    }


    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
    18
    19
    20
    21
    22
    23
    24
    25
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type='text/javascript'>
    /* <![CDATA[ */ 
    /*
    |-----------------------------------------------------------------------
    |  jQuery Toggle Script by Matt - skyminds.net
    |-----------------------------------------------------------------------
    |
    |
    */
     
    jQuery(document).ready(function()
    {
       jQuery('#toggle').hide();
       jQuery('a#toggler').click(function()
      {
          jQuery('#toggle').slideToggle(400);
          return false;
       });
    });
    /* ]]> */
    </script>
    <script>
    $(".button").on('click', function(){ $(this).toggleClass('background'); })
    </script>
    Je souhaiterais simplement remplacer les images fleche_haut et flèche_bas par deux icônes "font awesome", plus propres.
    Désolé de ne pas avoir été plus clair.
    Merci à NoSmoking et à toi pour vos réponses.
    Bonne journée,
    dh

  6. #6
    Invité
    Invité(e)
    Par défaut
    Par exemple :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <a href="#" id="toggler" class="button"><i class="fa fa-arrow-down"> Ouvrir</i></a>
    <div>
    	SESAME OUVRE TOI !
    </div>
    Code javascript : 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
    jQuery(document).ready(function()
    {
    	jQuery('a#toggler').next('div').hide();
    	// toggle()
    	jQuery('a#toggler').on( 'click', function()
    	{
    		// changer la flèche (font-awesome)
    		jQuery(this).find('i').toggleClass('fa-arrow-down fa-arrow-up');
     
    		// changer le texte		
    		( jQuery(this).find('i').html() == ' Ouvrir' )? jQuery(this).find('i').html(' Fermer') : jQuery(this).find('i').html(' Ouvrir');
     
    		// Ouvirir/Fermer le div
    		jQuery('a#toggler').next('div').slideToggle(400);
    		return false;
    	});
    });

    Et du coup supprimer le CSS de .background.

Discussions similaires

  1. [Débutant] Comment remplacer un chiffre par une image
    Par jackdos dans le forum VB.NET
    Réponses: 10
    Dernier message: 08/05/2015, 14h32
  2. Remplacer texte <p> par une image dans fichier html
    Par bob633 dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 15/02/2011, 11h16
  3. Réponses: 3
    Dernier message: 11/12/2010, 14h18
  4. Réponses: 0
    Dernier message: 17/06/2009, 23h26
  5. Réponses: 4
    Dernier message: 12/06/2008, 17h00

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