Discussion :

[veevee]

Bonjour,

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

ce compteur est appelé par :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 simili CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Er3van]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[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

[Thes32]

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

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
#id{visibility='hidden'}
#id hover{visibility='visible'"}

dans la div concernée

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div id="id">....</div>

bon, disons que je l'ai pas testé...

[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

[veevee]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[veevee]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Thes32]

Javascript

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

ou

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Le JS est simple

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[veevee]

Re,

Hourra pour le clown

Ça fonctionne avec un HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et un JS

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci à thes32 et à er3van

[veevee]

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 HTML+JS :

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

un petit bravo pour encourager l'artiste



@+