affichage image et rollover div

**PadaBen** · 18/11/2006, 00h24

Bonsoir tous !!

Voil�, j'ai un pti souci, je ne sais abosulment pas comment faire afficher une image dans un Div ( nom� img) lorsque je passe sur un autre div ( nom� texte ) qui se trouve � un autre endroit de la page. !!!

j'arrive � faire un �v�nement au passage de la souris sur un div.
mais pas � faire afficher une image "/img/imageA.jpg" dans un autre div bien pr�cis.

Je dois reproduire cela pleins de fois .

Sinon j'utilise d�j� du Php, esque une telle programmation serait plus souple en php ? (quoique je crois qu'il soit tr�s difficile de d�tecter les �v�nements sourisen php. )

Merci

++all

Padaben

**javatwister** · 18/11/2006, 09h26

un mini-exemple:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
 
<head>
 
<style type="text/css">
 
#im {
width:100px;
height:100px;
background-color:gray;
}
 
#im img {
visibility:hidden;
width:100px;
}
 
#over {
margin-top:100px;
width:100px;
text-align:center;
background-color:#ff0000;
}
 
</style>
 
<script type="text/javascript">
 
window.onload=function(){
	var ov=document.getElementById("over");
	var sm=document.getElementById("smil");
 
	ov.onmouseover=function(){
		sm.style.visibility="visible"
	}
 
	ov.onmouseout=function(){
		sm.style.visibility="hidden"
	}
}
 
</script>
 
</head>
 
<body>
 
<div id="im">
	<img id="smil" src="http://javatwist.imingo.net/sm01.gif" alt="smile!" />
</div>
 
<div id="over">Passe dessus!</div>
 
</body>
 
</html>

mais l�, c'est un peu statique...; tu peux aussi bien d�finir l'image qui appara�tra sans qu'elle soit � l'avance inscrite dans la balise;

**PadaBen** · 18/11/2006, 12h13

Merci Javatwister, pour ce bout de code, je vais me pencher dessus, � la 1ere lecture, pas �vident de comprendre...
je vais m'y remettre.

Si ca pe te donner une id�e de ce que je veux, regarde ici

il y a donc des cat�gories. par ex dans le 1er lien de EQUIPE, si l'utilisateur passe sur le div(referencement) ou il y a l'image de fond, je voudrais que une image s'affiche dans le div qui se trouve en haut � gauche de la page, a gauche du logo.
Et ce biensur pour chaque div ou l'utilisateur passe la souris dessus.

voil�. je m'y remet!

Merci

++

Padaben

**javatwister** · 18/11/2006, 12h39

alors un autre exemple:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
 
<head>
 
<style type="text/css">
 
#im {
float:left;
margin-right:100px;
width:100px;
height:100px;
background-color:gray;
}
 
#im img {
width:100px;
height:100px;
}
 
#cadre{
float:left;
width:200px;
height:200px
}
 
#cadre div{
margin-bottom:20px;
width:100px;
text-align:center;
background-color:#ff0000;
}
 
</style>
 
<script type="text/javascript">
 
window.onload=function(){
	var ov=document.getElementById("cadre").getElementsByTagName("div");
	var logo=document.getElementById("im");
	var smile;
 
	for(i in ov){
		ov[i].onmouseover=function(){
			if(!smile){
				smile=document.createElement("img");
				logo.appendChild(smile)
			}
 
			smile.src="http://javatwist.imingo.net/"+this.id+".gif";
 
		}
	}
 
}
 
</script>
 
</head>
 
<body>
 
<div id="im">
 
</div>
 
<div id="cadre">
<div id="sm01">Passe dessus!</div>
<div id="sm02">Passe dessus!</div>
<div id="sm03">Passe dessus!</div>
<div id="sm04">Passe dessus!</div>
</div>
 
</body>
 
</html>

http://javatwist.imingo.net/test.htm
pour voir le r�sultat...

**PadaBen** · 18/11/2006, 13h25

Salut javatwister,

Super , merci pour la ptite page de test sur ton site. effectivement donc ca marche sans souci.

je pr�f�re cette 2eme solution

Ptite questions concernant ton code.
Dans ton CSS, je ne connais pas cette mani�re de coder pour
#im img {}
et
#cadre div{}
pourquoi le nom du div est en 2 parties?

Ensuite :
� quoi correspond la var smile?
je comprend bien que tu la d�clare dans le onload, mais je comprend pas comment juste en la d�clarant tu peux ensuite dire
if (!smile) {}

d�sol�, je suis d�butant en Js, et en prog en g�n�ral !!

Merci de ton aide.
++
Padaben

affichage image et rollover div

JavaScript

Discussions similaires

Partager

Partager