faire clignoter un texte

**laurentSc** · 23/02/2013, 11h58

Bonjour,

j'ai fait un code qui s'inspire de ce post : http://www.developpez.net/forums/d38...-balise-blink/, la seule différence étant que j'ai remplacé l'id par une classe, mais ça ne clignote pas. Pourquoi ?

Code html+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
16
17
18
19
20
21
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test1</title>
  <script language="javascript">
function cligno() {
if(document.getElementsByClass("cligno").style.visibility != 'hidden'){
document.getElementsByClass("cligno").style.visibility = 'hidden';
}
else{
document.getElementsByClass("cligno").style.visibility = 'visible';
}
}
var timer=setInterval("cligno()", 1000);
  </script>
</head>
<body>
<span class="cligno">HELLO</span>
</body>
</html>

**hackoofr** · 23/02/2013, 12h54

Code :

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
19
20
21
22
<html>
<head>
<script>
function blink(Obj)
{
if (Obj.style.visibility == "visible" )
{
Obj.style.visibility = "hidden";
}
else
{
Obj.style.visibility = "visible";
}
}
setInterval("blink(bl)",500);
</script>
</head>
<body>
<center><br><br><br>
<div id="bl" style="visibility:visible"><font size=+2 color=red>Texte Clignotant !!!</font></div>
</body>
</html>

un autre exemple de Texte-clignotant

**SpaceFrog** · 23/02/2013, 13h06

Deux causes probables

getElementsByClass n'existe pas ...
l'objet n'est pas instancié lorsque le script est appelé

**NoSmoking** · 23/02/2013, 13h52

Bonjour,
effectivement cette méthode ,document.getElementsByClass("cligno"), n'existe pas sauf si elle à été définie ce qui n'est pas le cas dans le code que tu fournis.

De plus le s dans getElementsByClass signifie que l'on récupères une liste donc il y a lieu d'accéder à un élément via un index.

On écrira donc var oElem = document.getElementsByClass("cligno")[ind].

Je rajouterais qu'il est plus propre d'écrire "var timer=setInterval("cligno()", 1000);" sous la forme var timer=setInterval( cligno, 1000);, en passant à la méthode setInterval la référence à la fonction.

Remarque très perso le mode blink peut devenir vite ~~à ch...~~ une horreur

.

**laurentSc** · 23/02/2013, 15h31

@SpaceFrog : avec un Id à la place de la Class, ça marchait, donc je pense que l'explication de l'élément pas encore existant ne tient pas ;

@ NoSmoking : Blink NAC (nul à ch...) certes, mais je réponds à un cahier des charges...Rajouter un indice (document.getElementsByClass("cligno")[ind]) ne change rien...;

@hackoofr : ton exemple marche si on attribut un id à l'élément, ce que j'arrivais déjà à faire, mais comme je voudrais faire plusieurs textes clignotants, j'aurais préféré créer une classe...

**NoSmoking** · 23/02/2013, 15h36

tu oublies l'essentiel

Envoyé par SpaceFrog

getElementsByClass n'existe pas ...

Envoyé par NoSmoking

effectivement cette méthode ,document.getElementsByClass("cligno"), n'existe pas sauf si elle à été définie ce qui n'est pas le cas dans le code que tu fournis.

**laurentSc** · 23/02/2013, 15h58

OK, mais comme tu as bien compris ce que je cherche à faire, comment ferais tu ?

**NoSmoking** · 23/02/2013, 16h23

J'ai déjà répondu

Envoyé par NoSmoking

Remarque très perso le mode blink peut devenir vite ~~à ch...~~ une horreur

.

donc je ne ferais pas

bon allez dans le cadre d'un bon voisinage

