IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Comment réaliser une infonews transparente cela en JS ?


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    202
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2005
    Messages : 202
    Par défaut Comment réaliser une infonews transparente cela en JS ?
    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 !

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    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

  3. #3
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    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>

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    202
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2005
    Messages : 202
    Par défaut
    c'est tres sympa ton aide, je vais de ce pas tester ça et je reviendrai ici après

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    202
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2005
    Messages : 202
    Par défaut
    et si je veux rajouter une croix ou un symbole quelconque pour faire disparaitre cette news c'est possible ou non?

  6. #6
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    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"

Discussions similaires

  1. Réponses: 12
    Dernier message: 23/01/2008, 09h17
  2. [SQL] Comment réaliser une fonction d'incrementation ?
    Par da_latifa dans le forum Langage SQL
    Réponses: 3
    Dernier message: 30/12/2005, 11h14
  3. Réponses: 4
    Dernier message: 25/12/2005, 18h46
  4. Comment rendre une form transparente à certains endroits ?
    Par ludo5532 dans le forum Composants VCL
    Réponses: 4
    Dernier message: 21/08/2005, 15h28
  5. [FLASH MX] Comment réaliser une forme dentelée
    Par celina5880 dans le forum Flash
    Réponses: 4
    Dernier message: 04/11/2004, 17h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo