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

[bizerte77]

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 :

<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

[Grand Schtroumpf]

Re : Image hover javascript pas pris en compte

Bonjour,
dans le dossier images à la racine ou dans le dossier images du template ?

[bizerte77]

Re : Image hover javascript pas pris en compte

Bonjour,

Dans dossier image à la racine.

Merci

[Grand Schtroumpf]

Re : Image hover javascript pas pris en compte

Re,
pas de problème de majuscules ? Et avec /images ?

[bizerte77]

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.

[ghazal]

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/lire/1068-sprites-css-background-position.html

[bizerte77]

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 :

<a href="#" title="Pass annuel" id="pass"><span>Pass</span></a>

et mon css :

#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 :

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

[ghazal]

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

[bizerte77]

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!

[ghazal]

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/Photos/mesimages/icons.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)

[bizerte77]

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

#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)

[ghazal]

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

[ghazal]

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/

[bizerte77]

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