Besoin d'aide pour trouver un erreur

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Besoin d'aide pour trouver un erreur

pokerloict

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.

Publicité

qfla

Tu voudrais pas nous faire un beau petit jsFiddle histoire de visualiser un peu mieux ?

Merci d'avance

pop-pan

yay!

et des retours chariots dans ta question

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

pokerloict

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

rufo

Pas me confondre avec Lycos!

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

Code :

if (window.attachEvent) {
    document.getElementById("categorie1" ).attachEvent("onclick", afficherProduitDemande);       // IE
} else {
    document.getElementById("categorie1" ).addEventListener("click", afficherProduitDemande, false);    // FF
}

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

pokerloict

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

rufo

Pas me confondre avec Lycos!

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/

pokerloict

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

rufo

Pas me confondre avec Lycos!

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...

gatsu35

Blablaté par Harko

Ton enseignant est une merde c'est tout.

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

Publicité

pokerloict

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

FORUM HardWare.fr

Programmation

HTML/CSS

Besoin d'aide pour trouver un erreur

Sujets relatifs
pleasa aide :IE ne reconnait pas la css position	Beaucoup d'erreur 404
[JavaScript]Besoin d'aide sur ce script	[RESOLU] Erreur fonction de rappel qui ne s'execute pas
[VB.NET] Récupérer Form Active [Résolu]	Aide HTML / CSS
Par défaut Erreur dans ma création de base	aide script .vbs "copier coller"
[PHP] - Aide sur codes PHP pour Club de Plongée ;)
Plus de sujets relatifs à : Besoin d'aide pour trouver un erreur

Page générée en 0.040 secondes