Creer un chemin sur un code javascript
Bonsoir,
Je souhaite créer un effet "fade" sur mes menus (dont le but est de changer l'apparence de mon bouton lorsque je passe avec ma souris). En cherchant sur le net j'ai trouvé ce code simple et intéressant.
le code qui a été fourni, la personne a mis le code CSS et JAVASCRIPT dans le HTML.
Donc pour que le fichier pèse moins lourd en code (car j'ai l'intention d'en mettre plus), j'ai décidé de créer un fichier externe javascript, et css.
Depuis cette manip', l'effet ne marche plus.
J'ai testé en gardant seulement le css dans le html et du coup mon effet fonctionne...:?
Donc il y a surement une erreur sur mon fichier javascript
Je vous mets le code HTML avec le css
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
|
<!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=UTF-8" />
<title>Document sans nom</title>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/java.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#chien {
height: 280px;
width: 280px;
}
#image {
height: 280px;
width: 280px;
}
#image .rollover {
background-image: url(images/img_on.jpg);
height: 280px;
width: 280px;
display: block;
position: absolute;
}
#image a {
height: 280px;
width: 280px;
display: block;
position: relative;
}
-->
</style>
</head>
<body>
<div id="image">
<div id="chien"><a href="#"><span class="rollover"></span><img src="images/img_off.jpg" width="280" height="280" alt="off" /></a></div>
</div>
</body>
</html> |
La balise DIV #image a en rouge, permet de localiser le css, par contre si je le met dans un autre fichier, mon script ne fonctionne plus.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$(document).ready(function(){
//Set opacity on each span to 0%
$(".rollover").css({'opacity':'0'});
$('#image a').hover(
function() {
$(this).find('.rollover').stop().fadeTo(500, 1);
},
function() {
$(this).find('.rollover').stop().fadeTo(500, 0);
}
)
}); |
Ce que je voudrais c'est de mettre ce code css dans un fichier externe comme javascript...
Je ne sais pas si je suis assez clair :?
