Probleme de variable

Question

mackean

12 Sep 2008 à 16:42

Bonjour, je ne comprend pas pourquoi mon javascript ne marche pas sur ma page.
Voici un lien qui marche: lien qui marche
voici le lien qui ne marche pas:lien qui marche pas Smiley biggol

Voici le code:


<!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=utf-8" />
<title>Echo'graphik - Webdesign Portofolio</title>
<LINK href="echo/echo.css" type=text/css rel=stylesheet>
<SCRIPT 
src="test_fichiers/mootools-1.2-core.js" 
type=text/javascript></SCRIPT>

<SCRIPT 
src="test_fichiers/mootools-1.2-more.js" 
type=text/javascript></SCRIPT>

<SCRIPT 
src="echo/images.js"
type=text/javascript></SCRIPT>


</head>

<body>
<div id="all">

<div class="haut_de_page">
<img src="echo/logo_echo_graphik.jpg" width="489" height="89" /><img src="echo/light1.jpg" width="151" height="89"/><span id="menu_haut"><img src="echo/menu_light.jpg"/></span>
</div>

<div id="menu">
<img src="echo/onglet_news.jpg"  /><img class="onglets" src="echo/onglet_portfolio.jpg"  /><img class="onglets" src="echo/onglet_service.jpg"  /><img class="onglets" src="echo/onglet_contact.jpg"  /></div>

<div class="deco1">
<img src="echo/light2.jpg" width="134" height="28"  />
</div>

<div id="titre_creation"><img src="echo/titrecrea.jpg" width="74" height="15"  /></div>

<div id="haut_cadre">présentations des dernieres créations...</div>

<div id="gauche_cadre"><img src="echo/cadre_gauche_projets.jpg" width="31" height="209" /></div>
<div id="inter_cadre"></div>
<div id="droite_cadre"><img src="echo/cadre_droite_projets.jpg" height="209" width="29"/></div>
<div id="deco_cadre"> <img src="echo/deco_cadre.jpg"  /></div>
<div id="bas_cadre"> <img src="echo/cadre_bas_projets.jpg"  /></div>

<div id="section">

<div id="echo">
  <img id="echo_titre" src="echo/echo_titre.jpg"  />
  <div id="cadre_echo"></div>
</div>
  
<div id="news">
<img id="titre_news" src="echo/news_titre.jpg" />
<div id="cadre_news">Créations en cours, projets,...</div>
</div>

<div id="contact">
<img src="echo/contact_titre.jpg" />
</div>


<div id="bas">
<img id="deco_bas1" src="echo/bandeau_bas_deco1.jpg" height="63" /><img id="deco_bas2" src="echo/bandeau_bas_deco2.jpg" height="63" />
</div>
<div id="band_bas"></div>
<div><img src="echo/bandeau_bas_deco3.jpg"  /></div>

</div>
</body>
</html>


body{
background-color:#221305;
background-image:url(fond.jpg);
background-repeat:repeat-x;
margin:0 auto;

}

#all{
margin:0 auto;
width:980px;
}
 
.haut_de_page img {
 vertical-align: bottom;
 height:89px;

 } 
 
.haut_de_page{
height:89px;
text-align:center;
 } 


#menu_haut{
background-image:url(menu_light.jpg);
width:195px;
height:89px;
}

#menu{
margin-top:0;
background-image:url(bandeau_menu.jpg);
background-repeat:no-repeat;
padding-left:303px;
padding-top:2px;
width:980px;
height:36px;}

.onglets{
padding-left:2px;}

.deco1{
padding-left:150px;
margin:0;
vertical-align:bottom;
height:28px;}

#titre_creation{
padding-left:100px;
height:20px;
vertical-align:bottom;
}

#haut_cadre{
padding-left:103px;
color:#b0742c;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:400;
height:38px;
background-image:url(cadre_haut_projets.jpg);
background-position:center;
background-repeat:no-repeat;
}

#gauche_cadre{
float:left;
padding-left:82px;
width:31px;
}

#inter_cadre{
background-color:#341d07;
float:left;
width:757px;
height:209px;}

#droite_cadre{
float:left;
width:29px;
height:209px;
}

#deco_cadre{
float:left;
width:75px;
height:209px;}

#bas_cadre{
padding-left:82px;
}

#section{
padding-left:83px;
}

#echo{
width:323px;
float:left;
}

#echo_titre{
text-align:left;
padding-left:30px;
}

#cadre_echo{
background-image:url(cadre_echo.jpg);
width:323px;
height:151px;
background-repeat:no-repeat;}

#news{
width:249px;
float:left;}

#titre_news{
padding-left:20px;}

#cadre_news{
background-image:url(cadre_news.jpg);
background-repeat:no-repeat;
width:249px;
height:174px;
color:#b0742c;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:400;
padding-left:26px;
}

#contact{
float:left;
width:267px;
background-image:url(cadre_contact.jpg);
height:237px;}

#band_bas{
background-image:url(bandeau_bas.jpg);
background-repeat:no-repeat;
background-position:center;
background-position:top;
text-align:center;
height:43px;}

#bas img {
 vertical-align: bottom;
 }

#deco_bas1{
padding-left:40px;}

#deco_bas2{
padding-left:406px;}

var References = {
	
	  init: function(){
			
			  var items = $$('menu');
				items.each(function(element){
				  var img = element.getElement('img');
				  img.setStyle('opacity', 0);
				  var imgFx = new Fx.Tween(img, { duration: 200, wait: false });
					element.addEvent('mouseenter', function(){
					  imgFx.start('opacity', 1);
						element.setStyle('cursor','pointer');
					});
					element.addEvent('mouseleave', function(){
					  imgFx.start('opacity', 0);
					});
					element.addEvent('click', function(){
					  window.location = element.getElement('a').getProperty('href');
					});
				});
				
		}
		
};




