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 :

conflit entre plusieurs scripts dans une même page


Sujet :

JavaScript

  1. #1
    Nouveau candidat au Club
    Profil pro
    Inscrit en
    Novembre 2009
    Messages
    1
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2009
    Messages : 1
    Par défaut conflit entre plusieurs scripts dans une même page
    Bonjour,
    Je tiens a préciser que je sous novice en javascript et que j'apprends sur le tas... Merci donc d'entre indulgent!

    Mon problème : Je souhaite faire un menu animé en utilisant la bibliothèque jquery et je souhaite aussi que les liens soient sonores (qu'un petit son discret soit joué quand ils sont survolés) en utilisant "onmouseover".

    J'ai reussi a faire les deux choses séparement mais lorsqu'il s'agit de les combiner dans une meme page...ca ne marche plus

    Ce que je souhaiterai faire, c'est reussir a combiner cette partie du code qui me permet de jouer un son en survolant un lien:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script type="text/javascript">
    	initialise(document);
    </script>
     
    <a href="#" onmouseover="jouer_musique();">Play</a>
    	<br/>
    <a href="#" onclick="arreter_musique();">Stop</a>
     
     
    <div id="musique"></div>
    et la partie ou le menu est "animé" dans le header (je l'ai placé plus bas pour une facilité visuelle).
    J'espère que ce n'est pas trop confus et que je ne raconte pas d'absurdité...

    MERCI DE M'AIDER, JE GALERE!

    Voici ma page html :
    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
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
     
    <!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" xml:lang="fr" lang="fr">
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
     
    <title>Osmoz menu</title>
    <link href="css/mise_page_menu.css" rel="stylesheet" type="text/css" />
    <link href="css/mise_en_page_home.css" rel="stylesheet" type="text/css" />
     
     
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
     
    <script type="text/javascript" src="js/musique.js"> </script>
     
    </head>
     
    <body>
     
    <div id="page">
     
    <!--VOICI LE HEADER -->
     
    	<div id="header">
     
     
    <ul id="topnav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Realisations</a></li>
        <li><a href="#">Equipe</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Liens</a></li>
    </ul>
     
     
    <!--SCRIPT VISUEL-->
    <script type="text/javascript">
     
    	$(document).ready(function() {
     
    	$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
     
    	$("#topnav li").each(function() { //For each list item...
    		var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
    		$(this).find("span").show().html(linkText); //Add the text in the <span> tag
    	}); 
     
    	$("#topnav li").hover(function() {	//On hover...
    		$(this).find("span").stop().animate({
    			marginTop: "-40" //Find the <span> tag and move it up 40 pixels
    		}, 250);
    	} , function() { //On hover out...
    		$(this).find("span").stop().animate({
    			marginTop: "0"  //Move the <span> back to its original state (0px)
    		}, 250);
    	});
     
    });
    </script>
    <!--  FIN DU SCRIPT VISUEL -->
     
     
    	</div>
     
    <!--  FIN DU HEADER -->
     
     
     
    <script type="text/javascript">
    	initialise(document);
    </script>
     
    <a href="#" onmouseover="jouer_musique();">Play</a>
    	<br/>
    <a href="#" onclick="arreter_musique();">Stop</a>
     
     
    <div id="musique"></div>
     
     
    </div>
     
    </body>
    </html>
    PS : j'ai mis en pièce jointe le fichier *.js qui me permet de jouer un son au survol du lien.
    Fichiers attachés Fichiers attachés

Discussions similaires

  1. utilisation de script js plusieurs fois dans une même page
    Par tribalnanasss dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 09/07/2010, 00h34
  2. Réponses: 0
    Dernier message: 01/07/2008, 16h16
  3. [XHTML] comment déclarer plusieurs doctypes dans une même page
    Par elsapascal dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 21/06/2008, 11h20
  4. Réponses: 11
    Dernier message: 07/08/2007, 17h11

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