Bonjour,

Voilà, j'ai deux bloc. Un bloc B dans un bloc A.
J'arrive à déplacer mon bloc B dans le bloc A, mais j'aimerais qu'il ne dépasse pas les bord du bloc A et que le bloc B disparaisse lorsque mon curseur quitte le bloc A.

Voici le petit bout de code :

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
 
<div id="blocA">
      <img src="image1.jpg" onmousemove="masque()" alt="image1" />
      <div id="blocB" style="overflow:hidden;display:none;position:relative;width: 95px;height: 95px;z-index: 100;border:1px solid #000;cursor: crosshair;background-color:#ffffff;opacity:0.5;">
      </div>
</div>
 
<script type="text/javascript">
var x,y;
 
function position(e) 
{
	if (navigator.appName.substring(0,3) == "Net") 
	{
		x = e.pageX;
		y = e.pageY;
	}
	else 
	{
		x = event.x+document.body.scrollLeft;
		y = event.y+document.body.scrollTop;
	}
}
 
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
 
document.getElementById("blocA").onmousemove = position;
 
blocB = document.getElementById("blocB").style;
 
function masque() 
{
	blocB.display = "block";
	blocB.top = (y-590)+"px";
	blocB.left = (x-260)+"px";
	setTimeout("masque()",10);
}
 
</script>

Voilà le code, j'ai testé avec la propriété overflow, avec display sur evenement oumouseout, mais rien à faire.

Merci d'avance.