Cadre ou rectangle de sélection ( un peu comme sous le bureau windows )

Commenter

Contenu du snippet

Salut

Alors ce code pour l'instant ce comporte comme le cadre de sélection d'icones de Windows. C'est à dire un déplacement de la souris avec le boutton gauche appuyé.

V2 => maintenant compatible IE/Chrome/FF

Source / Exemple : 


 
<html>
<head>
<title>cadre de sélection</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
width:100%;
height:100%;
}
.rectangle {
position:absolute;
left:0px;
top:0px;
width:100px;
height:100px;
z-index:5;
visibility: hidden;
font-size: 0px;
border: 1px dashed;
}
.masque {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:4;
}
.textbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: italic;
}
-->
</style>
<script language="javascript">

var hauteur=300;
var largeur=600;
var nbr_colonnes=9;
var nbr_lignes=5;
var couleur_ON="#CCFFFF";
var couleur_OFF="#FFFFCC";

var x_init=0;
var y_init=0;
var largeur_rect=0;
var hauteur_rect=0;
var etat_rect = false;
var coin_hg = new Array(0,0); // haut gauche
var coin_hd = new Array(0,0); // haut droite
var coin_bg = new Array(0,0); // bas gauche
var coin_bd = new Array(0,0); // bas droite

function coordonnees_select(e)
{
var i=0;
var j=0;
var cpt_col=0;
var cpt_lig = 0;
var str;

//gestion des coordonnees X
if (e.clientX >= x_init)
{
coin_hg[0] = Math.floor(x_init/(largeur/nbr_colonnes));
coin_hd[0] = Math.floor((x_init+largeur_rect)/(largeur/nbr_colonnes));
coin_bg[0] = Math.floor(x_init/(largeur/nbr_colonnes));
coin_bd[0] = Math.floor((x_init+largeur_rect)/(largeur/nbr_colonnes));
}
else
{
coin_hg[0] = Math.floor((x_init-largeur_rect)/(largeur/nbr_colonnes));
coin_hd[0] = Math.floor(x_init/(largeur/nbr_colonnes));
coin_bg[0] = Math.floor((x_init-largeur_rect)/(largeur/nbr_colonnes));
coin_bd[0] = Math.floor(x_init/(largeur/nbr_colonnes));
}

//gestion des coordonnees Y
if (e.clientY >= y_init)
{
coin_hg[1] = Math.floor(y_init/(hauteur/nbr_lignes));
coin_hd[1] = Math.floor(y_init/(hauteur/nbr_lignes));
coin_bg[1] = Math.floor((y_init+hauteur_rect)/(hauteur/nbr_lignes));
coin_bd[1] = Math.floor((y_init+hauteur_rect)/(hauteur/nbr_lignes));
}
else
{
coin_hg[1] =  Math.floor((y_init-hauteur_rect)/(hauteur/nbr_lignes));
coin_hd[1] =  Math.floor((y_init-hauteur_rect)/(hauteur/nbr_lignes));
coin_bg[1] =  Math.floor(y_init/(hauteur/nbr_lignes));
coin_bd[1] =  Math.floor(y_init/(hauteur/nbr_lignes));
}

slct();

document.getElementById("case1_hg").value = coin_hg[0];
document.getElementById("case1_hd").value = coin_hd[0];
document.getElementById("case1_bg").value = coin_bg[0];
document.getElementById("case1_bd").value = coin_bd[0];
document.getElementById("case2_hg").value = coin_hg[1];
document.getElementById("case2_hd").value = coin_hd[1];
document.getElementById("case2_bg").value = coin_bg[1];
document.getElementById("case2_bd").value = coin_bd[1];
}

function init_souris_rectangle_up()
{
document.getElementById("rectangle").style.visibility="hidden";
etat_rect=false;

unslct();
}

function init_souris_rectangle_down(e)
{
if(!e){ e=event; }

x_init=e.clientX;
y_init=e.clientY;

//initialisation du rectangle sans attendre le 1er mouvement de souris
souris_rectangle_move(e);
etat_rect=true;
document.getElementById("rectangle").style.visibility="visible";
}

function souris_rectangle_move(e)
{
if(!e){ e=event; }

//affichage des coordonnees
document.getElementById("coordonneeX").value=e.clientX + " x";
document.getElementById("coordonneeY").value=e.clientY + " y";

coordonnees_select(e);

if (e.clientX >= x_init)
{
largeur_rect=e.clientX - x_init;
document.getElementById("rectangle").style.left = x_init;
document.getElementById("rectangle").style.width = e.clientX - x_init;
}
else
{
largeur_rect=x_init - e.clientX
document.getElementById("rectangle").style.left = e.clientX;
document.getElementById("rectangle").style.width = x_init - e.clientX;
}

if (e.clientY >= y_init)
{
hauteur_rect=e.clientY - y_init;
document.getElementById("rectangle").style.top = y_init;
document.getElementById("rectangle").style.height = e.clientY - y_init;
}
else
{
hauteur_rect=y_init - e.clientY;
document.getElementById("rectangle").style.top = e.clientY;
document.getElementById("rectangle").style.height = y_init - e.clientY  ;
}
}

