1 pièce(s) jointe(s)
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 :cry:
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:
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:
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.
