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

Citation:

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

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

Du coup

Citation:

Je ne sais pas si je suis assez clair

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

iluvatar75 · 19/01/2012, 18h18

Citation:

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

19/01/2012, 18h27	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	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 ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

19/01/2012, 19h12	#6
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	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 ! __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

19/01/2012, 19h26	#7
iluvatar75 Nouveau Membre du Club Webdesigner Inscription : décembre 2008 Messages : 95 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Webdesigner Informations forums : Inscription : décembre 2008 Messages : 95 Points : 25 Points : 25	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...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email