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 :
            Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS.
            Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

            Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

            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 lla base de connaissance : https://kb.joomla.fr

                Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                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 :
                    Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

                    Adresse de l'image Sprite


                    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 lla base de connaissance : https://kb.joomla.fr

                    Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                    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 lla base de connaissance : https://kb.joomla.fr

                        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                        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
                          Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
                          Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                          Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                          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
                            Aucune annonce pour le moment.

                            Partenaire de l'association

                            Réduire

                            Hébergeur Web PlanetHoster
                            Travaille ...
                            X