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

[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]

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