j'ai un petit souci, et j'ai beau retourner dans tous les sens la questions je ne parviens pas à y arriver...
Voilà je dois fair eun panier d'achat avec les cookies et tout sa ... mais avant toute chose j'ai un mouseover sur des articles pour que ce dernier apparaisse en grand ( imgCategorieGrosse.src = srcPetite;)
Mais le problème est que j'aimerai faire correspondre un prix avec cet article qui apparait en gros, et chaque article aurait son prix qui lui est propre...
Je ne sais pas si je suis clair, en tout cas voici mon code !
Merci pour votre aide =D
code :
// JavaScript Document
var tabImgAlbums = ["album1.jpg","album2.jpg"];
var tabImgTshirts = ["tshirt1.jpg","tshirt2.jpg"];
var tabPrixAlbums = [12.95,12];
var tabPrixTshirts = [12.95,12];
var gNbItemDansPanier =0;
var gItem = "";
var gCategorie = "";
var gQuantité ="" ;
var gPrix="";
var gPanierAchats = "";
window.onload = function()
{
eleBody = document.body;
afficherItem("Albums", "albums/album1.jpg");
categorieAlbums.onclick = function()
{
afficherItem("Albums", this.src);
afficherPrix("Albums");
}
categorieTshirts.onclick = function()
{
afficherItem("Tshirts", this.src);
afficherPrix("Tshirts");
}
montrerEnGros(this.src);
// onclick sur la grande image ajoute cette image
imgCategorieGrosse.onclick = function()
{
ajouterAuPanier(this, parseInt(nbrArticle.value));
}
}
//Ajout des images dans la divImages existante dans la page
function afficherItem(categorie, srcImage)
{
// Changer le texte de la span dont le id est categorieTexte pour afficher la categorie dans la colonne droite au dessus des petites images
//categorieTexte.innerHTML = categorie;
// variable pour indiquer le chemin des images
var cheminVersImages = "images/"+categorie+"/";
// Supprimer les images contenues dans la div nommée inCategoriePetites
effacerEnfants(imgInCategoriePetite);
// La premiére image de cette catégorie est affichée en gros dans la colonne de droite
imgCategorieGrosse.src = cheminVersImages + eval( "tabImg" + categorie)[0];
//+ ajouterNoeudDeTexte(eval("tabPrix"+ categorie)[i], imgInCategoriePetite)
// Constituer en utilisant eval le nom de la variable tableau associé à cette catégorie et determiner le nombre d'item dans la catégorie
var nbrItemsDansCategorie = eval("tabImg" + categorie).length;
// Pour ajouter dans la colonne droite toutes les petites images
for (var i=0; i < nbrItemsDansCategorie ; i++)
{
//Pour bien associer les paramétres avec la fonction de la LibrairieDHTML_v2.js :
//ajouterImage(idImage, srcImage, altImage, classImage, evenement, action, eleParent)
// En utilisant eval pour constituer le nom de la variable tableau associé à cette catégorie
ajouterImage("imgCategorie" + i,cheminVersImages + eval( "tabImg" + categorie )[i], eval( "tabImg" + categorie) [i], "imgInCategoriePetite","onmouseover","montrerEnGros(this.src)",imgInCategoriePetite);
}
}
function montrerEnGros(srcPetite)
{
imgCategorieGrosse.src = srcPetite;
}
function extraireCategorieEtItem(pSource)
{
var indiceImagesSlash = pSource.indexOf("images/");
var restantChaine = pSource.substring(indiceImagesSlash+7);
var indiceAutreSlash = restantChaine.indexOf("/");
gCategorie = restantChaine.substr(0,indiceAutreSlash);
var longueurCategorie = gCategorie.length;
var restantApresCategorie = restantChaine.substring(indiceAutreSlash+1);
var indicePoint = restantApresCategorie.indexOf(".");
gItem = restantApresCategorie.substring(0,indicePoint);
}
function extraireQuantite(pSource)
{
var indiceQuantite = pSource.indexOf(gItem +"/");
gQuantite = indiceQuantite.substr(0);
}
function extrairePrix(pSource)
{
var indicePrix = pSource.indexOf(gQuantite +"/");
gPrix = indicePrix.substr(0);
}
function ajouterAuPanier(pImage, gQuantité)
{
var srcImage = pImage.src;
alert(srcImage);
extraireCategorieEtItem(srcImage);
gPanierAchats += "-"+gCategorie+"/"+gItem + "/" + gQuantité + "/" + gPrix;
imgPanierAchats.style.visibility = "visible";
gNbItemDansPanier++;
if (gNbItemDansPanier == 1)
{
nbItemsDansPanier.innerHTML = " 1 item."
}
else
{
nbItemsDansPanier.innerHTML = gNbItemDansPanier + " items."
}
enregistrerPanier();
alert(gPanierAchats);
alert(gNbItemDansPanier);
}
function enregistrerPanier()
{
// test pour voir si le navigateur permet les cookies
if (navigator.cookieEnabled)
{
ecrireCookie("cookiePanierAchats", gPanierAchats, 7);
}
else
{
alert("Cette application ne fonctionnera pas si vous ne permettez pas d'avoir des cookies.")
}
}
1. Conseil: NE PAS UTILISER DE CARACTERES SPECIAUX DANS LE CODE !
2. met stp le code dans
et </code >
et le code pour le mouseover sur un article est:
<code type="javascript">
function AffEnGrand(articleN, toW, toH){
document.getElementById(articleN).style.width = toW; // la largeur devient la valeur de toW
document.getElementById(articleN).style.height = toH; // la largeur devient la valeur de toW
}
Il existe des plugins de panier prêt à utiliser en js comme simplecart.
Si tu veux faire le tien de manière à vraiment maitriser tous les aspects voici un tuto sur le sujet (avec jQuery) http://buzut.fr/2015/02/21/realiser-un-panier-en-javascript/