Code html :

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
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>BLINK BLINK</title>
<script>
var oBlink = null;
function cligno(){
  // recup des éléments si pas encore fait
  oBlink = oBlink || document.getElementsByClassName("cligno");
  var i, nbr= oBlink.length;
  for( i=0; i < nbr; i++){
    // change visibility suivant le cas
    oBlink[i].style.visibility = oBlink[i].style.visibility == 'hidden' ? 'visible' : 'hidden';
  }
}
var timer=setInterval( cligno, 1000);
</script>
</head>
<body>
<span class="cligno" style="visibility:hidden">EN HAUT</span><br>
<span class="cligno">EN BAS</span>
</body>
</html>

Attention toutefois getElementsByClassName n'est pas connu sous IE<9

**SpaceFrog** · 23/02/2013, 16h30

Le fait que cela fonctionnait avec un id n'empeche pas qu'il y a un souci d'instanciation d'objet ! Les premières itérations du setInterval plantent

pour ce qui est de getElemetnsByClass, regade putot du coté de getElementsByClassName qui comme le souligne plus haut NoSmo contient un S

**laurentSc** · 23/02/2013, 16h31

Merci, je comprends donc pourquoi ça marche sous FF mais pas sous IE8...

**SpaceFrog** · 23/02/2013, 16h44

Pour ton souci de getElement(s)
http://www.developpez.net/forums/d75...filtre-regexp/

Sinon il y a Jquery
http://javascript.developpez.com/faq...Other#EffetCSS

**laurentSc** · 24/02/2013, 12h44

Comme j'avais la flemme d'étudier les liens de SpaceFrog, j'ai fait ça :

Code html+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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  <script language="javascript">
function cligno() {
if(document.getElementById("txt1").style.visibility != 'hidden'){
document.getElementById("txt1").style.visibility = 'hidden';
}
else{
document.getElementById("txt1").style.visibility = 'visible';
}
if(document.getElementById("txt2").style.visibility != 'hidden'){
document.getElementById("txt2").style.visibility = 'hidden';
}
else{
document.getElementById("txt2").style.visibility = 'visible';
}
if(document.getElementById("txt3").style.visibility != 'hidden'){
document.getElementById("txt3").style.visibility = 'hidden';
}
else{
document.getElementById("txt3").style.visibility = 'visible';
} }
var timer=setInterval("cligno()", 500);
  </script>
...
Retrouvez <a href="---" target="_blank"><span id="txt1">ici</span></a>
--- <br>
                                          <br>
Retrouvez <a href="---" target="_blank"><span id="txt2">ici</span></a>
---<br>
                                          <br>
Retrouvez <a href="---" target="_blank"><span id="txt3">ici</span></a>

et je sais qu'il aurait fallu écrire <br/>...

**Auteur** · 24/02/2013, 13h00

Une question de débutant (

), mais je suis surpris que le code proposé par hackoofr fonctionne sous Firefox car on trouve :

Code :

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

setInterval("blink(bl)",500);

moi qui croyais que sous Firefox on ne pouvait accéder à un élément uniquement en utilisant la méthode getElementById(). Or ici on passe directement l'id de l'élément en paramètre (et encore sans guillemets)...
Une personne aurait une explication à donner ?

**laurentSc** · 24/02/2013, 14h51

Auteur, je n'ai pas pris le code fourni par hackoofr, mais celui de ce post : http://www.developpez.net/forums/d38...-balise-blink/.
Mais pour vérifier, j'ai testé celui de hackoofr, et ça clignote aussi sous FF (et sous Chrome).

Question subsidiaire : au bout de combien d'années peut-on accéder au statut de débutant (que je revendique) ?

**Auteur** · 24/02/2013, 16h02

Envoyé par laurentSc

Auteur, je n'ai pas pris le code fourni par hackoofr, mais celui de ce post : http://www.developpez.net/forums/d38...-balise-blink/.
Mais pour vérifier, j'ai testé celui de hackoofr, et ça clignote aussi sous FF (et sous Chrome).

Je sais qu'il fonctionne je l'ai testé également, mais j'aimerai comprendre pourquoi

Envoyé par laurentSc

Question subsidiaire : au bout de combien d'années peut-on accéder au statut de débutant (que je revendique) ?

pas compris