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

Soyez le premier à donner votre avis sur cette source.

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

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

Ajouter un commentaire

Commentaires

stfou
Messages postés
454
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
1
Gé-ni-al ta source, mais met un zip.
10/10
duckaurore
Messages postés
1
Date d'inscription
mardi 8 février 2005
Statut
Membre
Dernière intervention
12 janvier 2006

Bien sympa ton code. C'est ce que je cherche. Mais je voudrai faire cette sélection sur une image, et je n'arrive pas à comprendre comment je dois faire. Quelqu'un peut-il m'aider, svp?
Merci d'avance!
oolon
Messages postés
3
Date d'inscription
mardi 20 avril 2004
Statut
Membre
Dernière intervention
7 juin 2005

Ce script n'est pas mal du tout, c'est ce que je recherchais à part que j'aurais voulu que les cases sélectionnées restent de la couleur de la sélection une fois le bouton de la souris relaché... cela est-il possible ? Si oui comment ?
D'autre part, il n'est pas compatible avec firefox, vous savez à quoi cela est du ? Qu'est-ce qui n'est pas géré par le navigateur ???
Merci d'avance !
bichonade
Messages postés
12
Date d'inscription
mercredi 13 avril 2005
Statut
Membre
Dernière intervention
17 janvier 2008

slt...je cherchais également à faire une application comme cela mais j'aimerais conserver le rectangle une fois que l'utilisateur l'a dessiné...Comment est-ce possible ?
A terme, j'aimerai arriver a permettre à un utilisteur de dessiner un polygone....pô facile tous les jours moi je vous le dit..d'autan plus que j'ai essayé avec la bibliothèque wz_jsgraphics.js conseillée sur un des forum mais sans plus de succès..si une personne kelkelle soit pouvait me donner un coup de main, si vous connaissez des librairies javascript pour réaliser cela, ca serait sympa de me les faire parvenir...merci bcp a tous ceux qui auront pris le temps de lire ce message..
la_pin
Messages postés
275
Date d'inscription
mercredi 11 août 2004
Statut
Membre
Dernière intervention
15 décembre 2005

marche pas sur mozilla mais sinon, marche sans pb sur IE, mais à part ça, je trouve ce petit prog bien sympa ^^

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.