Onmouseover et centrage

**aspiman** · 25/11/2009, 11h17

Bonjour à tous,

Je viens vers vous avec un joli casse tête.

Je tente de réaliser un petit schéma animé : voir image

Le but de la manœuvre est d'afficher un cadre au milieu qui contiendra du texte en fonction de la zone grise survolé.

Mon souci est que je n'arrive pas à dire :
"Garde le cadre au centre lorsque celui-ci est survolé par la souris"

Le cadre disparait dés que je le survole, logique puisque j'ai mi une fonction onmouseout sur chacune dés DIV contenant une image grise.

Je pense que vous avez compris ou je voulais en venir mais en tant que débutant je pense que je me complique bien la vie. donc avis au amateur si vous avez une solution efficace pour faire cela.

Pour l'instant voici le code JS

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
76
77
function setButton_on(x)
{
	var button=document.getElementById(x);
	var fichier = 'images/shema-actif_0'+button.id+'.gif';
	var centre2 = document.getElementById(11).style;
 
 
	button.src=fichier;
 
	centre2.zIndex= "100";
 
}
function setCentre()
{
	document.getElementById(11).onmouseover==1;
	alert ( 'valeur : '+document.getElementById(11).onmouseover);
}
 
function setButton_off(x)
{
	if (document.getElementById(11).onmouseover!=1)
	{
	var button=document.getElementById(x);
	var fichier = 'images/shema_0'+button.id+'.gif';
	button.src=fichier;
	var centre2 = document.getElementById(11).style;
 
 
	button.src=fichier;
 
	centre2.zIndex= "0";
	}
}
</script>
 
</head>
 
<body>
<div style="width:784px; height:749px; margin:auto;">
<div style=" width:321px; height:221px; position:absolute; margin-left:233px; margin-top:268px; z-index:1 " id="10">
<img src="images/centre_05.gif" width="321" height="221" border="0" />
</div>
 
<div style=" background-image:url(images/centre_actif_05.gif); width:321px; height:221px; position:absolute; margin-left:233px; margin-top:268px; z-index:0 " id="11" onmouseover="setCentre()" >
ererrerrerererererere
</div>
 
 
 
 
<div style=" width:306px; height:297px; float:left">
<img src="images/shema_01.gif" width="306" height="297" id="1" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:172px; height:297px; float:left">
<img src="images/shema_02.gif" width="172" height="297" id="2" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style="width:306px; height:297px; float:left">
<img src="images/shema_03.gif" width="306" height="297" id="3" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:306px; height:166px; float:left">
<img src="images/shema_04.gif" width="306" height="166" id="4" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:173px; height:166px; float:left">
<img src="images/shema_05.gif" width="173" height="166" id="5" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:305px; height:166px; float:left">
<img src="images/shema_06.gif" width="305" height="166" id="6" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:306px; height:286px; float:left">
<img src="images/shema_07.gif" width="306" height="286" id="7" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:173px; height:286px; float:left">
<img src="images/shema_08.gif" width="173" height="286" id="8" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:305px; height:286px; float:left">
<img src="images/shema_09.gif" width="305" height="286" id="9" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>

Merci par avance

**kernelfailure** · 25/11/2009, 11h48

Tu pourrais retarder la disparition (setTimeout).

Lors mouseover de ton id, tu annules le setTimeout. Tu ne le réactive qu'en mouseout. Et tu le supprime aussi lors des mouseover sur les autres.

Onmouseover et centrage

JavaScript

Discussions similaires

Partager

Partager