Creer un chemin sur un code javascript

**iluvatar75** · 19/01/2012, 18h39

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 :

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
 
<!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 :

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
$(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

**Bovino** · 19/01/2012, 19h07

mettre ce code css dans un fichier externe comme javascript...

Euh... ce que tu appelles "ce code css", c'est du JavaScript

Du coup

Je ne sais pas si je suis assez clair

Ben... non, désolé...

**iluvatar75** · 19/01/2012, 19h18

Envoyé par Bovino

Ben... non, désolé...

LOL j'en était sur !

Je vais faire simple...(je vais essayer)

J'ai téléchargé ce fichier :

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
<!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.3.2.min.js" type="text/javascript"></script>
 
<script type="text/javascript">        	
$(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);
		}
	)
 
});		
</script>
 
<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>

Et moi j'ai fait ça (pour alléger le fichier)

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
<!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">
<!--
-->
</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>

J'ai enlevé le css et le javascript, en les mettant dans des fichiers externes :
Script -> java.js
CSS -> style.css

Du coup ça ne fonctionne pas...

**Bovino** · 19/01/2012, 19h27

Questions con, mais on sait jamais...

Ton fichier java.js (hum... ne pas confondre non plus java et JavaScript) est bien dans un dossier js ?
Tu as bien supprimé les balises <script> dans le fichier .js ?

**iluvatar75** · 19/01/2012, 19h32

Oui en effet j'aurais du l'appeler autrement que java

Sinon oui, j'ai fait attention de pas mettre la balise <script> dans le fichier .js

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
// JavaScript Document
 
$(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);
		}
	)		
 
});

Et oui mon fichier java.js est bien dans un dossier js

**Bovino** · 19/01/2012, 20h12

Alors encore un truc con, mais tu montres deux codes, dans l'un, tu as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

et dans l'autre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>

C'est quelle version que tu utilises ?
Et au passage, tu es au courant que ces versions sont obsolètes ? Actuellement, on en est à la 1.7.1 !

Creer un chemin sur un code javascript

jQuery

Vue hybride

Discussions similaires

Partager

Partager