Rectangle ou cadre de sélection v2
Contenu du snippet
Ce code permet la création d'un cadre de sélection, comme sur le bureau Windows. Je n'ai pas géré la sélection d'objets, mais ça viendra peut être. Par contre je n'ai pas testé sous Netscape et Mozilla.
Ciao biz
V2 => maintenant compatible IE/Chrome/FF
Ciao biz
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>
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.