Discussion :

[mussara]

bonjour à tous

j'essaie, en vain, de faire afficher une image dans un div donné depuis un lien qui se trouve sur un autre div...
donc en gros en passant la souris sur un texte placé dans un div je souhaiterai que ça m'affiche une image sur un autre div...

mon css est composé de la sorte:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.zone_affichage_image {
   position:absolute;
   top: 420px;
   width:120px;
   height:120px;
   margin-left:620px;
   display: block;
}
 
.zone_affichage_image a {
   text-decoration: none; 
}
.zone_affichage_image a span { 
   display: none;
}
.zone_affichage_image a:hover span { 
   display: inline;
   position: absolute;
   top: 620px;
   margin-left: 600px;
   width: 120px;
   height: 120px;
}

et mon code d'appel:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div class="zone_texte">
   <a href="">mon texte qui va faire apparaitre l'image<span><img src="/images/divers/image.jpg"></span></a>
</div>

faut-il que j'attribue à span la class zone_affichage_image ? si oui, comment lui spécifier car le texte je souhaite qu'il dépende de ma classe zone_texte mais qu'au survol de celui-ci , il fasse afficher une image dans zone_affichage_image...

merci de votre aide

[mymyma]

Je ne sais pas si tu fais ou non parti de ces personnes qui sont totalement Anti-Javascript, mais je connais une solution à ton problème en javascript.

Si elle t'intéresse, fait moi signe

[masu]

alors tu a deux possibilitées soit utiliser du javascript, soit jouer le background de ta balise a

[shintoisme]

+1 masu

[luchk]

Utilise l'attribut display ...

Voila un exemple :
http://www.peutetreunereponse.net/article-1528160.html

(Je ne suis pas sur que c'est ce que tu cherches .... car je n'ai pas très bien compris ton problème.)

[masu]

voici vite fait une petit solution js
le css pour que l'image ne s'affiche pas au depart

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#test_image {
visibility: hidden;
}

le html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

   <a href="" onmouseover="showImg(1);" onmouseout="showImg(0);">mon texte qui va faire apparaitre l'image<img id="test_image" src="image.jpg" width="50" height="30" /></a>

la fonction js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function showImg(show) {
var obj = document.getElementById('test_image');
if (show==1)
obj.style.visibility = 'visible';
if (show==0)
obj.style.visibility = 'hidden';
}

