Image hover javascript pas pris en compte

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [Problème] Image hover javascript pas pris en compte

    Bonjour,

    J'utilise sourcerer pour pouvoir mettre du javascript entre autre. J'ai une image de type bouton qui est cliquable et je souhaiterai faire un hover dessus, voici mon code :

    Code:
    <p style="font-weight:bold;font-size:14px;padding-top:5px;text-align:center;">
        <a onmouseout="document.pass.src='images/bouton-achete-pass.jpg'" onmouseover="document.pass.src='images/bouton-achete-pass-hover.jpg'"  href="#"><img style="border:none" name="pass" alt="J'achète mon pass" src="images/bouton-achete-pass.jpg"></a>
    </p>
    Le bouton s'affiche bien mais quand je passe la souris dessus c'est le texte du alt qui s'affiche, je ne comprend pas pourquoi (mes 2 images sont bien dans mon dossier image).

    J'ai essayé ce code dans un fichier html à part et les 2 images sur mon bureau, ça fonctionne. Faut-il régler quelque chose sur joomla?

    Merci par avance

    PS: mes images en pièce jointe
    Fichiers joints

  • #2
    Re : Image hover javascript pas pris en compte

    Bonjour,
    dans le dossier images à la racine ou dans le dossier images du template ?
    Schtroumpfe toi le Schtroumpf t'aidera.
    Je ne schtroumpfe pas aux demandes de schtroumpf par MP.

    Commentaire


    • #3
      Re : Image hover javascript pas pris en compte

      Bonjour,

      Dans dossier image à la racine.

      Merci

      Commentaire


      • #4
        Re : Image hover javascript pas pris en compte

        Re,
        pas de problème de majuscules ? Et avec /images ?
        Schtroumpfe toi le Schtroumpf t'aidera.
        Je ne schtroumpfe pas aux demandes de schtroumpf par MP.

        Commentaire


        • #5
          Re : Image hover javascript pas pris en compte

          Bonjour,

          Non aucun soucis de majuscules ou de dossier. C'est bizarre quand même!

          Merci

          Edit : Je crois qu'il y a une méthode avec le css? Si vous avez le temps de me montrer, merci.
          Dernière édition par bizerte77 à 24/02/2012, 14h41

          Commentaire


          • #6
            Re : Image hover javascript pas pris en compte

            salut,
            je me doutais bien que ce mélange JavaScript/html passerait difficilement avec tous les filtres éditeur et joomla.
            Dans ton cas, le plus simple serait d'utiliser la méthode Sprites :
            http://www.alsacreations.com/tuto/li...-position.html
            “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

            Commentaire


            • #7
              Re : Image hover javascript pas pris en compte

              Bonjour,

              Merci pour votre réponse. Je viens de tester sur un fichier html à part et tout marche super bien mais quand je mets mon code dans joomla rien ne va plus, l'image ne s'affiche même pas.

              Voici mon code :

              Code:
              <a href="#" title="Pass annuel" id="pass"><span>Pass</span></a>
              et mon css :

              Code:
              #pass{
                display:block;
                width:220px;
                height:55px;
                background:url("images/pass.png") 0 0 no-repeat;
              }
              /* on décale l'image de fond de la hauteur du lien, soit 31 px */
              #pass:hover,#pass:active,#pass:focus{
                background-position:0 -55px;
              }
              /* permet de cacher le texte du lien */
              #pass span{
                display:inline-block;
                text-indent: -5000px;
              }
              Mon image sprite se trouve bien dans le dossier "images" à la racine de joomla, il n'y a pas d'erreur de nom ni d'extension.

              Je ne comprend pas pourquoi ça ne marche pas...

              Voici tout de même mon code entier de l'article (peut-être quelque chose bloque...), j'utilise sourcerer :

              Code:
              Un programme sur mesure pour des envies outre mesure !
              
              {source}
              <style>
                      
                      .mon_onglet{
                       float: left;
                       padding: 2px 10px;
                       margin-right: 5px;
                       color: #000;
                       background: #fff;
                       border: 1px solid #0566AA;
                       cursor: pointer;
                       margin-bottom: -1px;
                       list-style: none;        
                      }
                      .mon_onglet:hover{
                       /*background: #b8efa1;*/
                      }
                      .mon_onglet_selected{
                       float: left;
                       padding: 2px 10px;
                       margin-right: 5px;
                       color: #000;
                       background: #fff;
                       border-top: 1px solid #0566AA;
                       border-right: 1px solid #0566AA;
                       border-left: 1px solid #0566AA;
                       border-bottom: 1px solid #fff;
                       cursor: pointer;
                       margin-bottom: -1px;
                       list-style: none;}
                      .clear{
                       clear: both;
                      }
                      .mon_contenu{
                       color: #000;
                       background: #fff;
                       border: 1px solid #0566AA;
                       padding: 10px;
                       line-height: normal;
                       font-size: 12px;
                      width:639px;
                      border-radius : 0 0 10px 10px
              }      
              
              
                      #mes_contenus, #mes_onglets{
                       width: 680px;
              }
              
               #pass{
                display:block;
                width:220px;
                height:55px;
                background:url("images/pass.png") 0 0 no-repeat;
              }
              /* on décale l'image de fond de la hauteur du lien, soit 31 px */
              #pass:hover,#pass:active,#pass:focus{
                background-position:0 -55px;
              }
              /* permet de cacher le texte du lien */
              #pass span{
                display:inline-block;
                text-indent: -5000px;
              }
              
              </style>
              
              
              <script language="javascript" type="text/javascript">
                          function changeOnglet(_this){
                          var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');
                          for(var i = 0; i < getOnglets.length; i++){
                              if(getOnglets[i].id){
                                  if(getOnglets[i].id == _this.id){
                                      getOnglets[i].className = 'mon_onglet_selected';
                                      document.getElementById('c' + _this.id).style.display = 'block';
                                  }
                                  else{
                                      getOnglets[i].className = 'mon_onglet';
                                      document.getElementById('c' + getOnglets[i].id).style.display = 'none';
                                  }
                              }
                          }
                      }
                  
              </script>
              
              <body><br/>
                      <div id="mes_onglets">
                          <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);" style="padding-left:2px;padding-right:2px;border-radius:10px 0 0 0;">PASS ANNUEL</li>
                              <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"style="padding-left:2px;padding-right:2px">OFFRE SPECIALE FAMILLE</li>
                              <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"style="padding-left:2px;padding-right:2px">CONDITIONS D'ABONNEMENT</li>
                              <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"style="padding-left:2px;padding-right:2px;border-radius : 0 10px 0 0">ACHETER MON PASS ANNUEL</li>
              
              
                              <div class="clear"><div id="mes_contenus">
                          <div id="co_1" class="mon_contenu"><img src="images/pass-annuel-visu.jpg" border="0" alt="Pass annuel visu" style="float:left"/>
              
              <div style="float:left;margin-left:5px">
                <p style="font-size:14px;font-weight:bold">TARIFS :</p>
                  <ul>
                     <li>Adulte : 59€</li>
                     <li>Jeune (13 à 17 ans)/ étudiant/ sénior / demandeur d'emploi : 46€</li>
                     <li>Enfant (3 à 12 ans)/ personne en situation de handicap : 38€</li>
                 </ul>
              </div>
              <div class="clear"></div>
              
              <p style="font-size:14px;font-weight:bold">VOS AVANTAGES :</p>
              
              <div>
              <span style="font-weight:bold">Un accès illimité !</span><br/>
              
              <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">Pass valable 1 an à compter de sa date de création.</span>
              </div>
              
              <br/><br/>
              
              <div>
              <span style="font-weight:bold">Une vague de cadeau !</span><br/>
              
              <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">Un cadeau de bienvenue (d'une valeur de 14€)</span><br/>
              
              <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">Un cadeau d'anniversaire(d'une valeur de 18€)</span>
              </div>
              
              <br/><br/>
              
              <div>
              <span style="font-weight:bold">Des réductions à profusion !</span><br/>
              
              <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">15% de réduction sur les formules "déjeuner au ZEN CAFE" !</span><br/>
              
              <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">15% de réduction* sur la boutique ! (*hors corner grande récré)</span>
              </div>
              
               
              
              <br/><br/>
              
              <div>
              <span style="font-weight:bold">Parcequ'être VIP, ça n'attend pas ! !</span><br/>
              
              <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">N'attendez plus en caisse ! Allez directement à l'entrée de l'Aquarium !</span><br/>
              
              <img src="images/puce2.jpg" border="0" style="float:left;margin-left:10px"/> <span style="padding-left:5px; ">Plus d'informations au : 01 40 69 23 23.</span><br/><br/>
              
              <a href="#" title="Pass annuel" id="pass"><p>Pass annuel</p></a>
              
              </div>
              
              
              </div>
              
              
                          <div id="co_2" class="mon_contenu" style="display: none;">
              
              <p>Pour l'achat simultané de <span style="font-weight:bold">4 pass annuel*</span> pour une même famille (même adresse) : </p>
              <p><span style="font-weight:bold">Bénéficiez de 10% de réduction</span> sur le montant total de l'achat.</p>
              
               
              
              <p>*Offre non cumulable, une pièce d'identité vous sera demandée lors de votre visite. En vente uniquement sur place.</p>
              
              </div>
              
              
                          <div id="co_3" class="mon_contenu" style="display: none;">
              
              <p style="font-weight:bold;font-size:14px">CONDITIONS GENERALES DE VENTE PASS ANNUEL AQUARIUM DE PARIS – CINEAQUA</p>
              
              <p style="font-weight:bold;">Valable pour un Pass Annuel définitif souscrit du 01/01/2012 au 31/12/2012</p>
              
               <p style="text-align : justify">Les conditions générales ci-après précisent les dispositions qui régissent les relations entre la société CINEAQUA Paris SAS (ci-après dénommée « Aquarium de Paris – Cinéaqua ») et chacun des abonnés (ci-après dénommé "Abonné") du programme d’abonnement à l’Aquarium de Paris – Cinéaqua (ci-après dénommé « Pass Annuel »)<p>
              
              <p style="text-align : justify">ARTICLE 1 - OBJET <br/>
              Le programme d’abonnement a pour objet de permettre à chaque Abonné, sur présentation d'une carte délivrée par Aquarium de Paris - Cinéaqua et comportant, outre le nom, le prénom, la date de naissance de l’abonné, sa photographie, son numéro d’abonné, la date d’échéance de l’abonnement, d'accéder à l’Aquarium de Paris-Cinéaqua, dans les conditions précisées ci-après.</p>
              
               
              
              </div>
              
              
                          <div id="co_4" class="mon_contenu" style="display: none;">
              
              <p style="font-weight:bold">Plusieurs possibilités s’offrent à vous :</p>
              
              <p style="font-weight:bold">1. Sur place</p>
              
              <p>Aux caisses de l’Aquarium de Paris – Cinéaqua, créez votre pass annuel le jour de votre visite.<br/>
              
              Une carte d’identité vous sera impérativement demandée.<br/><br/>
              
               De plus, un justificatif vous sera demandé pour l’achat d’une carte à tarif réduit (étudiants / séniors / demandeurs d’emploi / personnes en situation de handicap / offre famille).<br/><br/>
              
               Plus d’informations au : 01 40 69 23 23
              
              </p><br/>
              
              <p style="font-weight:bold">2. Via internet*</p>
              
              <p>Votre e-billet devra être présenté en caisse le jour de votre visite pour la création de votre Pass Annuel.(Contremarque valable 3 mois à compter de la date d’achat, l’abonné bénéficie donc de 3 mois pour créer son Pass Annuel).</p>
              
              <p style="font-weight:bold;font-size:14px;padding-top:5px;text-align:center;"><a href="http://cineaqua.getaticket.com/Information.aspx">RESERVER EN LIGNE</a></p>
              
              <p>*Attention : les Pass Annuel à tarifs réduits nécessitant un justificatif (étudiants / séniors / demandeurs d’emploi / personnes en situation de handicap / offre famille), sont en vente <span styl="font-weight:bold">uniquement sur place.</span>
              
              </p>
              
              </div>
              
              
                      </div></div></ul></div>
              </body>
              
              {/source}
              {source} et {/source} c'est normal c'est le truc de sourcerer.

              Merci par avance

              Commentaire


              • #8
                Re : Image hover javascript pas pris en compte

                Salut,
                as-tu essayé ?
                {source 0}
                ton code
                {/source}
                Notes :
                * j'espère que la 1ere ligne du code que tu donnes au-dessus est commentée
                * ce serait mieux de coller les CSS dans l'un des fichiers CSS du template
                * ce serait mieux de virer <body></body> du code
                “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                Commentaire


                • #9
                  Re : Image hover javascript pas pris en compte

                  Bonjour,

                  J'ai viré les <body> par contre je ne comprend pas pourquoi vous avez mis "0" à côté de source, quand je fais ça se sont les lignes du code qui s'affiche dans mon article.

                  Par contre, je viens de remarqué avec firebug, quand je passe la souris sur le code ccs dans firebug où il y a l'image c'est ce message qui apparait : failed to log the given URL (voir pièce jointe).

                  Merci!
                  Fichiers joints

                  Commentaire


                  • #10
                    Re : Image hover javascript pas pris en compte

                    je ne comprend pas pourquoi vous avez mis "0" à côté de source
                    C'est une indication qui se trouve dans le plugin Sourcerer (ma version : Sourcerer-v2.11.3).
                    Sur mon site test, aucune image ne chargeait sans cette indication

                    * je t'ai conseillé de placer tes CSS dans un fichier CSS de ton template.
                    Il était sous-entendu que ces images étaient donc placées dans le dossier "images" de ton template et accessibles avec ce chemin via la CSS

                    ../images/ton_sprite.jpg
                    dans ton code html, je vois ceci :
                    <img src="images/pass-annuel-visu.jpg"

                    ce qui est correct mais indique que l'image "pass-annuel-visu.jpg" est placée dans le dossier images à la racine du site (pas celui du template)

                    Je peux tester ton code mais file moi les images que je n'ai pas à recalculer le positionnement CSS

                    Enfin, pour mémoire, un exemple de sprite basique :
                    http://jsfiddle.net/ghazal/DNDt6/
                    Adresse de l'image Sprite
                    https://dl-web.dropbox.com/get/Photo...gif?w=950df39a

                    qui renvoie à la question d'origine, un effet hover, que je t'ai proposé sans JavaScript (avec la méthode des sprites)
                    “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                    Commentaire


                    • #11
                      Re : Image hover javascript pas pris en compte

                      Bonjour,

                      Voici l'image sprite que j'utilise en fichier joint.

                      Merci

                      Edit : j'ai externalisé mon code css, je l'ai placé dans personal.css

                      Code:
                      #pass{
                        display:block;
                        width:220px;
                        height:55px;
                        background:url("../images/personal/pass.png") 0 0 no-repeat;
                      }
                      /* on décale l'image de fond de la hauteur du lien, soit 55 px */
                      #pass:hover,#pass:active,#pass:focus{
                        background-position:0 -55px;
                      }
                      /* permet de cacher le texte du lien */
                      #pass span{
                        display:inline-block;
                        text-indent: -5000px;
                      }
                      L'image apparait bien mais que je passe la souris dessus, elle disparait ça devient blanc

                      Merci beaucoup pour votre aide (j'utilise le template beez_20)
                      Fichiers joints
                      Dernière édition par bizerte77 à 26/02/2012, 19h42

                      Commentaire


                      • #12
                        Re : Image hover javascript pas pris en compte

                        * les CSS pour ton hover en sprite sont nickel chez moi (avec FF)
                        * essaye de réécrire de cette façon :
                        a:hover#pass, a:active#pass, a:focus#pass
                        puisque le hover est sur la balise a

                        En revanche, dans l'html donné plus haut,
                        il manque un </ul> de fermeture
                        <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);" style="padding-left:2px;padding-right:2px;border-radius:10px 0 0 0;">PASS ANNUEL</li>
                        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"style="padding-left:2px;padding-right:2px">OFFRE SPECIALE FAMILLE</li>
                        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"style="padding-left:2px;padding-right:2px">CONDITIONS D'ABONNEMENT</li>
                        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"style="padding-left:2px;padding-right:2px;border-radius : 0 10px 0 0">ACHETER MON PASS ANNUEL</li>
                        .. et le JS que tu donnes n'a pas l'air complet
                        ... mais c'est une autre histoire
                        “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                        Commentaire


                        • #13
                          Re : Image hover javascript pas pris en compte

                          Où en es-tu ?

                          Il va sans dire que l'option CSS3 est également possible :
                          bac à sable pour s'amuser avec des "buttons" en CSS3
                          http://jsfiddle.net/ghazal/KpDha/
                          “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                          Commentaire


                          • #14
                            Re : Image hover javascript pas pris en compte

                            Bonjour,

                            Toujours pas réglé mon problème. J'ai mis ça de compter pour avancer sur le site. Merci pour le lien, je vais jeter un coup d'oeil.

                            Bonne journée

                            Commentaire

                            Annonce

                            Réduire
                            1 sur 2 < >

                            C'est [Réglé] et on n'en parle plus ?

                            A quoi ça sert ?
                            La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                            Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                            Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                            Comment ajouter la mention [Réglé] à votre discussion ?
                            1 - Aller sur votre discussion et éditer votre premier message :


                            2 - Cliquer sur la liste déroulante Préfixe.

                            3 - Choisir le préfixe [Réglé].


                            4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                            2 sur 2 < >

                            Assistance au forum - Outil de publication d'infos de votre site

                            Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                            Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                            Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                            UTILISER À VOS PROPRES RISQUES :
                            L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                            Problèmes connus :
                            FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                            Installation :

                            1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                            Archive zip : https://github.com/AFUJ/FPA/zipball/master

                            2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                            3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                            4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                            5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                            6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                            et remplacer www. votresite .com par votre nom de domaine


                            Exemples:
                            Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                            Télécharger le script fpa-fr.php dans: /public_html/
                            Pour executer le script: http://www..com/fpa-fr.php

                            Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                            Télécharger le script fpa-fr.php dans: /public_html/cms/
                            Pour executer le script: http://www..com/cms/fpa-fr.php

                            En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                            Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                            Voir plus
                            Voir moins
                            Travaille ...
                            X