11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Afficher par un clic une image sur la même page

Bonjour,
Je n'y connais pas grand chose et je ne vais sans doute pas bien m'exprimer.
Je vous explique mon problème... je cherche un script qui permette, en cliquant sur un "mot" ou un autre d'une petite liste de faire apparaître la photo correspondante, dans une Div sur la même page, toujours au même endroit.

En répétant ce choix de mot et ce même fonctionnement une autre fois, plus bas, dans la page, cela permettrait de comparer des photos.

Cela existe-t-il?
Merci.

upload/18105-comparateu.jpg

(il s'agit de comparer des libellules!)
Modifié par tioneb (19 Sep 2012 - 16:46)
Bonjour,


J'ai un script qui devrait marcher pour ce que tu veux faire :

	function afficherImage( id)
				{
					var divImage = document.getElementById('affichageImage');
					
					if (divImage.hasChildNodes()){
						divImage.removeChild(node);
					}
					
					var hrefImg = id +".jpg";
					node = document.createElement('img');
					node.id = id + "Image";
					node.src = hrefImg;
					node.alt = id;

					divImage.appendChild(node);
				}


Avec ce code Html :

<ul>
	<li><a href="#" id="**Mettre le nom de la photo sans l'extension***" onclick="afficherImage(this.id)">Gris du Gabon</a></li>
	<li><a href="#" id="**Mettre le nom de la photo sans l'extension***" onclick="afficherImage(this.id)">Aura</a></li>
		
</ul>
		<div id='affichageImage'></div>

Modifié par Mrezechiel (19 Sep 2012 - 17:46)
Merci, c'et très gentil, je vais faire des essais et sans doute te poser des questions...
Il fonctionne quelque part sur un site ?
Bonjour,

Super !

Pour le soulignement je te conseille le le site du zéro et son tutoriel sur javascript, ce n'est pas très compliqué.

Le site du zéro

Ensuite pour le préchargements je ne connais pas vraiment désolé.

Demande si tu as besoin d'aide.
Bonjour,

que veux-tu exactement pour le préchargement des images ? Qu'elle soit déjà chargé avant qu'on l'affiche (mais du coup ta page sera plus longue à afficher) ou afficher une sorte de barre de chargement le tps que l'image se charge avant de s'afficher ?
C'était une mauvaise idée, en fait le préchargement n'est pas nécessaire car mes images sont peu lourdes autour de 70 ko.
Merci.

Par contre je ne parviens pas à voir comment je pourrais souligner le nom de l'espèce qui s'affiche à droite... Si quelqu'un peut m'aider ?
Je pense que c'est une mauvaise idée de souligner le nom de l'espèce, car ça va rendre le script très compliqué. Il faudrait sélectionner tous les liens, leur enlever le soulignement si il existe, puis sélectionner le bon lien et lui ajouter le soulignement.

Le plus simple serait de prévoir une div a coté (ou par dessus l'image). L'appeler par exemple "afficherTitre1" et une autre avec "afficherTitre2" et d'utiliser le même principe que pour l'image.

et au onclick faire : 
document.getElementById('afficherTitre1').innerHTML = 'Titre voulu';


ou 
document.getElementById('afficherTitre2').innerHTML = 'Titre voulu';

pour la 2eme image.
Je te remercie. Je vais essayer de faire ce que tu proposes, mais je pense bien que je n'y arriverais pas! Je ne vois pas comment faire... je n'y connais vraiment rien...
Je me demande finalement si le plus simple ne serait pas de reprendre les photos pour écrire dessus...
Ça peut être une bonne idée ^^

En plus si tes images sortent de leur contexte, et se retrouve sur google image par exemple, le nom de la libellule serait dessus.

Et si c'est plus simple a gérer pour toi par la suite, le mieux est de faire comme ça.
Merci à tous les 2.
J'en reste là sur le plan technique, ce que j'ai réussi à faire me convient tout à fait. Smiley ravi
A la prochaine!
Bonjour,

Bon j'avais du temps libre et du coup je t'ai ajouté le soulignement !

Don voila le script a ajouter :

function enleverSurlignage(element){
			if (element){
				if (element.nextSibling ){
					if(element.nodeName != 'UL'){ //ul d'origine donc on ne cherche pas ses freres
						var elementAPasser = element.nextSibling;
						enleverSurlignage(elementAPasser);
					}
				}	
				if (element.hasChildNodes()){
					var elementAPasser = element.childNodes[0];
					if(elementAPasser.nodeName == 'A'){
						elementAPasser.style.textDecoration = "none";
					}
					enleverSurlignage(elementAPasser);
				}
			}
		}


et tu rajoutes cette ligne dans la fonction afficherImage + le soulignement
function afficherImage( element)
				{
					
					enleverSurlignage (element.parentNode.parentNode); //envoie balise ul
					
					var lien = element;
					var id = lien.id;
					var divImage = document.getElementById('affichageImage');
					
					if (divImage.hasChildNodes()){
						divImage.removeChild(node);
					}
					
					//creation node
					var hrefImg = id +".jpg";
					node = document.createElement('img');
					node.id = id + "Image";
					node.src = hrefImg;
					node.alt = id;
					
					lien.style.textDecoration = 'underline';

					divImage.appendChild(node);
				}


Et voila !
Modifié par Mrezechiel (27 Sep 2012 - 18:20)
Waouh, c'est très gentil de m'avoir fait ça!
Je viens de faire un essai 'intégration mais ... comme je n'y connais rien ça ne marche pas.
Je m'y remets demain... si je n'y arrive pas je te fais signe ce week-end car ça peut me prendre du temps!

Très sympa en tout cas!
J'ai fait des essais et j'ai passé la main à mon fils... qui a du mal aussi, voilà ce qu'il m'écrit:

"J’ai tenté d’ajouter les lignes :

enleverSurlignage (element.parentNode.parentNode); //envoie balise ul

var lien = element;
var id = lien.id;

dans la fonction « afficherImage »

et j’ai ajouté toute la fonction enleverSurlignage de la même manière que j’avais mis les fonctions afficherImage.

Mais au moment de cliquer sur l’image, ma barre d’outil WebDevelopper m’indique « Erreur : ReferenceError: element is not defined »
Je vois bien que le terme « element » est dans les lignes ajoutées dans la fonction enleverSurlignage , mais je ne parviens pas à trouver la raison de l’erreur."

Si tu as du temps, encore...
Merci.
Bonjour,


Alors l'erreur venait de moi j'ai oublié quelques précisions.
Du coup je suis allé voir ton code et j'ai fait un peu plus simple.


voila pour ta balise script :

<script language="javascript" type="text/javascript">
		function enleverSurlignage(element){
			if (element){
				if (element.nextSibling ){
					if(element.nodeName != 'UL'){ //ul d'origine donc on ne cherche pas ses freres
						var elementAPasser = element.nextSibling;
						enleverSurlignage(elementAPasser);
					}
				}	
				if (element.hasChildNodes()){
					var elementAPasser = element.childNodes[0];
					if(elementAPasser.nodeName == 'A'){
						elementAPasser.style.textDecoration = "none";
					}
					enleverSurlignage(elementAPasser);
				}
			}
		}
		
		function afficherImage( element, divAffichage)
				{
					
					enleverSurlignage (element.parentNode.parentNode); //envoie balise ul
					
					var lien = element;
					var id = lien.id;
					var divImage = document.getElementById(divAffichage);
					
					if (divImage.hasChildNodes()){
						divImage.removeChild(divImage.firstChild);
					}
					
					//creation node
					var hrefImg = id +".jpg";
					var node = document.createElement('img');
					node.id = id + "Image";
					node.src = hrefImg;
					node.alt = id;
					
					lien.style.textDecoration = 'underline';

					divImage.appendChild(node);
				}
</script>



Et ensuite je te montre le html a partir de ton site :

<div id="texte1"><ul>
  <li><a href="#" id="argia-adamsi-comparaison" onClick="afficherImage(this, affichageImage)"><font color="#999999">Argia adamsi</font></a></li>    
    <li><a href="#" id="argia-cupraurea-comparaison" onClick="afficherImage(this, affichageImage)"><font color="#999999">Argia cupraurea</font></a></li>
    <li><a href="#" id="argia-extranea-comparaison" onClick="afficherImage(this, affichageImage)"><font color="#999999">Argia extranea</font></a></li>


Si tu veux afficher dans la div affichageImage2, il te suffi de faire :
  <li><a href="#" id="argia-extranea-comparaison" onClick="afficherImage(this, affichageImage2)"><font color="#999999">Argia extranea</font></a></li>


Et là ça devrait être bon Smiley biggrin
Modifié par Mrezechiel (02 Oct 2012 - 12:01)
Bon j'ai pas mal essayé mais cela devient trop complexe pour moi.
J'ai fait pas mal d'essais mais je suis un peu à l'aveugle... et je n'y arrive pas.
Merci de tes efforts.
Cordialement,
Benoît.
Sujet clos
Aller à