Creer un chemin sur un code javascript

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

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, 18h07

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, 18h18

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, 18h27

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, 18h32

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, 19h12

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 !

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

Oui j'avais pas fait attention mais dans le doute j'ai quand même testé avec jquery-1.7.1.js mais ça ne fonctionne toujours pas...

**danielhagnoul** · 20/01/2012, 19h41

Bonsoir

Le fichier CSS rollover.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
@charset "utf-8";
/* rollover */
#chien {
	height: 280px;
	width: 280px;
}
#image {
	height: 280px;
	width: 280px;
}
#image .rollover {
	background-image: url("http://danielhagnoul.developpez.com/images/avatarDVJH.jpg"); /* URL complète ! */
	height: 280px;
	width: 280px;
	display: block;
	position: absolute;
}
 
#image a {
	height: 280px;
	width: 280px;
	display: block;
	position: relative;
}

Inclusion dans la page web (si le fichier CSS est dans le même dossier) : <link rel="stylesheet" href="rollover.css" />.

**iluvatar75** · 23/01/2012, 11h05

URL complète ? C'est-à-dire ?

Car là tu me donnes un lien "http" alors que pour le moment je le travaille sur mon ordi...
Enfin je ne comprends pas...

Vous ne pensez pas que le problème vient du fichier script :

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

Sinon si vous avez un lien direct sur des menus avec un effet "fade" lorsque je passe avec la souris, je suis preneur

Creer un chemin sur un code javascript

jQuery

Discussions similaires

Partager

Partager