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

Vue hybride

Discussions similaires

Partager

Partager