CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 14:38:32

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

RECTANGLE OU CADRE DE SÉLECTION

Information sur la source

Note :

6,33 / 10

Catégorie :Graphique Niveau :Débutant Date de création :09/05/2005 Date de mise à jour :20/05/2005 16:44:47 Vu :6 388

Auteur : Moussetique

Ecrire un message privé

Site perso

Commentaire sur cette source (4)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

Source

<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>

<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>

Conclusion

1 : copier l'ensemble du code js dans le <head>
2 : modifier <body> comme suit : <body onmousemove="souris_rectangle()" onmousedown="init_souris_rectangle_down()" onmouseup="init_souris_rectangle_up()">

Historique

20 mai 2005 16:41:41 :: Correction de quelques bug. Gestion d'une speudo sélection. Clarification du code, en ajoutant une configuration des variables plus simple.
20 mai 2005 16:44:47 :: Mise à jour de la capture

Sources du même auteur

CADRE OU RECTANGLE DE SÉLECTION ( UN PEU COMME SOUS LE BUREA...

Toutes les sources de Moussetique

Sources de la même categorie

JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator

SPHERE 3D DÉFORMABLE par phm

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma

CALCULATRICE HEURE par m22001111

Toutes les sources de la catégorie Graphique

Commentaires et avis

Commentaire de darkman2 le 10/05/2005 16:19:13

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 ...

Commentaire de darkman2 le 10/05/2005 16:22:06

ca marche sur netscape

Commentaire de Arto_8000 le 11/05/2005 00:33:59

Bon c'est vrai que les coordonnées sont dans le chemin ,mais l'effet est quand bien réaliser.

Commentaire de daporoty le 17/05/2005 16:17:40

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.

Ajouter un commentaire

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Installation et configuration de blogs Wordpress
Budget : 8 500€
Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP