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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 8 895 fois - Téléchargée 30 fois

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

Ajouter un commentaire Commentaires
stfou Messages postés 450 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 18 avril 2007 3
6 mars 2007 à 16:01
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
12 janv. 2006 à 10:33
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
7 juin 2005 à 15:11
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
24 mai 2005 à 11:44
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
21 mai 2005 à 13:12
marche pas sur mozilla mais sinon, marche sans pb sur IE, mais à part ça, je trouve ce petit prog bien sympa ^^
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)