Javascript : pb avec un script conditionnel

Résolu/Fermé
JF11 Messages postés 36 Date d'inscription mercredi 17 décembre 2008 Statut Membre Dernière intervention 9 novembre 2019 - 18 déc. 2008 à 10:42
JF11 Messages postés 36 Date d'inscription mercredi 17 décembre 2008 Statut Membre Dernière intervention 9 novembre 2019 - 18 déc. 2008 à 13:25
Bonjour,
Suite à un précédent post résolu,("Javascript : passer un texte dans une div"), j'essaie (sans beaucoup de connaissances en Javascript) à modifier un script pour le personnaliser.

Le principe : un lien hypertexte fait appel à une fonction qui fait apparaitre 1 image dans une div.

le lien hypertexte :
<a href="01.jpg" class="apercu" onClick="afficherImage(this,'commentaire','<?php echo $texte; ?>','logo','1'); return false;">

la fonction :
var largeur, hauteur;

function afficherImage(aparent,id_ecrire,texte,id_logo) {
var fond = document.getElementById('fond');
var chargement = document.getElementById('chargement');
var affichage = document.getElementById('affichage');
var image = document.getElementById('image');
var scrollH, scrollG;
// Recherche de la hauteur et la largeur totale de la page
largeur = document.body.scrollWidth;
hauteur = document.body.scrollHeight;
if (document.body.offsetHeight)
if (document.body.offsetHeight > hauteur) hauteur = document.body.offsetHeight;
// Affichage du fond
fond.style.top = 0;
fond.style.left = 0;
fond.style.height = hauteur;
fond.style.width = largeur;
// Taille de la fenêtre
if (window.innerHeight) {
largeur = window.innerWidth;
hauteur = window.innerHeight;
} else {
largeur = document.body.offsetWidth;
hauteur = document.body.offsetHeight;
}
// Position dans la page
if (window.pageYOffset) {
scrollH = window.pageYOffset;
scrollG = window.pageXOffset;
} else {
scrollH = document.body.scrollTop;
scrollG = document.body.scrollLeft;
}
// Affichage de l'animation pour le chargement
chargement.style.left = scrollH + (largeur - chargement.width) / 2
chargement.style.top = scrollG + (hauteur - chargement.height) / 2
chargement.style.display = 'block';
fond.style.display = 'block';
// chargement de l'image
img = new Image();
img.onload=function() {
var imgl = img.width;
var imgh = img.height;
if (imgl + 60 > largeur) {
imgl = largeur - 60;
imgh = img.height * imgl / img.width;
}
if (imgh + 60 > hauteur) {
imgh = hauteur - 60;
imgl = img.width * imgh / img.height;
}
affichage.style.top = scrollH + (hauteur - imgh - 120) / 2;
affichage.style.left = scrollG + (largeur - imgl - 20) / 2;
affichage.style.width = imgl + 20 + 'px';
affichage.style.height = imgh + 120 + 'px';
image.src= aparent.href;
image.width = imgl;
image.height = imgh;
affichage.style.display = 'block';
chargement.style.display = 'none';
return false;
}
img.src= aparent.href;

var commentaire=document.getElementById(id_ecrire);
commentaire.innerHTML=texte;

// ce que j'ai ajouté :

if (id_logo=='1') {
toto.src='logo.jpg';
}
if (id_logo=='0') {
toto.src='no_logo.jpg';
}

}

et dans le body :
<div id="fond">
<a href="#" onClick="cacherImage(); return false;"><img id="chargement" src="../img/chargement.gif" width="37" height="37" alt="Chargement..." /></a>
</div>
<div id="affichage">
<a href="#" onClick="cacherImage(); return false;"><img id="image" /></a>
<div id="logo"><img id="toto"</div>
<div id="commentaire">aa<id="texte"/></div>
</div>

L'objectif est d'afficher 2 images (image et logo.jpg), logo.jpg ne devant s'afficher que si id_logo=1.

Ce que j'ai fait :
J'ai ajouté à la fonction 1 argument "id_logo" qui prend comme valeur 1 ou 0
J'ai ajouté dans le script :
if (id_logo=='1') {
toto.src='logo.jpg';
}
if (id_logo=='0') {
toto.src='no_logo.jpg';
}

(où no_logo.jpg est une image blanche)

Ce que j'obtiens:
que id_logo soit à 1 ou à 0, l'image logo.jpg s'affiche.

Est ce que mon bout de script conditionnel est bon ou il me manque un truc ?

Merci pour votre aide.
JF

3 réponses

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
18 déc. 2008 à 11:41
Salut, c'est encore moi

tu as une anomalie

dans ta fonction tu as 4 arguments
function afficherImage(aparent,id_ecrire,texte,id_logo)

et qd tu l'appelle tu en mets 5 :
afficherImage(this,'commentaire','<?php echo $texte; ?>','logo','1')

donc rajoutes un argument a ta fonction par exemple "aff_logo"

comme ça:

function afficherImage(aparent,id_ecrire,texte,id_logo,aff_logo)


tu ne changes pas ton appel et tu testes sur aff_logo
et ton principe pour l'afficher n'est pas bon non plus

if (aff_logo == "1") {
	var le_logo="<img src='logo.jpg' width='50' height='100'>";//tu peux modifier le stailles bien sur
}else if (aff_logo == "0") {
	var le_logo="<img src='no_logo.jpg' width='50' height='100'>";
}
var logo=document.getElementById(id_logo);
logo.innerHTML=le_logo;
}


@lain
JF11 Messages postés 36 Date d'inscription mercredi 17 décembre 2008 Statut Membre Dernière intervention 9 novembre 2019 2
18 déc. 2008 à 12:41
Merci encore Alain pour ton aide !
Pour l'argument qui manquait, j'avais corrigé de moi-meme par contre pour le bout de script, j'en étais loin...
Dès que j'ai 1 mn, j'essaie de vraiment me plonger dans le javascript pour avancer définitivement de ce coté.
merci encore
JF
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
18 déc. 2008 à 13:10
RE,

en Javascript pour atteindre un objet d'une page HTML

deux methodes:

- par le nom document.nom_formulaire.nom_element

- par leur id document.getElementById('id_a_atteindre')c'est celle que je préfère

et ensuite leurs propriétés ou methodes (value etc..)

si c'est un input type="text" par ex pour y écrire tu mets par .value=

si c'est un <div pour y ecrire tu fais par innerHTML=


vas voir le site toutjavascript.com (de mémoire ?)
0
JF11 Messages postés 36 Date d'inscription mercredi 17 décembre 2008 Statut Membre Dernière intervention 9 novembre 2019 2
18 déc. 2008 à 13:25
Il est vrai que j'ai essayé de franchir les étapes !
là, j'avais cette demande un peu urgente et je n'ai jamais (a tord) pris le temps d'apprendre le javascript.
mais il faut vraiment que je m'y accroche...
JF