11550 sujets

JavaScript, DOM et API Web HTML5

Changer un texte en cliquant sur une image

Bonjour et merci pour vôtre mégasite et vos tutoriaux.

J'aurais souhaiter faire changer le contenu d'un <div> (titre + texte) sans php, selon un clic sur une photo ?

J'ai bien essayé de batailler avec la technique du tuto sur l'album photo... mais je cale... Smiley biggol

quelqu'un pourrait il SVP me donner la prochaine marche à suivre... Smiley ohwell

Merci !!!
Modifié par chooky (17 May 2005 - 20:01)
Tiens... et si je me répondais à moi même Smiley smile

Ca marche avec le onmouseover, it's working good, mais ça ne marche pas du tout avec le onclick!!! Smiley fache pourrais avoir un coup de main SVP? Smiley lol
Modifié par chooky (17 May 2005 - 20:02)
J'ai exactment le même problème. J'ai essayé de modifier les script pour que le texte qui soit affiché soit le texte contenu dans le alt de la maniature.
Mais vu mes connaissances très limitées en JS, ca ne marche pas

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') ;
        var descri = document.getElementById('galerie_mini').getElementsByTagName('img').alt ;
	// 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

        var teste= document.getElementById('description') ; //MODIF
	// 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
			teste.firstChild.nodeValue = document.getElementById('galerie_mini').getElementsByTagName('img')[i-1].alt ;//MODIF
                        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


Ce qui se passe c'est que lors de l'appel du "getElementsByTagName('img')[i-1]", le i vaut 10 puisque le for a été fini(je pensais que le i allait etre associé au i du lien mais non).
Peut-être que tu t'y connais plus en JS et que ca pourrat t'aider(et m'aider Smiley lol )
...Euh je ne sais pas pourquoi ce texte est en italique :il y a aucune balise pourtant[/i]
Ca y est j'ai trouvé la solution(tu me diras si ca te convient):

La description est dans le alt de la miniature(ce qui est logique vu que si une personne n'a pas l'image elle aura sa decription)
Voilà le code qui marche:
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

        var descri= document.getElementById('description') ; 

	//on récupere l'élément qui a pour id description, c'est à dire le futur "lieu" de description de l'image
	// 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].numero=i;		//on associe l'index du lien à ce lien(car sinon il ne se "souvient" pas de l'index i)
liens[i].onclick =  function() {AffDesc(this.numero); //on appelle la fonction de description
return false;};       //on inhibe l'action de lien(ouvrir l'image en full screen)
	}


function AffDesc(ide) {
	descri.firstChild.nodeValue = document.getElementById('galerie_mini').getElementsByTagName('img')[ide].alt ;   //on remplace le texte de description par le alt de l'image qui est en fait la description
	big_photo.src = liens[ide].href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
	big_photo.alt = liens[ide].title; // On change son titre
	titre_photo.firstChild.nodeValue = liens[ide].title; // On change le texte de titre de la photo
}



}


window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page


Enjoy Smiley biggrin
PS: les " Smiley ide " ses ont transformé en" ide " dans la visualisation du code.Je sais pas pourquoi
ou la il gere super mal les crochet le forum no? tous les liens "crochet"i"crochet" sont interprétés comme une mise en italique et disparaissent donc du script. donc mes "liens." sont en fait des "liens"crochet"i"crochet"."
[/i][/i]
Modifié par KOre_TecHS (29 May 2005 - 11:46)
Sujet clos
Aller à