cacher/afficher un compteur

Version imprimable

Bonjour,

au bas de mes pages HTML, j'affiche un compteur

ce compteur est appelé par :
Code:

1 2 <script type="text/javascript" src="http://www.abcompteur.com/cpt/?code=4/8/8146/2/1&ID=352737"> </script><noscript><a href="http://www.abcompteur.com/">ABCompteur : compteur gratuit</a></noscript>
je souhaite afficher le compteur quand on pointe l'emplacement du compteur et l'effacer quand on pointe hors de la zone compteur

Je transforme donc la chose (que j'ai copiée je ne sais où) en
Code:

1 2 3 4 5 6 <DIV style="visibility:visible"> <P onmouseover="this.style.visibility='visible'" onmouseout="this.style.visibility='hidden'"> <script type="text/javascript" src="http://www.abcompteur.com/cpt/?code=4/8/8146/2/1&ID=352737"> </script><noscript><a href="http://www.abcompteur.com/">ABCompteur : compteur gratuit</a></noscript> </DIV>
Quand je lance la page, le compteur est affiché
lorsque je pointe dessus, il est affiché
lorsque je sors de la zone, il s'efface et n'est plus réaffiché quand on repointe la zone

Je ne comprend pas ce qui pêche (à part la balise P qui n'est pas fermée)

Un de vous a-t-il une idée ?

Merci

C'est plus du JS que du css....

Code:

1
2
3
4
5
 
<DIV onmouseover="this.style.visibility='visible'" onmouseout="this.style.visibility='hidden'">
<script type="text/javascript" src="http://www.abcompteur.com/cpt/?code=4/8/8146/2/1&ID=352737">
</script><noscript><a href="http://www.abcompteur.com/">ABCompteur : compteur gratuit</a></noscript>
</DIV>

Et ça simplement, ça ne marche pas ?

05/05/2008, 10h41
veevee

Bonjour,

ben non, testé avec FF et IE6, ça se passe comme je le décris
à l'ouverture de la page, le compteur y est
je vais dessus, il y reste
je sors, il s'efface
et il ne revient plus jamais

Comprend pas
05/05/2008, 11h25
Thes32
Citation:

Envoyé par Er3van

C'est plus du JS que du css....

je sais plus si les évenements onmouseover et sont acceptés avec les divs sinon tu dois avoir quelque comme ça:
dans un fichier css ou à l'entete de la page
Code:

1 2 3 #id{visibility='hidden'} #id hover{visibility='visible'"}
dans la div concernée
Code:

1 2 <div id="id">....</div>
bon, disons que je l'ai pas testé...
05/05/2008, 15h54
veevee

re,
et merci

ben non
j'ai essayé avec DIV, avec P, rien...
J'ai essayé d'inverser (effacer quand on pointe) rien

Par contre, j'ai bien compris qu'on séparait le JS du CSS (c'est toujours ça de pris)

La lutte continue

re,

je commence à y voir plus clair :
Dans la page HTML, il me semble qu'il faut passer obligatoirement par un script JS comportant deux fonctions :
- la fonction voir() pour onmouseover
- la fonction cacher() pour onmouseout
Code:

1 2 3 4 <div onmouseover="voir()" onmouseout="cacher()"> <script type="text/javascript" src="http://www.abcompteur.com/cpt/?code=4/8/8146/2/1&ID=352737"> </script><noscript><a href="http://www.abcompteur.com/">ABCompteur : compteur gratuit</a></noscript> </div>
Le pb c'est pour passer de ces fonctions JS à une commande (provisoire) CSS
En quelque sorte, comme JS peut-il appeler une classe (ou une id) CSS ?
Code:

1 2 3 4 5 6 7 8 <script language="JavaScript" type="text/javascript"> function voir(){ alert("on passe par voir"); } function cacher(){ alert("on passe par cacher"); } </script>
Là je sèche

Mais les pointures savent faire, eux !!!

Merci

Bonjour,

je crois avoir compris (?) ce qu'il faut faire, mais je ne sais pas comment le faire, je rencontre deux écueils :
1° manipuler les paramètres d'une fonction
2° écrire, avec JS, quelque chose dans du code HTML (utiliser la commande return ?)

Principe
Au départ, la variable xx a pour valeur "cacher" (procédure JS)
au survol du compteur, la fonction voir() appelée par onmouseover change xx en "voir", et on recharge le compteur
à la sortie du survol, la fonction cacher() appelé par onmouseout change xx en "cacher" et on recharge le compteur

le code JS serait :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script language="JavaScript" type="text/javascript"> var xx=="cacher"; function voir(){ alert("voir"); xx=="voir"; //ici une instruction pour éxécuter le script JS du compteur return } function cacher(){ alert("cacher"); xx=="cacher"; //ici une instruction pour éxécuter le script JS du compteur return; } </script>
Le code HTML serait
Code:

1 2 3 4 <div class=xx onmouseout=cacher() onmouseover=voir()> <script type="text/javascript" src="http://www.abcompteur.com/cpt/?code=4/8/8146/2/1&ID=352737"> </script><noscript><a href="http://www.abcompteur.com/">ABCompteur : compteur gratuit</a></noscript> </div>
Un familier de JS sait-il faire cela ?

Merci

Javascript

Code:

1
2
3
4
5
6
7
8
9
10
 
<script language="JavaScript" type="text/javascript">
 
function voir(this){
this.style.display="block"
}
function cacher(this){
this.style.display="none"
}
</script>

Code:

1
2
3
4
5
6
7
8
9
10
 
<script language="JavaScript" type="text/javascript">
 
function voir(this){
this.style.visibility="visible";
}
function cacher(this){
this.style.display="none";
}
</script>

html

Code:

1
2
3
4
5
 
<div onmouseout="cacher(this)" onmouseover="voir(this)">
<script type="text/javascript" src="http://www.abcompteur.com/cpt/?code=4/8/8146/2/1&ID=352737">
</script><noscript><a href="http://www.abcompteur.com/">ABCompteur : compteur gratuit</a></noscript>
</div>

06/05/2008, 19h13
veevee
Bonsoir

Ça ne fonctionne pas, et comme j'ai essayé mille variantes autour de ce thème, sans résultat (ou plutot avec des résultats "inexpected" ) j'en suis revenu à des choses plus simples

Mon HTML est basé sur du texte, s'il est cliqué, il doit disparaître

Code:

<div id="image" onclick="voir()">Ce texte a pour ID le mot image</div>

Le JS est simple
Code:

1 2 3 4 5 6 7 <script language="JavaScript" type="text/javascript" > function voir() { alert("voir"); document.getElementById(image).style.visibility="hidden"; alert("après"); } </script>
On passe bien par la fonction, mais le texte reste tel quel et la 2° alerte n'est pas éxécutée

Tout se passe comme si JS ne comprenait pas les instructions CSS (ce quii n'est pas tellement extraordinaire)

Comment tourner cette difficulté ?
Sans doute en modifiant (en JS) les attributs HTML de DIV pour qu'il devienne invisible, mais je doute que cet attribut existe

Un avis sur la question ?

Merci

Re,

Hourra pour le clown :D:D

Ça fonctionne avec un HTML :
Code:

1 2 <div id="1" onclick="voir()">Ce texte a pour ID le mot image</div>
et un JS
Code:

1 2 3 4 5 6 7 <script language="JavaScript" type="text/javascript" > function voir() { alert("voir"); document.getElementById(1).style.visibility="hidden"; alert("après"); } </script>
il m'a fait transpirer, ce problème, mais j'y suis arrivé

Faut pas rigoler avec les ID:evilred:

Merci à thes32 et à er3van

Bonjour,

modification du programme en question en tenant compte des faits suivants :

1° en JS, avant de spécifié qu'un élement est hidden il faut que cet élement soit chargé
2° un élément hidden ne peut pas être cliqué (normal) on prend donc un autre élément comme "déclencheur"

Ce qui donne finalement
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/javascript" > function voir() { document.getElementById(1).style.visibility="visible"; } </script> </head> <body> Programme cachant un compteur puis le faisant apparaitre en cliquant le déclencheur (qui peut être une image par exemple) <br><br><br><br> <div id="1"><script type="text/javascript" src="http://www.abcompteur.com/cpt/?code=4/8/8146/2/1&ID=352737"> </script><noscript><a href="http://www.abcompteur.com/">ABCompteur : compteur gratuit</a></noscript></div> <script language="JavaScript" type="text/javascript" > document.getElementById(1).style.visibility="hidden"; </script> <div onclick="voir()">Déclencheur</div> </body>
et voila le travail:D

un petit bravo pour encourager l'artiste:oops:

@+