28173 sujets

CSS et mise en forme, CSS3

Div au premier plan en fonction de l'element choisi

bonjour,
je rencontre un probleme avec mon code... j'ai 4 div qui peuvent se redimmenssionner avec un drag and drop sauf que j'aimerai que la div que je choisi de retailler passe au premier plan...
Comment faire? merci d'avance

chaque div a plus oumoins le meme style (seule le top et le left change):
#divTest {
top:10px;
	left: 512px;
	width: 512px;
	height: 384px;
	position: absolute;
	/*BACKGROUND-IMAGE: url(../images/bg.gif);*/
	border: 1px solid blue;
	top: 10px;
	background-color:blue;
}

------------------------------------------

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="styles.css"> 
	
<SCRIPT LANGUAGE=JavaScript>

var X_OTHER	= 1;
var X_LEFT	= 2;
var X_RIGHT = 3;

var Y_OTHER	= 1;
var Y_UP		= 2;
var Y_DOWN	= 3;

var vgCurrentElement = null;
var vgCurrentPositionX = X_OTHER;
var vgCurrentPositionY = Y_OTHER;
	
var vgCurrentX 			= 0;
var vgCurrentY 			= 0;
var vgCurrentWidth 	= 0;
var vgCurrentHeight = 0;

var vgMouseX 			= 0;
var vgMouseY 			= 0;
var vgMouseDiffX 	= 0;
var vgMouseDiffY 	= 0;
var vgMouseDown 	= false;

var vgTimerMouse;
var vgTimerTime = 20;


//----------------------------//
function position(e)
{
	vgMouseX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
	vgMouseY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
}

//----------------------------//
function fnResizeDiv()
{
	if(vgCurrentElement!=null && vgCurrentElement!=undefined)
	{
		document.getElementById(vgCurrentElement).style.left = vgCurrentX;
		document.getElementById(vgCurrentElement).style.top = vgCurrentY;
		document.getElementById(vgCurrentElement).style.width = vgCurrentWidth;
		document.getElementById(vgCurrentElement).style.height = vgCurrentHeight;
	}
}

//----------------------------//
function fnOnMouseDown()
{
	vgMouseDown = true;
	
	if(vgCurrentElement!=null && vgCurrentElement!=undefined)
	{
		//Init of size
		vgCurrentX 				= document.getElementById(vgCurrentElement).offsetLeft;
		vgCurrentY 				= document.getElementById(vgCurrentElement).offsetTop;
		vgCurrentWidth 		= document.getElementById(vgCurrentElement).offsetWidth;
		vgCurrentHeight 	= document.getElementById(vgCurrentElement).offsetHeight;
	
		//Init of distance
		vgMouseDiffX = vgMouseX-vgCurrentX;
		vgMouseDiffY = vgMouseY-vgCurrentY;
		
		//Init of position
		if(vgMouseDiffX < 20 || (vgCurrentWidth-vgMouseDiffX) < 20)
		{
			if(vgMouseDiffX < vgCurrentWidth/2)
				vgCurrentPositionX = X_LEFT;
			else
				vgCurrentPositionX = X_RIGHT;
		}
		else
			vgCurrentPositionX = X_OTHER;
			
		
		if(vgMouseDiffY < 20 || (vgCurrentHeight-vgMouseDiffY) < 20)
		{
			if(vgMouseDiffY > vgCurrentHeight/2)
				vgCurrentPositionY = Y_DOWN;
			else
				vgCurrentPositionY = Y_UP;
		}
		else
			vgCurrentPositionY = Y_OTHER;
			
		
		vgTimerMouse = setInterval("fnOnMouseMove();", vgTimerTime);
	}
}

function fnOnMouseUp()
{
	vgMouseDown = false;
	clearInterval(vgTimerMouse);
}

function fnOnMouseMove()
{
	if(vgMouseDown && vgCurrentElement!=null && vgCurrentElement!=undefined)
	{
		switch(vgCurrentPositionX)
		{
			case X_LEFT:	vgCurrentWidth += vgCurrentX-vgMouseX;
										if(vgCurrentWidth<0)
											vgCurrentWidth = 0;
										else
											vgCurrentX = vgMouseX;
										break;
			case X_RIGHT:	vgCurrentWidth = vgMouseX-vgCurrentX;
										if(vgCurrentWidth<0)
											vgCurrentWidth = 0;
										break;
			default: break;
		}
		switch(vgCurrentPositionY)
		{
			case Y_UP:		vgCurrentHeight += vgCurrentY-vgMouseY;
										if(vgCurrentHeight<0)
											vgCurrentHeight = 0;
										else
											vgCurrentY = vgMouseY;
										break;
			case Y_DOWN:	vgCurrentHeight = vgMouseY-vgCurrentY;
										if(vgCurrentHeight<0)
											vgCurrentHeight = 0;
										break;
			default: break;
		}
									
		if(vgCurrentPositionX==X_OTHER && vgCurrentPositionY==Y_OTHER)
		{
			vgCurrentX = vgMouseX-vgMouseDiffX;
			vgCurrentY = vgMouseY-vgMouseDiffY;
		}
		
		
		
		fnResizeDiv();
	}
}

function fnOnMouseOver(sSelectedElementName)
{
	if(!vgMouseDown)
	{
		if(sSelectedElementName==null && sSelectedElementName!="undefined")
		{
			vgCurrentElement = null;
		}
		else
		{
			vgCurrentElement = sSelectedElementName;
		}
	}
}


//----------------------------//
function fnOnLoad()
{
	if(navigator.appName.substring(0,3) == "Net")
		document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove = position;
	
	//fnResizeDiv();
}

</script>
	
</head>
<body onLoad="fnOnLoad();" onMouseDown="fnOnMouseDown();" onMouseUp="fnOnMouseUp();">

<div id="divTest" name="divTest" onMouseOver="fnOnMouseOver('divTest');" onMouseOut="fnOnMouseOver();"></div>  


<div id="divTest2" name="divTest2" onMouseOver="fnOnMouseOver('divTest2');" onMouseOut="fnOnMouseOver();"></div>  
<div id="divTest3" name="divTest3" onMouseOver="fnOnMouseOver('divTest3');" onMouseOut="fnOnMouseOver();"></div>  


<div id="divTest4" name="divTest4" onMouseOver="fnOnMouseOver('divTest4');" onMouseOut="fnOnMouseOver();"></div> 

</body>
</html>

Modifié par eliseg (19 Nov 2007 - 11:28)
Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Dsl pour ce petit oublie...
promis je ne le referai plus Smiley ohwell

J'ai pris connaissance des petites regles à respecter...
Encore une fois désolée.
Sujet clos
Aller à