sinon pour du css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.zone_texte a, a:link, a:visited {
background: none;
padding-right: 50px;/*largeur de l'image*/
height: 30px; /*hauteur de l'image*/
}
.zone_texte a:hover {
	background: url(image.jpg) no-repeat right;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="zone_texte">
	 <a href="">mon texte qui va faire apparaitre l'image</a>
</div>

[mussara]

merci pour vos aides respectives

j'ai essayé la solution de Masu en css mais je n'arrive pas à voir l'image apparaître en passant la souris sur le texte...

j'ai mon texte qui est affiché dans le div zone_news

et en ajoutant le code (et en le modifiant un peu car le code initial ne marchait pas mieux) j'en suis arrivé là:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
.zone_news { /* zone de texte pour afficher les news */
	position:absolute;
	font-size: 12px;
	color: #000000;
	text-align: justify;
	padding:10px;
/*	background-color: #CCFFCC;*/
	overflow:auto;
        margin-left: 180px;
	top: 158px;
	width:350px;
	height:364px;
}
.zone_image { /* zone d'affichage de l'image*/
	position:absolute;
	top: 420px;
	width:120px;
	height:120px;
	margin-left:620px;
	display: block;
	background-color:#DDFFFF;
	}
 
.zone_image a, a:link, a:visited {
background: none;
width: 150px;/*largeur de l'image*/
height: 113px; /*hauteur de l'image*/
}
.zone_image a:hover {
	background: url(images/divers/image.jpg) no-repeat;
}

et l'appel est fait via:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div class="zone_news">
   <div id='zone_newstexte'><a href="#">mon texte qui va declancher image</a></div>
</div>

et là je sèche...

je pense que ça vient de l'écriture de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id='zone_newstexte'><a href="#">mon texte qui va declancher image</a></div>

où rien ne lui est spécifié pour aller s'afficher dans la div zone_image???

j'ai essayé aussi avec le script js, mais l'image ne s'affiche que dans le div courant et non pas dans le div de destination...

[masu]

la solution css, n'est pas forcement evidente a mettre en place au niveau du positionnement de l'image dans le fond de la balise a. Mais ca doit etre jouable vue que tu as des tailles fixes pour tes divs.
L'image sera le background de la balise a, on met un padding-right a la balise a et une valeur right dans la propriete background au moment du survol de a pour qu'il n'y ai pas supperposition du texte et de l'image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
zone_news { /* zone de texte pour afficher les news */
		position:absolute;
		font-size: 12px;
		color: #000000;
		text-align: justify;
		padding:10px;
	 /* background-color: #CCFFCC; */
		overflow:auto;
	    margin-left: 180px;
		top: 158px;
		width:350px;
		height:364px;
	}
 
 
	a.zone_image, a.zone_image:link, a.zone_image:visited {
	background: none;
	padding-right: 150px;/*largeur de l'image*/
	height: 113px; /*hauteur de l'image*/
	width: 420px;
	display:block;
	}
	a.zone_image:hover {
		background: url(images/divers/image.jpg) no-repeat right;
	}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
	<div class="zone_news">44
	   <div id='zone_newstexte'><a href="#" class="zone_image">mon texte qui va declancher image</a></div>
	</div>

[mussara]

ça ne marche pas mieux...
et surtout le survol ne fait pas afficher l'image dans le caisson beu clair que j'ai mis en guise de test..
j'ai mis la page en ligne sur http://oeildecale.fr
le problème est visible quand on clique sur réalisations...

[mussara]

je ne comprends pas trop non plus le padding-right car vu que le texte s'affiche ds un div et l'image dans un autre div, il n'y aucun risque de superposition...

et de + je pense que c'est ce padding qui me déparamètre le div d'écriture du texte...

[Candygirl]

bonjour à tous
donc en gros en passant la souris sur un texte placé dans un div je souhaiterai que ça m'affiche une image sur un autre div...

Tu souhaites simplement que ton image s'affiche à un endroit précis, c'est ça ?

faut-il que j'attribue à span la class zone_affichage_image ?

La balise span n'est pas vraiment utile, par contre tu vas devoir attribuer le contenu de ta class à l'élément que tu veux faire afficher à cette position-là, soit ton image.

si oui, comment lui spécifier car le texte je souhaite qu'il dépende de ma classe zone_texte mais qu'au survol de celui-ci , il fasse afficher une image dans zone_affichage_image...

En fait, le truc est de mettre dans ton html ton image à l'intérieur du lien qui doit l'activer. Dans un premier temps elle ne doit pas être visible et sur le :hover, elle s'affiche à la position souhaitée.

En version très simplifiée, ça donne ça:

html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body>
   <a href="#" class="zone_texte">mon texte qui va faire apparaitre l'image<img src="/images/divers/image.jpg" alt=" " /></a>
</body>

css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
a.zone_texte img { 
   width:0; height:0; border-width:0;
}
a.zone_texte:hover { background:none;}
a.zone_texte:hover img { 
   position:absolute;
   top: 420px;
   left:620px;	 
   width:120px;
   height:120px; 
}

2 remarques:

- Plutôt que le display:none, les dimensions de l'image sont réduites à 0; plus d'info ici

- On attribue une propriété au a:hover à cause d'un bug d'IE, plus d'infos ici

[mussara]

le problème c'est qu'avec cette méthode, ça affiche l'image dans le div de départ...

[Candygirl]

ça affiche l'image dans le div de départ...

qu'entends-tu par là ?

Dans mon exemple je ne vois pas un seul div...
L'image s'affiche où on veut à l'écran indépendament de là où elle se trouve dans le code puisqu'elle est en absolu. Il n'y a pas besoin de "div de destination" pour la positionner (juste voir quelle référence on veut donner pour le positionnement absolu). Le problème que je vois pourrait être une superposition avec un autre bout de code mais règlable avec le z-index.

[mussara]

oui je suis d'accord avec toi
mais quand j'applique syntaxiquement ton code, l'image vient s'afficher dans le div dans lequel le survol a été provoqué...
en gros j'ai une zone de texte qui est dimensionnée et je souhaiterai que lorsqu'on passe la souris sur ce texte, ça affiche l'image sur un autre div...

[Candygirl]

Mais pourquoi "sur an autre div" ? IL y a une raison particuliaire pour que tu veuilles absolument que ça s'affiche sur un div différent (à cause d'un javascript,... ) ? Auquel cas je pense que ce n'est pas fesable en css mais en JS.

Maintenant si je prends le lien que tu as montré plus haut je ne comprends pas en quoi la méthode que je t'ai proposée ne te satisfait pas, si le but est juste de faire apparaître une image dans le carré vert en bas à droite lors du survol du menu en haut ? C'est à cause du contenu qui peut avoir une taille variable et donc ton carré qui peut bouger ?

edit: ah non vu les arrondis sur les côtés je suppose que le carré a une position fixe

[mussara]

oui c'est exactement ça

j'ai un div de récupération de textes qui s'affichent en fonction du menu et dans cette zone de texte j'ai des appels qui vont (enfin que je voudrais qu'ils aillent!!!) vers un autre div qui est à lui seul un div particulier...

le carré a en effet une position fixe (il n'est là pour l'instant que pour montrer l'emplacement)

je pense que je vais me retourner vers le javascript ou alors changer totalement ma procédure...

[masu]

bien joue Candygirl, ca semble bien fonctionner ^^

je n'avais pas pensé a cette solution pensant que IE ne comprendrai pas ce selecteur a.zone_texte:hover img mais force est de constaté que ca marche je croi que je vais pouvoir remplacer certains de mes js par du css
merci donc

Comme Candygirl, je ne comprend pas pourquoi tu ne peu pas utiliser ce code.

[mussara]

je pense que j'ai une erreur de conception avant tout dans ce que je veux faire...

mais sinon j'ai mis en ligne le code de CandyGirl mais sous IE ça ne fonctionne pas(en tout cas lorsqu'on est dans un div donné, ou + spécialement dans mon div, car j'ai peut être encore un truc qui merdouille dedans...), la liste des liens se bloque sur la dernière ligne survolée pour faire afficher une image...

[Candygirl]

Merci, masu

Mussara, il se peut qu'il y ait un problème avec IE si ton lien d'appel est sur une image (il me semble avoir rencontré ce problème une fois dans un contexte légérement différent). Pour le contourner il suffit de mettre l'image comme image de fond de ton lien.

[mussara]

hou la!!!
je n'ai pas saisi...

il faut que j'attribue une propriété de background image à ma classe? c'est bien ça?
mais à ce moment la, il me faut autant de classes différentes que j'ai de liens? non?