Comment réaliser une infonews transparente cela en JS ?

**amarcil** · 17/01/2008, 19h35

Salut a tous !

Alors voila, j'ai vu sur le site france info un truc que je souhaiterais réaliser pour mon site:

http://www.france-info.com/

la barre en bas du site qui défile les infos....

Seulement le soucis c'est que je ne voie pas du tout comment faire celà... j'ai juste vu que ça marche avec du JS mais je suis un peu bloqué...

Quelqu'un a une idée sur la manière de faire ce type de chose?

MErci a vous de votre aide !

**le_chomeur** · 18/01/2008, 10h35

Alors les grande ligne

- utiliser une div ( ou autre ) en position fixed
- utiliser l'opacity sur une couleur de fond de ta div ( pour gèrer la transparence )
- créer un tableau contenant tout tes titres de news à afficher
- créer une méthode permettant de changer de titre à un interval donné

Si tu as un souçis fais signe , je te montrerais un bout du script

**le_chomeur** · 18/01/2008, 11h33

voila le script

je vous laisse l'améliorer

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
.divInfo{
	position:fixed;
	bottom:0px;
	width:100%;
	height:35px;
	line-height:35px;
	color:#ffffff;
}
.divBackground{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:35px;
	background-color:#000000;
	opacity: 0.6;
	filter:alpha(opacity=60);	
	z-index:50;
	font-size:24px;
}
.divText{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:35px;
	z-index:200;
	font-size:24px;
}
#toto{
	margin-top:150px;
}
</style>
 
<script type="text/javascript">
	var news = new Array();
	news[0] = ["Politique","pas bien la politique"];
	news[1] = ["sport","On a perdu la coupe du monde"];
	news[2] = ["sport","laure manuchao remporte la coupe de maracass"];
 
	var NbDeNews = news.length -1 // Permet de vérifier ou on en est pour l'affichage des news et boucler
 
	function changementTitreNews(numNews){
		document.getElementById("titre").innerHTML = "Section : " + news[numNews][0] +" titre : "+news[numNews][1]+" et i = "+numNews+"<br />";
		if(NbDeNews == numNews){
			numNews = 0 ;
		}
		else{
			numNews++;
		}
		setTimeout(function() {changementTitreNews(numNews);}, 2000);
	}
 
</script>
</head>
 
<body>
et le texte derrière pour voir la transparence
<div class="divInfo">
	<div class="divBackground"></div>
	<div class="divText" id="titre">et plein de texte sympa ici</div>	
</div>
<div id="toto"></div>
<script type="text/javascript">
changementTitreNews(0);
</script>
</body>
</html>

**amarcil** · 18/01/2008, 15h46

c'est tres sympa ton aide, je vais de ce pas tester ça et je reviendrai ici après

**amarcil** · 18/01/2008, 17h26

et si je veux rajouter une croix ou un symbole quelconque pour faire disparaitre cette news c'est possible ou non?

**le_chomeur** · 18/01/2008, 18h37

oui , tu rajoutes un lien avec une croix un X une image ou autre ...
avec une fonction pour masquer cette div :

document.getElementById('toto').style.diplay = "none"

Comment réaliser une infonews transparente cela en JS ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager