affichage image et rollover div

Version imprimable

18/11/2006, 00h24
PadaBen

affichage image et rollover div

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

un mini-exemple:

Code:

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;

18/11/2006, 12h13
PadaBen

Salutt !

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

alors un autre exemple:

Code:

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

18/11/2006, 13h25
PadaBen

Super !

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