11548 sujets

JavaScript, DOM et API Web HTML5

Salut,
j'ai réaliser un album photo en javascript et je voudrais l'améliorer en mettant une légende de la photo affichée en grand. Mais je n'ai pas encore réussi à afficher du texte...

J'ai une ligne de miniature qui s'affiche avec le code là :
<!--petites images-->
<img src="URLpetiteimg1" onclick="image('URLgrosseimg1')" width="100">
<img src="URLpetiteimg2" onclick="image('URLgrosseimg2')" width="100">
...


Mon script qui permet d'afficher l'image en grand :
<script>
var Bigimg
var dest
function image(dest){
Bigimg=document.getElementById("Bigimg");
Bigimg.src=dest
}
</script>

<!--Grande image-->
<img src="noimg.gif" id="Bigimg">


Comment faire pour afficher une légende différente à côté de l'image en grand ?

Merci de votre aide !
Modifié par telecofr (21 Sep 2007 - 21:39)
Je pencherais pour une solution de type :

<div id="contimage">
    <div id="grandeimage">
         <img id="Bigimage">
    </div>
    <div id="legende">
    </div>
</div>

Pour ce qui est du HTML,

#grandimage{
   float:left;}
#legende{
   float:none;}

Pour ce qui est du CSS
Enfin un renseignement de la légende en JavaScript du style :

document.getElementById('legende').innerHTML="Le texte de ta légende";


Ceci devant te donner ton texte de légende sur la droite de ta grande image.

Attention, les codes que je t'ai donnés ne sont pas exhaustifs. Tu devras certainement renseigner d'autres propriétés genre largeur, hauteur et marges.
Modifié par aCOSwt (21 Sep 2007 - 09:35)