Besoin d'aide pour trouver un erreur

Besoin d'aide pour trouver un erreur - HTML/CSS - Programmation

Marsh Posté le 27-07-2012 à 21:23:48    

Bonjour, je viens sur ce forum car j'ai décidé de me créer une page html afin de pratiquer les appel de fonction anonyme et les chaine de caractère en javascript.
Dans ma page, il y a 3 section: Chandail chaud, pantalon et t-shirt. Dans chacune des section il y a 4 petites images. Une partie du code que j'ai écrit permet a une image de s'afficher en gros lorsqu'on fait un onmouseover dessus. Cela fonctionne. Cependant, la deuxieme partie du code serait censé pemettre aux 4 petite image de changer lorsqu'on clique sur une autre section. exemple: si on est dans la section t-shirt, les 4 petite images sont des t-shirt. Si on fait un onclick sur la section pantalon, les 4 petite images changent et deviennent des pantalons. Je sais que 99% de mon code est bon, mais je n'arrive pas à trouver l'erreur. Le code n'est pas long, donc quelqun qui s'y connait trouvera l'erreur rapidement et ca m'aidera énormément. je voulais incorporer mes document de code et les photo au message mais je ne sais pas comment le faire, donc voila le code HTML et JS
 
HTML:
 
<!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>
<script src="projet_personnel.js">  </script>
<link rel="stylesheet" type="text/css" href="projet_personnel.css" />
<title>projet_personnel_maquette</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
</head>
<body>
<div id="contenu">
 <div id="header">
  <div>
  <img src="images/logo.png" id="imgLogo" />
  </div>
  <div id="divImgPanier">
  <a href=""><img src="images/panier.png" id="imgPanier" class="imgPanier" /></a>
  </div>
  <div id="divCategorie1">
  <p id="categorie1"> Chandails chauds</p>
  </div>
  <div id="divCategorie2">
  <p id="categorie2"> Pantalons</p>
  </div>
  <div id="divCategorie3">
  <p id="categorie3"> T-Shirts</p>
  </div>
  </div>
  <div id="divCategorieGrosseImage">
  <img width="252px" height="296px" class="imgCategorieGrosse" id="CategorieGrosseImage" src="images/giletChaud/1.png"/>
  </div>
  <div id="divCategoriePetiteImage">
  <img class="imgCategoriePetite" id="CategoriePetiteImage1" src="images/giletChaud/1.png"/>
  <img class="imgCategoriePetite" id="CategoriePetiteImage2" src="images/giletChaud/2.png"/>
  <img class="imgCategoriePetite" id="CategoriePetiteImage3" src="images/giletChaud/3.png"/>
  <img class="imgCategoriePetite" id="CategoriePetiteImage4" src="images/giletChaud/4.png"/>
 </div>
 <div id="divCouleurGrandeur">
 <p id="motCouleur1">Couleur:</p>
 <p id="motGrandeur1">Grandeur:</p>
 <p id="motCouleur2">Couleur:</p>
 <p id="motGrandeur2">Grandeur:</p>
 <p id="motCouleur3">Couleur:</p>
 <p id="motGrandeur3">Grandeur:</p>
 <p id="motCouleur4">Couleur:</p>
 <p id="motGrandeur4">Grandeur:</p>
 </div>
 <div id="divBoutonRad">
 <input type="radio" name="radBlanc1" id="radBlanc1"><label style="color:white;">Blanc</label>
 <input type="radio" name="radGris1" id="radGris1"><label style="color:white;">Gris</label>
 <input type="radio" name="radSmall1" id="radSmall1"><label style="color:white;">Small</label>
 <input type="radio" name="radLarge1" id="radLarge1"><label style="color:white;">Large</label>
 <input type="radio" name="radBlanc2" id="radBlanc2"><label style="color:white;">Blanc</label>
 <input type="radio" name="radGris2" id="radGris2"><label style="color:white;">Gris</label>
 <input type="radio" name="radSmall2" id="radSmall2"><label style="color:white;">Small</label>
 <input type="radio" name="radLarge2" id="radLarge2"><label style="color:white;">Large</label>
 <input type="radio" name="radBlanc3" id="radBlanc3"><label style="color:white;">Blanc</label>
 <input type="radio" name="radGris3" id="radGris3"><label style="color:white;">Gris</label>
 <input type="radio" name="radSmall3" id="radSmall3"><label style="color:white;">Small</label>
 <input type="radio" name="radLarge3" id="radLarge3"><label style="color:white;">Large</label>
 <input type="radio" name="radBlanc4" id="radBlanc4"><label style="color:white;">Blanc</label>
 <input type="radio" name="radGris4" id="radGris4"><label style="color:white;">Gris</label>
 <input type="radio" name="radSmall4" id="radSmall4"><label style="color:white;">Small</label>
 <input type="radio" name="radLarge4" id="radLarge4"><label style="color:white;">Large</label>
    </div>
 <div id="divPrixQuantite">
 <label id="motQuantite1" style="color:white">Quantité: </label><input type="text" class="saisie" id="QuantiteArticle1" value="1" size="1"/>
 <label id="motPrix1" style="color:white">Prix:</label><input type="text" class="readOnly" id="PrixArticle1" size="6" value="50$" readonly="readonly"/>
 <label id="motQuantite2" style="color:white">Quantité: </label><input type="text" class="saisie" id="QuantiteArticle2" value="1" size="1"/>
 <label id="motPrix2" style="color:white">Prix:</label><input type="text" class="readOnly" id="PrixArticle1" size="6" value="40$" readonly="readonly"/>
 <label id="motQuantite3" style="color:white">Quantité: </label><input type="text" class="saisie" id="QuantiteArticle3" value="1" size="1"/>
 <label id="motPrix3" style="color:white">Prix:</label><input type="text" class="readOnly" id="PrixArticle3" size="6" value="60$" readonly="readonly"/>
 <label id="motQuantite4" style="color:white">Quantité: </label><input type="text" class="saisie" id="QuantiteArticle4" value="1" size="1"/>
 <label id="motPrix4" style="color:white">Prix:</label><input type="text" class="readOnly" id="PrixArticle4" size="6" value="70$" readonly="readonly"/>
 </div>
 <div id="btnAjouter">
 <a href=""><img src="images/bouton_ajouter.png" id="btnAjouter1" class="btnAjouter1"/></a>
 <a href=""><img src="images/bouton_ajouter.png" id="btnAjouter2" class="btnAjouter2"/></a>
 <a href=""><img src="images/bouton_ajouter.png" id="btnAjouter3" class="btnAjouter3"/></a>
 <a href=""><img src="images/bouton_ajouter.png" id="btnAjouter4" class="btnAjouter4"/></a>
 </div>
 <div id="footer">
 </div>
 </div>
 </body>
 </html>
 
 
 
