<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 coordonnées_select()
{
var i=0;
var j=0;
var cpt_col=0;
var cpt_lig = 0;
var str;
//gestion des coordonnées X
if (event.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 coordonnées Y
if (event.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()
{
x_init=event.clientX;
y_init=event.clientY;
//initialisation du rectangle sans attendre le 1er mouvement de souris
souris_rectangle_move();
etat_rect=true;
document.getElementById("rectangle").style.visibility="visible";
}
function souris_rectangle_move()
{
//affichage des coordonnées
document.getElementById("coordonnéeX").value=event.clientX + " x";
document.getElementById("coordonnéeY").value=event.clientY + " y";
coordonnées_select();
if (event.clientX >= x_init)
{
largeur_rect=event.clientX - x_init;
document.getElementById("rectangle").style.left = x_init;
document.getElementById("rectangle").style.width = event.clientX - x_init;
}
else
{
largeur_rect=x_init - event.clientX
document.getElementById("rectangle").style.left = event.clientX;
document.getElementById("rectangle").style.width = x_init - event.clientX;
}
if (event.clientY >= y_init)
{
hauteur_rect=event.clientY - y_init;
document.getElementById("rectangle").style.top = y_init;
document.getElementById("rectangle").style.height = event.clientY - y_init;
}
else
{
hauteur_rect=y_init - event.clientY;
document.getElementById("rectangle").style.top = event.clientY;
document.getElementById("rectangle").style.height = y_init - event.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;
}
}
}
</script>
</head>
<body onmousemove="souris_rectangle_move()" onmousedown="init_souris_rectangle_down()" onmouseup="init_souris_rectangle_up()">
<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="coordonnéeX" size="4">
<input name="text2" type="text" class="textbox" id="coordonnéeY" 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>