Sujet Précédent Sujet Suivant

Histoire d'images ...

phoenixgreg Messages postés 77 Date d'inscription mardi 17 novembre 2009 Statut Membre Dernière intervention 18 août 2015 - 12 sept. 2013 à 09:32
phoenixgreg Messages postés 77 Date d'inscription mardi 17 novembre 2009 Statut Membre Dernière intervention 18 août 2015 - 12 sept. 2013 à 12:07

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 !
--

A voir également:

Www.histoiredimages.com
Automatisation des images ✓ - Forum Javascript / DHTML
Ttttyyyy images - Forum PHP
Faire défiler des images en boucle html ✓ - Forum Javascript / DHTML
Fusionner images - Forum PHP
Traitement des images - Conseils pratiques -Java

5 réponses

Réponse 1 / 5

Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
12 sept. 2013 à 11:47

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]

Réponse 2 / 5

jordane45 Messages postés 38173 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 10 mai 2024 344
Modifié par jordane45 le 12/09/2013 à 11:05

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

Réponse 3 / 5

phoenixgreg Messages postés 77 Date d'inscription mardi 17 novembre 2009 Statut Membre Dernière intervention 18 août 2015
12 sept. 2013 à 11:57

Réponse 4 / 5

jordane45 Messages postés 38173 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 10 mai 2024 344
12 sept. 2013 à 12:04

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] )..

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

phoenixgreg Messages postés 77 Date d'inscription mardi 17 novembre 2009 Statut Membre Dernière intervention 18 août 2015
12 sept. 2013 à 12:07

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

--

Discussions similaires

Comparer 2 image

QuickReport + 10 Images = Images noires !!!!!!

Images avec les ressources

deplacement d'images

stocker les images dans le projet

Votre réponse

Discussions similaires