par
eric » 01 juin 2010, 11:49
bonjour à tous,
en fait je dois faire une fonction qui me permet de sélectionner plusieurs zones d'une image et de récupérer les coordonnées dans un formulaire.
comme je suis débutant,j'ai regardé les codes sur internet et regarder sur les forums, quelqu'un m'a envoyé son code,le voici :
Cependant j'ai beau réfléchir je ne le comprend pas,c'est trop compliqué pour moi,j'essaye de récupérer les coordonnées des points du rectangle tracé à l'aide d'un formulaire html et d'un script php mais cela ne fonctionne pas,je ne récupère aucune valeur.
Est ce que quelqu'un pourrait m'aider svp?
merci d'avance
<script language="JavaScript" type="text/JavaScript">
window.onload=function() {
activate('mon_image');
};
function activate(id) {
var el = document.getElementById(id),
oX, oY, down = false,
div, s;
el.onmousedown = function(e) {
oX = offset_X(el,e);
oY = offset_Y(el,e);
down = true;
div = document.createElement('div');
s = div.style;
s.display = 'none';
s.position = 'absolute';
s.left = oX+'px';
s.top = oY+'px';
s.border = '2px solid #666666';
s.background='rgba(150,150,256,0.3)';
this.parentNode.appendChild(div);
if(e.preventDefault) { e.preventDefault(); }
else { e.returnValue = false; }
return false;
};
document.body.onmousemove = function(e) {
if(down) {
var newX = offset_X(el,e),
newY = offset_Y(el,e);
s.display = '';
if(newX<oX) { s.left = newX+'px'; }
if(newY<oY) { s.top = newY+'px'; }
s.width = Math.abs(newX-oX)+'px';
s.height = Math.abs(newY-oY)+'px';
}
};
document.body.onmouseup = function(e) {
if(down) {
var newX = offset_X(el,e),
newY = offset_Y(el,e);
s.display = '';
if(newX<oX) { s.left = newX+'px'; }
if(newY<oY) { s.top = newY+'px'; }
s.width = Math.abs(newX-oX)+'px';
s.height = Math.abs(newY-oY)+'px';
alert('Départ : ('+oX+','+oY+')\nArrivée : ('+newX+','+newY+')');
}
down = false;
}
}
function offset_X(el,event){
if(event.offsetX) return event.offsetX;
var ox = -el.offsetLeft;
while(el=el.offsetParent){ ox += el.scrollLeft - el.offsetLeft; }
return event.clientX + ox;
}
function offset_Y(el,event){
if(event.offsetY) return event.offsetY;
var oy = -el.offsetTop;
while(el=el.offsetParent){ oy += el.scrollTop - el.offsetTop; }
return event.clientY + oy;
}
</script>
bonjour à tous,
en fait je dois faire une fonction qui me permet de sélectionner plusieurs zones d'une image et de récupérer les coordonnées dans un formulaire.
comme je suis débutant,j'ai regardé les codes sur internet et regarder sur les forums, quelqu'un m'a envoyé son code,le voici :
Cependant j'ai beau réfléchir je ne le comprend pas,c'est trop compliqué pour moi,j'essaye de récupérer les coordonnées des points du rectangle tracé à l'aide d'un formulaire html et d'un script php mais cela ne fonctionne pas,je ne récupère aucune valeur.
Est ce que quelqu'un pourrait m'aider svp?
merci d'avance
<script language="JavaScript" type="text/JavaScript">
window.onload=function() {
activate('mon_image');
};
function activate(id) {
var el = document.getElementById(id),
oX, oY, down = false,
div, s;
el.onmousedown = function(e) {
oX = offset_X(el,e);
oY = offset_Y(el,e);
down = true;
div = document.createElement('div');
s = div.style;
s.display = 'none';
s.position = 'absolute';
s.left = oX+'px';
s.top = oY+'px';
s.border = '2px solid #666666';
s.background='rgba(150,150,256,0.3)';
this.parentNode.appendChild(div);
if(e.preventDefault) { e.preventDefault(); }
else { e.returnValue = false; }
return false;
};
document.body.onmousemove = function(e) {
if(down) {
var newX = offset_X(el,e),
newY = offset_Y(el,e);
s.display = '';
if(newX<oX) { s.left = newX+'px'; }
if(newY<oY) { s.top = newY+'px'; }
s.width = Math.abs(newX-oX)+'px';
s.height = Math.abs(newY-oY)+'px';
}
};
document.body.onmouseup = function(e) {
if(down) {
var newX = offset_X(el,e),
newY = offset_Y(el,e);
s.display = '';
if(newX<oX) { s.left = newX+'px'; }
if(newY<oY) { s.top = newY+'px'; }
s.width = Math.abs(newX-oX)+'px';
s.height = Math.abs(newY-oY)+'px';
alert('Départ : ('+oX+','+oY+')\nArrivée : ('+newX+','+newY+')');
}
down = false;
}
}
function offset_X(el,event){
if(event.offsetX) return event.offsetX;
var ox = -el.offsetLeft;
while(el=el.offsetParent){ ox += el.scrollLeft - el.offsetLeft; }
return event.clientX + ox;
}
function offset_Y(el,event){
if(event.offsetY) return event.offsetY;
var oy = -el.offsetTop;
while(el=el.offsetParent){ oy += el.scrollTop - el.offsetTop; }
return event.clientY + oy;
}
</script>