Javascript:
 
window.onload = function() {
 
  document.getElementById("categorie1" ).onclick = afficherProduitDemande;
 
  document.getElementById("categorie2" ).onclick = afficherProduitDemande;
 
  document.getElementById("categorie3" ).onclick = afficherProduitDemande;
 
 
 gEleImgCategorie1 = document.getElementById("CategoriePetiteImage1" );
 gEleImgCategorie2 = document.getElementById("CategoriePetiteImage2" );
 gEleImgCategorie3 = document.getElementById("CategoriePetiteImage3" );
 gEleImgCategorie4 = document.getElementById("CategoriePetiteImage4" );
 
 
 
    gImgCategorieGrosse = document.getElementById("CategorieGrosseImage" )
 
 
 
 
 var eleImgCategorieGrosse = document.getElementById("CategorieGrosseImage" );
 
 
 gEleImgCategorie1.onmouseover = function() {
  gImgCategorieGrosse.src = gEleImgCategorie1.src
  extraireCategorieItem(gEleImgCategorie1.src);
 }
 
 gEleImgCategorie2.onmouseover = function() {
  gImgCategorieGrosse.src = gEleImgCategorie2.src
  extraireCategorieItem(gEleImgCategorie2.src);
 }
 
 gEleImgCategorie3.onmouseover = function() {
  gImgCategorieGrosse.src = gEleImgCategorie3.src
  extraireCategorieItem(gEleImgCategorie3.src);
 }
 
 gEleImgCategorie4.onmouseover = function() {
  gImgCategorieGrosse.src = gEleImgCategorie4.src
  extraireCategorieItem(gEleImgCategorie4.src);
 }
}
 
 
var gCategorie = "";
 
var gItem = "";
 
var gTabgiletChaud = ["1.png", "2.png", "3.png", "4.png"];
 
var gTabpantalon = ["1.png", "2.png", "3.png", "4.png"];
 
var gTabTShirt = ["1.png", "2.png", "3.png", "4.png"];
 
 
 
