Нарисовать прямоугольник на картинке за мышью

[Sveta]

Здравствуйте! Простите если такой вопрос уже поднимался - не нашла((
Есть картинка <img> на страничке, на картинке карта мира.
Нужно чтобы можно было за мышью нарисовать прямоугольную область -
отлавливаю события onmousedown и onmouseup, а также отслеживаю положение курсора мыши.
Но я не знаю какими средствами рисовать прямоугольник между этими двумя событиями...
Может библиотеки есть какие и функции? Подскажите пожалуйста!

[ksa]

Но я не знаю какими средствами рисовать прямоугольник

В хтмл прямоугольник можно сделать простым ДИВом...

[Sveta]

дааа...вы имеете ввиду задать стиль

border

и переписовывать див при смещении мышки на каждый пиксель....как-то это геморно...див вообще наложиться на img? я думала есть способы рисования линий и прямоугольников...

[ksa]

как-то это геморно...

Добропожаловать в наш клуб.

див вообще наложиться на img?

Если правильно его создать и задать свойства в ЦСС...

я думала есть способы рисования линий и прямоугольников...

Если только все это на канвас...

[Sveta]

эх..наверно придется так действовать....Спасибо за идею!

[Sveta]

сделала!
Создаем три слоя - нижний картинка, средний - выделяемая прямоугольная область, верхний - отлов событий мыши.
Вот код:

<DIV id="map_image"			style="Z-INDEX: 0; POSITION: absolute; BACKGROUND-COLOR: #d0f0c0;     WIDTH: 720px; HEIGHT: 360px;   TOP: 1px;	CURSOR: crosshair;  layer-background-color: #7bc41e" ><IMG  src="myimg.jpg"/></DIV>
	<DIV id="selected_area"	style="Z-INDEX: 1; POSITION: absolute; WIDTH: 0px; HEIGHT: 0px;  TOP: 1px; 	LEFT: 0px;	BACKGROUND-COLOR: transparent; 	CURSOR: crosshair;  layer-background-color: transparent; border:  2px solid #ffccff;" ></DIV>
	<DIV id='mouse_events' name="mapimage"  onmouseup="processMouseUp(event)" onmousedown="clickCheck( event)" onmousemove="processMouseMove(event)" style="Z-INDEX: 2; POSITION: absolute; BACKGROUND-COLOR: transparent; WIDTH: 720px; HEIGHT: 360px;  TOP: 1px; CURSOR: crosshair;  layer-background-color: transparent" ></DIV>

function processMouseMove (evt) { 
		if(flag_select_area==1){//если пользователь нажал но еще не отпустил кнопку мыши
			var pixelX=ret_X(evt); 
			var pixelY=ret_Y(evt);	
			var div = document.getElementById("selected_area");
			if(pixelY >= startY_rect){	
				div.style.height = pixelY - startY_rect +"px";
				div.style.top = startY_rect+"px";
			} else {
				div.style.top = pixelY +"px";
				div.style.height = startY_rect - pixelY +"px";
			}	
			if(pixelX >= startX_rect){
				div.style.width = pixelX - startX_rect +"px";		
				div.style.left = startX_rect+"px";	
			} else {
				div.style.left = pixelX +"px";		
				div.style.width = startX_rect - pixelX +"px";	
			}
		}
		return;
	}
	
	
	//кнопка мыши нажата===========================================
	function clickCheck (evt) { 
	startX_rect=ret_X(evt);
	startY_rect=ret_Y(evt);
	if(evt.button == 3 || evt.button == 2 ) // right click
		   {return false ;}
	flag_select_area=1;	
	return true;
	}
		//кнопка мыши отпущена=============================================
	function processMouseUp (evt) {
		flag_select_area=0;
		if(evt.button == 3 || evt.button == 2 ) // right click
			   {return false ;}
		return true;
	}
function ret_X(evt){ //координаты курсора
	var pixelX;
		if (document.all){ //IE
			pixelX = evt.offsetX-sdvig_left;
		}
		else if (document.getElementById) { //for FF and Opera
			pixelX = evt.pageX-sdvig_left; 	
		}	
		
		return pixelX;
	}
	
	function ret_Y(evt){
		var pixelY;
		if (document.all){ //IE
				  pixelY = evt.offsetY;
		}
		else if (document.getElementById) { //for FF and Opera
				pixelY = evt.pageY;	
		}		
		
		return pixelY;
	}

[Sveta]

А еще есть библиотека готовая, но я не поняла как при ее использовании отлавливать события мыши, а так красиво работает, посмотрите если интересно:
http://marqueetool.net/examples/