Javascript : passer un texte dans une div

Résolu/Fermé
JF11 Messages postés 36 Date d'inscription mercredi 17 décembre 2008 Statut Membre Dernière intervention 9 novembre 2019 - 17 déc. 2008 à 13:54
JF11 Messages postés 36 Date d'inscription mercredi 17 décembre 2008 Statut Membre Dernière intervention 9 novembre 2019 - 17 déc. 2008 à 18:14
Bonjour,
J'ai un script en Javascript (qui n'est pas de moi) qui me permet d'afficher pleine page une photo après avoir cliqué sur la vignette de cette photo. Ce script fonctionne sans pb.
Je que je souhaite, c'est modifier ce script de façon a faire apparaitre une légende à cette photo.
Je n'ai que qq notions élémentaires de javascript et là, je cale un peu.

Le principe :
script javascript :
function afficherImage(aparent) {
var fond = document.getElementById('fond');
var chargement = document.getElementById('chargement');
var affichage = document.getElementById('affichage');
var image = document.getElementById('image');
//var hauteur, largeur;
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;

}

et dans la partie <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="commentaire">MON TEXTE LEGENDE</div>
</div>

L'appel à la fonction se fait à partir du lien de la vignette :
<a href="01.jpg" class="apercu" onClick="afficherImage(this); return false;">...<a/>


Ce que je comprends :
L'image 01.jpg est envoyée à la fonction afficherImage qui affecte à "image" cet image 01.jpg.
Dans la div, l'image s'affiche par le code <img id="image" />

Ce que je cherche à faire :
dans la fonction afficherImage, c'est attribuer à... (une variable?) un texte (par exemple "MON TEXTE LEGENDE") et que celui ci s'affiche dans la div : <div id="commentaire">MON TEXTE LEGENDE</div> (un peu comme ca se passe avec l'image)

L'objectif final est de rendre dynamique le texte avec du PHP...(mais ca c'est bon :-))

Si qq'un peut me mettre sur la voie ou me dire si ma démarche est bonne, ce serait tres sympa.
Merci
JF

3 réponses

Hello,

tu peux essayé de rajouter ceci, juste dessous la ligne "image.src= aparent.href; " :

var commentaire = document.getElementById('commentaire');
commentaire.innerText = monText


et tu change ta méthode pour :

function afficherImage(aparent, monText)


pour appeler la méthode :

<a href="01.jpg" class="apercu" onClick="afficherImage(this,'mon commentaire'); return false;">...<a/>


si ton dive commentaire s'affiche correctement avec le texte que tu as mis (MON TEXTE LEGENDE), le code ci-dessus devrait t'aider...
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
17 déc. 2008 à 16:00
Bonjour,

<script language="javascript"> 
function afficherImage(aparent,id_ecrire,texte) {
var fond = document.getElementById('fond');
var chargement = document.getElementById('chargement');
var affichage = document.getElementById('affichage');
var image = document.getElementById('image');
//var hauteur, largeur;
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;

//partie affichage du commentaire attention je t'ai rajouté deux arguments a la fonction
var commentaire=document.getElementById(id_ecrire);
	commentaire.innerHTML=texte;
}

</script>
 <body/>
<?php
$texte="Photo de New York"; // la tu pourra faire du dynamique ensuite
?>
<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="commentaire">MON TEXTE LEGENDE</div>
</div>

L'appel à la fonction se fait à partir du lien de la vignette :
<a href="01.jpg" class="apercu" onClick="afficherImage(this,'commentaire','<?php echo $texte; ?>'); return false;">...<a/>




Nota: le fichier doit être en .php bien sur !
JF11 Messages postés 36 Date d'inscription mercredi 17 décembre 2008 Statut Membre Dernière intervention 9 novembre 2019 2
17 déc. 2008 à 18:14
Merci à Sims et à Alain_42.
C'est exactement ce que j'essayais de faire.
Il me manquait des connaissances au niveau du innerHTML
Merci encore
JF