function afficherProduitDemande() {
 
 
 extraireCategorieItem(this.src)
 var gCheminVersImages = "images/"+gCategorie+"/";
 
 var item1 = "gTab"+gCategorie+"[0]";
 var item2 = "gTab"+gCategorie+"[1]";
 var item3 = "gTab"+gCategorie+"[2]";
 var item4 = "gTab"+gCategorie+"[3]";
 
 
 gImgCategorieGrosse.src = gCheminVersImages+eval(item1);
 
 
 
 
 gEleImgCategorie1.src = gCheminVersImages+ eval(item1);
 gEleImgCategorie2.src = gCheminVersImages+ eval(item2);
 gEleImgCategorie3.src = gCheminVersImages+ eval(item3);
 gEleImgCategorie4.src = gCheminVersImages+ eval(item4);
 
 
 
 
}
 
 
function extraireCategorieItem(pSource){
 
 
 var indiceAvantImage = pSource.indexOf("images/" );
 
 var restantChaine = pSource.substring(indiceAvantImage+10);
 
 var apresCategorie = restantChaine.indexOf("/" );
 
 gCategorie = restantChaine.substring(0,apresCategorie);
 
 
 var resteChaineApresgCategorie = restantChaine.substring(apresCategorie+1);
 
 var apresItem = resteChaineApresgCategorie.indexOf("." );
 
   
   
   gItem= resteChaineApresgCategorie.substring(0,apresItem);
   
   
   
}
 
 
ps: le code html fonctionne et je le met juste à titre de référence.

Reply

Marsh Posté le 27-07-2012 à 21:23:48   

Reply

Marsh Posté le 28-07-2012 à 18:51:26    

Tu voudrais pas nous faire un beau petit jsFiddle histoire de visualiser un peu mieux ?  
 
Merci d'avance

Reply

Marsh Posté le 29-07-2012 à 17:42:59    

et des retours chariots dans ta question :)


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
Reply

Marsh Posté le 01-08-2012 à 03:33:24    

est-ce possible de joindre quelques fichier a un message? Je vous donnerais mes fichier js css et html ainsi que les imges. Je ne sais pas comment procéder puisque je suis nouveau sur ce forum

Reply

Marsh Posté le 01-08-2012 à 10:47:21    

La déclaration des événements n'est pas correcte (ex : document.getElementById("categorie1" ).onclick = ...)
On fait comme ça normalement :

Code :
  1. if (window.attachEvent) {
  2.     document.getElementById("categorie1" ).attachEvent("onclick", afficherProduitDemande);       // IE
  3. } else {
  4.     document.getElementById("categorie1" ).addEventListener("click", afficherProduitDemande, false);    // FF
  5. }


 
Ca vient peut-être de là... Ton pb, il est sur tous les navigateurs ou que sur Firefox et sur IE, ça marche?


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 02-08-2012 à 22:50:28    

Je n'ai jamais vu ta facon de coder (puisqu'il y a plusieurs bonne façon de faire) mais quand je met un alert ca fonctionne, donc la déclaration des évènement est correcte. Je crois plutot que le probleme vient des string qui permettre d'aller chercher le nom et la catégorie des images. C'est pour cela que je voudrais savoir s'il est possible de joindre des fichier au message, car sans cela, personne ne peut vérifier si mes string sont bonnes

Reply

Marsh Posté le 03-08-2012 à 09:18:08    

Ben ma façon de coder, je l'ai pas inventée, ça vient du DOM-2 :
http://www.alsacreations.com/artic [...] cript.html
https://developer.mozilla.org/fr/DO [...] ntListener
http://www.ligams.com/Publications [...] ttachEvent
 
Ce que tu fais pour déclarer ta fonction sur onclick, ça va pas marcher sur tous les navigateurs, ma méthode, si. En plus, dans la mienne (enfin, la méthode DOM-2), tu maîtrise la propagation des événements, pas dans la tienne :/...
 
Mais par contre, ça ne veut effectivement pas dire que ton pb vient de là. J'attirais juste ton attention sur le fait que ton code passera pas partout et si tu cherches pourquoi, je t'ai donné la raison ;)
 
Pour poster du code JS/html/css : http://jsfiddle.net/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 05-08-2012 à 23:32:39    

Merci pour ton aide, mais je suis obligé d'utiliser ma facon de coder pour respecter les exigeance de mon enseignant. Je suis également obligé d'utiliser firefox comme navigateur et l'appelle de fonction est correcte. Je suis presque certain que le probleme vient de mes chaine de caractère car c'est la partie que je maitrise plus ou moins

Reply

Marsh Posté le 06-08-2012 à 14:02:25    

onclick sous FF n'est normalement pas le bon nom d'événement, c'est click :/
Une fois de plus, on voit à quel point les enseignants en informatique sont pas top concernant le dév...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 06-08-2012 à 14:37:57    

Ton enseignant est une merde c'est tout.


---------------
Blablaté par Harko
Reply

Marsh Posté le 06-08-2012 à 14:37:57   

Reply

Marsh Posté le 06-08-2012 à 21:23:20    

peut-etre, mais je suis obligé de le faire de cette facon la malheureusement

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed