select a region

helllo is it possible with javascript to select a region
I want somthing like the multiple select area for the icons on the windows desktop

Is that possible?

Thanks,
ferry
LVL 1
ferrylAsked:
Who is Participating?
 
lil_puffballConnect With a Mentor Commented:
Something like this maybe:

<script>
document.
onmousedown=startSelect;
document.onmouseup=endSelect;
document.onmousemove=captureMouse;
document.onclick=deleteSelect;

var select=document.createElement("div"),x,y,sX,sY,drag=false;
select.style.position="absolute";
select.style.borderWidth=1;
select.style.borderColor="316ac5";
select.style.borderStyle="solid";
select.style.backgroundColor=select.style.borderColor;
select.style.filter="alpha(opacity=50)";

function deleteSelect(){if(select.parentNode)select.parentNode.removeChild(select);}
function startSelect(){
  select.style.top=y;select.style.left=x;
  sX=x;sY=y;
  select.style.height=0;select.style.width=0;
  document.body.appendChild(select);
  drag=true;
}
function dragSelect(){
  select.style.width=Math.abs(x-sX);
  if(x>sX){
select.style.left=sX;}
  else{select.style.left=x;}
  select.style.height=Math.abs(y-sY);
  if(y>sY){
select.style.top=sY;}
  else{select.style.top=y;}
}
function endSelect(){
  drag=false;
}

function captureMouse(e){
  if(document.all){
    x=window.event.x+document.body.scrollLeft;
    y=window.event.y+document.body.scrollTop;
  }else if(document.getElementById||document.layers){
    x=e.pageX;
    y=e.pageY;
  }
  if(drag){dragSelect();}
}
</script>

<style>
.icon{height:50;width:50;border-width:1;border-color:black;border-style:solid;}
</style>

<div class=icon>Icon 1</div>
<br>
<div class=icon>Icon 2</div>
<br>
<div class=icon>Icon 3</div>
<br>
<div class=icon>Icon 4</div>
0
 
ferrylAuthor Commented:
thanks a lot!
0
 
lil_puffballCommented:
No problem. :) Thanks for the points and the A!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.