Rectangle ou cadre de sélection v2

Soyez le premier à donner votre avis sur cette source.

Snippet vu 7 973 fois - Téléchargée 29 fois

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

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>

A voir également

Ajouter un commentaire

Commentaires

Messages postés
54
Date d'inscription
mercredi 4 mai 2005
Statut
Membre
Dernière intervention
10 septembre 2012

Bonjour, a partir de ce script intéressant mais peu compréhensible pour moi, est il possible de n'afficher QUE les coordonnés et pas le rectangle ?

L'apprenty Daporoty.
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
6
Bon c'est vrai que les coordonnées sont dans le chemin ,mais l'effet est quand bien réaliser.
Messages postés
121
Date d'inscription
mardi 3 mai 2005
Statut
Membre
Dernière intervention
31 décembre 2005

ca marche sur netscape
Messages postés
121
Date d'inscription
mardi 3 mai 2005
Statut
Membre
Dernière intervention
31 décembre 2005

je ne vois pa l'importance de donnée les coordonnees et le vectuer des kon clik et k'on dessine une rectangle
franchemnt c po cool
mais ...

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.