11548 sujets

JavaScript, DOM et API Web HTML5

Comment changer le contenu d'un attribut personnalisé en javascript

Bonjour, question de débutant en javascript

J'utilise le script Zoomer sous MooTools. Et j'aimerais l'utiliser dans une galerie.

<img src="normaleImage.jpg" id="idImage" big="grandeImage.jpg"/>

Pour changer l'image normale, j'utilise un document.getElementById('id').src dans une fonction. Mais comment faire pour changer l'attribut big de la balise <img> pour renseigner l'adresse de la grande image?

Est-il possible de re-écrire toute la balise img avec un innerHTML? Ou d'envoyer une variable à un attribut personnalisé ( big en l'occurrence) ?

Merci!
HNAL
Hello,

En parcourant la doc de ce plugin, l'opération est simplement celle-ci :
new Zoomer('idImage');
Le plugin s'occupe de tout, il te suffit juste de renseigner l'image "normale" dans src et la grosse dans big.
Merci pour la réponse.

Mon problème vient exactement de là, comment renseigner l'adresse de la grande image.

Mes images proviennent d'un article d'un magasin en ligne, ( j'utilise Thélia + Spip ). Le code qui affiche l'image + zoom et les vignettes se présente sous cette forme, avec le javascript qui marche pas :


<script type="text/javascript">

	window.addEvent('load', function(){
		new Zoomer('zoom');
	});
			
			
			
	function changeimage(ref)
	{
	document.getElementById('zoom').src = ref;
	document.getElementById('zoom').big = ref;
	}

</script>






<div class="imgzoom">
<THELIA_artimage type="IMAGE" produit="THELIA-ID" nb="1" largeur="300">
<img src="THELIA-IMAGE" id="zoom" big="THELIA-FICHIER" width="300" height="300" /> 
</THELIA_artimage>
</div>

<THELIA_imgart1 type="IMAGE" produit="THELIA-ID" largeur="20">
<a onclick="changeimage('THELIA-FICHIER')"><img class="prodvignette" src="THELIA-IMAGE"/></a>
</THELIA_imgart1>


Au chargement de la page, la boucle THELIA_artimage fait bien son travail et le résultat dans la source ce sont les bonnes adresses pour src et big.

La boucle THELIA_imgart1 m'affiche toutes les vignettes du produit en 20x20. Quand je clique sur l'une des vignettes, javascript charge bien l'image correspondante dans le src de la balise img à l'id zoom. Mais ne fait pas la mise-à-jour de l'attribut big. Car on ne peut pas apparemment renseigner des attributs inconnus en javascript.

C'est pourquoi je cherche à re-écrire toute la balise img plutôt qu'à modifier son attribut. Mais en utilisant document.getElementById('zoom').innerHTML je n'ai aucun résultat. Ou de trouver une solution pour renseigner quand même l'attribut big.

J'ai essayé pleins de trucs avec setAttribute ou getAttribute mais je n'arrive à rien!

Smiley bawling
Je viens de faire quelques nouveaux tests.

Avec ce code pour changer l'image, j'arrive à inscrire la bonne adresse dans l'attribut src et big ( vérifié avec alert ) mais l'image zoom ne se rafraichit pas. Est-ce du à la manière dont la fonction du Zoomer est chargée? Est-ce possible de le rafraichir?


<script type="text/javascript">
	window.addEvent('load', function(){
		new Zoomer('zoom');
	});		
	function changepics(ref)
	{
	document.getElementById('zoom').src = ref;
	document.getElementById("zoom").setAttribute("big",ref)
	alert(document.getElementById("zoom").getAttribute("big"))
	}
</script>
Sujet clos
Aller à