Bonjour à tous,
J'ai récemment utilisé le tutorial album photo en javascript.
Mon objectif était que quand on click sur un image qu'elle apparaisse en gros mais qu'un texte sur le coté apparaisse en meme temps.
Ma solution a été de créer un calque et de faire apparaitre le texte a l'interieur pour avoir une liberté de placement.
Mais voila quand je fais la simulation sur mon ordi cela fonctionne mais une fois que je mets online le texte ne s'affiche pas. Enfin le calque en tout cas n'apparait pas.
Je suis un débutant dans le domaine et j'ai donc fait comme je pouvais, voici le code dans la page principale :
Et voici le code dans le fichier script .js :
Merci encore pour votre aide[/i]
J'ai récemment utilisé le tutorial album photo en javascript.
Mon objectif était que quand on click sur un image qu'elle apparaisse en gros mais qu'un texte sur le coté apparaisse en meme temps.
Ma solution a été de créer un calque et de faire apparaitre le texte a l'interieur pour avoir une liberté de placement.
Mais voila quand je fais la simulation sur mon ordi cela fonctionne mais une fois que je mets online le texte ne s'affiche pas. Enfin le calque en tout cas n'apparait pas.
Je suis un débutant dans le domaine et j'ai donc fait comme je pouvais, voici le code dans la page principale :
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 450px; top: 61px; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;">
<dl id="photo">
<dt> </dt>
</dl>
</div>
Et voici le code dans le fichier script .js :
// JavaScript Document
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens[i].onclick = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.alt = this.title; // On change son titre
titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
Merci encore pour votre aide[/i]