var FileCz = {
	init: function(){
		 
    // Reference
		References.init();
		
		
	}
};


window.addEvent('domready', function(){
																		 
  FileCz.init();

	
});

merci d'avance pour votre aide. Smiley smile

Modifié par mackean (13 Sep 2008 - 10:34)

mackean

13 Sep 2008 à 10:19

pour faire plus simple parce que je crois que c'est un peu fouillis tout ça. Les deux liens ont toujours bon. En fait dans le premier lien mon javascript marche trés bien, dans mon deuxième lien, le javascript ne marche pas si je change la variable en "menu" pour que mes onglets du menu disparaissent comme dans le premier lien.

pour les codes

</head>

<body>
<div id="all">

<div class="haut_de_page">
<img src="echo/logo_echo_graphik.jpg" width="489" height="89" /><img src="echo/light1.jpg" width="151" height="89"/><span id="menu_haut"><img src="echo/menu_light.jpg"/></span>
</div>

<div id="menu">
<img src="echo/onglet_news.jpg"  /><img class="onglets" src="echo/onglet_portfolio.jpg"  /><img class="onglets" src="echo/onglet_service.jpg"  /><img class="onglets" src="echo/onglet_contact.jpg"  /></div>


background-color:#221305;
background-image:url(fond.jpg);
background-repeat:repeat-x;
margin:0 auto;

}

#all{
margin:0 auto;
width:980px;
}
 
.haut_de_page img {
 vertical-align: bottom;
 height:89px;

 } 
 
.haut_de_page{
height:89px;
text-align:center;
 } 


#menu_haut{
background-image:url(menu_light.jpg);
width:195px;
height:89px;
}

#menu{
margin-top:0;
background-image:url(bandeau_menu.jpg);
background-repeat:no-repeat;
padding-left:303px;
padding-top:2px;
width:980px;
height:36px;}

.onglets{
padding-left:2px;}


var References = {
	
	  init: function(){
			
			  var items = $$('menu');
				items.each(function(element){
				  var img = element.getElement('img');
				  img.setStyle('opacity', 0);
				  var imgFx = new Fx.Tween(img, { duration: 200, wait: false });
					element.addEvent('mouseenter', function(){
					  imgFx.start('opacity', 1);
						element.setStyle('cursor','pointer');
					});
					element.addEvent('mouseleave', function(){
					  imgFx.start('opacity', 0);
					});
					element.addEvent('click', function(){
					  window.location = element.getElement('a').getProperty('href');
					});
				});
				
		}
		
};




var FileCz = {
	init: function(){
		 
    // Reference
		References.init();
		
		
	}
};


window.addEvent('domready', function(){
																		 
  FileCz.init();

	
});

je suis pendu a vos conseils.

koala64

Modérateur

13 Sep 2008 à 11:42

Salut,

Tu te sers de $$() pour tenter de récupérer ton identifiant alors que c'est de la fonction $() dont tu dois te servir. Smiley smile

$() ne prend que des identifiants sous forme de chaine texte en tant que paramètre alors que $$() prend les sélecteurs CSS. $$('#menu') serait donc valable si tu ne souhaites te servir que de $$().

Par ailleurs, ton menu est inaccessible dans diverses situations car sans JS, on n'a pas d'accès aux autres pages et sans images, on ne voit pas le texte. Ca le fait pas du tout, là... vraiment... si, si, c'est moche. Smiley ampoule

En outre, le script que tu montres ne correspond pas à ta structure XHTML.

Le mieux serait donc de recréer un menu en constituant une liste non ordonnée de liens contenant des images.

De là, tu n'aurais qu'à styler le tout via CSS pour obtenir le rendu désiré et à affecter, via JS, ton effet d'opacité sur les images au survol des liens. Pour la redirection, inutile de passer par JS car chaque lien sert justement à changer de page.

Autre chose, la structure de ton code JS devrait plus ressembler à ceci :

var References = new Class({
    initialize: function() {
        ...
    }
});

window.addEvent('domready', function() {
    new References();
});

la méthode initialize() étant automatiquement lancée lors de la création d'instance new References().

Enfin, ergonomiquement parlant, tu fais disparaitre l'information au survol via ton effet d'opacité ce qui ne facilite guère l'utilisation de ton menu. M'est avis qu'il vaudrait mieux transformer l'apparence de l'onglet survolé mais conserver l'information au survol.

Bref, pour bien faire, il est nécessaire de tout revoir de fond en comble. Smiley cligne

Tymlis

14 Sep 2008 à 03:34

+1

Et tu utilises des <img> pour la présentation, c'est mal.

Je pense que le mieux est de commencer par revoir le code HTML, puis CSS, puis enfin Javascript.

mackean

15 Sep 2008 à 12:34

koala64 > ok je pense que je vais revoir tout ça, merci de ton aide.

Tymlis >"Et tu utilises des <img> pour la présentation, c'est mal", heu je comprend pas, il faut pas utiliser de balises img?????
Smiley ohwell

Modifié par mackean (15 Sep 2008 - 12:34)

Tymlis

15 Sep 2008 à 20:42

Uniquement si tes images font parti de ton contenu (si tu veux montrer tes photos de vacances ou toute autre gallerie, alors oui, utilise des img), par contre si elles servent juste à la présentation, au design, alors non, il faut utiliser du css et sa propriété background-image.

Plus d'infos ici : faq

mackean

16 Sep 2008 à 10:18

merci a toi Smiley smile

. je m'en vais de ce pas corriger tout cela.

Sujet clos