function slct()
{
var i=0;
var j=0;

//commenter la ligne ci-dessous pour ne pas effacer la sélection, lors du onmouseup
unslct();

for(i=coin_hg[0]+1; i<=coin_hd[0]+1; i++){
for(j=coin_hg[1]+1; j<=coin_bg[1]+1; j++){
if((j <= nbr_lignes) && (i <= nbr_colonnes) && (j >= 1) && (i >= 1) && (etat_rect==true))
document.getElementById(j.toString() + i.toString()).style.background=couleur_ON;
}
}
}

function unslct()
{
var i=0;
var j=0;

for(i=1; i<=nbr_colonnes; i++){
for(j=1; j<=nbr_lignes; j++){
document.getElementById(j.toString() + i.toString()).style.background=couleur_OFF;
}
}
}
document.onmousemove = souris_rectangle_move;
document.onmousedown = init_souris_rectangle_down;
document.onmouseup = init_souris_rectangle_up;

</script>

</head>
<body > 

<div id="rectangle" class="rectangle"></div> 
<div id="masque" class="masque"></div>

<div id="console" style="position:absolute; left:40px; top:362px; width:109px; height:57px; z-index:3">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="110" height="44" align="left" valign="top">
<input name="text" type="text" class="textbox" id="case1_hg" size="10">
<input name="text2" type="text" class="textbox" id="case2_hg" size="10">
</td>
<td width="100%"></td>
<td width="110" align="right" valign="top">
<input name="text2" type="text" class="textbox" id="case1_hd" size="10">
<input name="text2" type="text" class="textbox" id="case2_hd" size="10">
</td>
</tr>
<tr>
<td width="110" height="36"></td>
<td width="100%">
<div align="center">
<input name="text2" type="text" class="textbox" id="coordonneeX" size="4">
<input name="text2" type="text" class="textbox" id="coordonneeY" size="4">
</div></td>
<td width="110"></td>
</tr>
<tr>
<td width="110" height="23" align="left" valign="bottom">
<input name="text2" type="text" class="textbox" id="case1_bg" size="10">
<input name="text2" type="text" class="textbox" id="case2_bg" size="10">
</td>
<td width="100%"></td>
<td width="110" align="right" valign="bottom">
<input name="text2" type="text" class="textbox" id="case1_bd" size="10">
<input name="text2" type="text" class="textbox" id="case2_bd" size="10">
</td>
</tr>
</table>
</div>

<table width="600" height="300"  border="1" cellpadding="1" cellspacing="1"> 
<tr> 
<td id="11"></td> 
<td id="12"></td> 
<td id="13"></td> 
<td id="14"></td> 
<td id="15"></td> 
<td id="16"></td> 
<td id="17"></td> 
<td id="18"></td> 
<td id="19"></td> 
</tr> 
<tr> 
<td id="21"></td> 
<td id="22"></td> 
<td id="23"></td> 
<td id="24"></td> 
<td id="25"></td> 
<td id="26"></td> 
<td id="27"></td> 
<td id="28"></td> 
<td id="29"></td> 
</tr> 
<tr> 
<td id="31"></td> 
<td id="32"></td> 
<td id="33"></td> 
<td id="34"></td> 
<td id="35"></td> 
<td id="36"></td> 
<td id="37"></td> 
<td id="38"></td> 
<td id="39"></td>
</tr> 
<tr> 
<td id="41"></td> 
<td id="42"></td> 
<td id="43"></td> 
<td id="44"></td> 
<td id="45"></td> 
<td id="46"></td> 
<td id="47"></td> 
<td id="48"></td> 
<td id="49"></td> 
</tr> 
<tr> 
<td id="51"></td> 
<td id="52"></td> 
<td id="53"></td> 
<td id="54"></td> 
<td id="55"></td> 
<td id="56"></td> 
<td id="57"></td> 
<td id="58"></td> 
<td id="59"></td> 
</tr>
</table> 
</body>
</html>

Conclusion :


Pour ce qui est des bugs, je n'en conné pas (ca va durer). Sinon pouvez vous me rendre un service en éxécutant cette page sur différents OS et navigateurs. Juste pour apprécier la compatibilité du code. Merci à vous ;)
Autrement, une mise à jour pointera surement le bout de son nez, dans quelques temps.

Et puis n'oubliez pas de me donner votre opinion sur ce code.

Ciao et merci
Pierre DULOY

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Moussetique)