Histoire d'images ...

Signaler
Messages postés
77
Date d'inscription
mardi 17 novembre 2009
Statut
Membre
Dernière intervention
18 août 2015
-
phoenixgreg
Messages postés
77
Date d'inscription
mardi 17 novembre 2009
Statut
Membre
Dernière intervention
18 août 2015
-
Bonjour all,

bien je me prend la tête pour savoir comment faire la chose suivante :

J'ai plusieurs div (ou block) ainsi qu'une image au-dessus d'eux, quand je passe ma souris sur chaque div, une image différente remplace l'image du dessus. Jusqu'ici tout va bien.

Maintenant quand je clique sur une div j'aimerai que son image reste au-dessus et ce même lorsque je passe ma souris sur une autre div, ce qui va afficher une autre img, et que je sors de celle-ci.

Faudrait qu'elle reste en mémoire quoi ...

C'est une peu compliqué à expliquer donc n'hésitez pas à me poser des questions ^^

Merci d'avance pour votre aide ou vos pistes !
--

5 réponses

Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
4
Bonjour, donc, l'idée serait de poser une espèce de lock sur la div pour ne pas changer l'image.
N'ayant pas trop de code à ce mettre sous la quenotte, j'ai donc fait un essais avec des divs et des couleurs...
l'idée est de positionner un attribut sur la div qui va afficher l'image l'informant qu'elle ne peux pas changer.
Un peu de code:

<html>
	<head>
		<style type="text/css">
			/**
			* Div simulant l'image agrandie
			*/
			.DivImage{
				position:relative;
				width:640px;
				height:480px;
				overflow:hidden;
				margin:auto;
				border:1px solid black;
			}
			
			/**
			* Div simulant les images miniaturisées.
			*/
			.DivSmall{
				width:128px;
				height:128px;
				overflow:hidden;
				position:relative;
				float:left;
				margin-left:5px;
			}
			
			/**
			* Div contenant les images miniaturisées.
			*/
			.DivSmallContent{
				position:relative;
				width:740px;
				height:130px;
				overflow:hidden;
				margin:auto;
				border:1px solid black;
			}
		</style>
		<script type="text/javascript">
			/**
			* Survol d'une div
			* Si la div contenant la couleur agrandie (id="divImage") n'est pas lockée, alors change la couleur du fond.
			* @param _obj objet survolé.
			*/
			function objOver(_obj){
				// n'effectue le traitement que si la div agrandie n'est pas lockée.
				if (!document.getElementById("divImage").lockImage){
					document.getElementById("divImage").style.backgroundColor = _obj.style.backgroundColor;
				}
			}
			/**
			* Sortie de d'une div
			* Si la div contenant la couleur agrandie (id="divImage") n'est pas lockée, alors réinitialise la couleur du fond.
			* @param _obj objet survolé.
			*/
			function objOut(_obj){
				// n'effectue le traitement que si la div agrandie n'est pas lockée.
				if (!document.getElementById("divImage").lockImage){
					document.getElementById("divImage").style.backgroundColor = "transparent";
				}
			}
			
			/**
			* Traitement du click sur un objet.
			* affecte la couleur du fond à la div agrandie. 
			* Renseigne l'attribut lockImage sur la div agrandie afin de ne plus traiter le survol/sortie d'objet. La couleur du fond sera lockée.
			*
			* @param _obj objet sur lequel on a cliqué.
			*/
			function objClick(_obj){
				// change la couleur du fond.
				document.getElementById("divImage").style.backgroundColor = _obj.style.backgroundColor;
				// et lock le composant pour éviter les mouseover/mouseout intenpestif
				document.getElementById("divImage").lockImage = true;
				
			}
		</script>
	</head>
	<body>
	
		<div class="DivImage" id="divImage"></div>
		<div class="DivSmallContent">
			<div class="DivSmall" style="background-color:red;" onmouseover="objOver(this)" onmouseout="objOut(this)" onclick="objClick(this)"></div>
			<div class="DivSmall" style="background-color:green;"onmouseover="objOver(this)"onmouseout="objOut(this)" onclick="objClick(this)"></div>
			<div class="DivSmall" style="background-color:blue;"onmouseover="objOver(this)" onmouseout="objOut(this)" onclick="objClick(this)"></div>
			<div class="DivSmall" style="background-color:yellow;"onmouseover="objOver(this)"onmouseout="objOut(this)" onclick="objClick(this)"></div>
			<div class="DivSmall" style="background-color:silver;"onmouseover="objOver(this)"onmouseout="objOut(this)" onclick="objClick(this)"></div>
		</div> 
	</body>
</html>


Lorsque la page s'affiche, le survol des div de couleurs va changer la couleur de la div agrandie.
lors du cliques sur une div de couleur, la div agrandie va récupérer sa couleur et se locker.


[o-_-o]
Messages postés
27994
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mars 2020
325
Bonjour,

Pour réaliser l'affichage de ton image au passage de la souris, tu dois surement utiliser
onmouseover


pour régir au clic il te faut :

onclick



Après, c'est ce qu'on appel la manipulation du DOM..


Pour t'apporter plus d'éléments de réponse, il aurait fallut que tu nous mettes à disposisition (au minimum ) Le code source de ton DIV

Bon, imaginons que le DIV où tu souhaites afficher l'image est de la forme :
<div>
<img id="image"
  src="../exemple.gif" alt="une legende a afficher">
 </div>


il faudra que tu utilises l'instruction :
document.getElementById('image').src = 'chemin_de_l'image_a_afficher';



Cordialement,
Jordane
Messages postés
77
Date d'inscription
mardi 17 novembre 2009
Statut
Membre
Dernière intervention
18 août 2015

up
Messages postés
27994
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mars 2020
325
Je viens de comprendre ce que tu souhaitais..arf...

Le plus simple c'est d'ajouter un input HIDDEN
Lorsque tu cliques sur un DIV tu fixes sa valeur ( avec le chemin de l'image à garder en mémoire).
Ensuite, pour que ton image se réaffiche ( dans ta fonction OUT, tu pointes sur ce chemin...[s'il n'est pas vide] )..

Messages postés
77
Date d'inscription
mardi 17 novembre 2009
Statut
Membre
Dernière intervention
18 août 2015

Merci pour vos réponses, je suis désolé en effet de ne pas avoir mis de code, je ne l'ai pas sous le code, je vais essayer ce que vous me proposer ce soir et dès que j'ai qql chose qui run je vous met le code à disposition, merci !

Greg

--