Создание внутреннего дива

[веснушка]

Доброго времени суток, уважаемые форумчане!
столкнулась с такой проблемой:
есть картинка. по выделению области, как только пользователь отпустит мышь(т.е. на событие onmouseup) должен создаться новый див, в котором будут данные о выделенной области. просто alert не подходит

document.onmouseup = function() {
if ( activeImage ) {

var iRect = activeImage.getBoundingClientRect();
var sRect = activeSelection.getBoundingClientRect();

var X = ( sRect.left < startX ? sRect.left : startX ) - iRect.left;
var Y = ( sRect.top < startY ? sRect.top : startY ) - iRect.top;


activeSelection.innerHTML = '<div style='color:red; background-color: blue'>text</div>';

/*alert( [

'X: ' + X,
'Y: ' + Y,
'W: ' + activeSelection.offsetWidth,
'H: ' + activeSelection.offsetHeight
].join('\n') );*/
// ------------------------------


if ( activeSelection.parentNode ) {
activeSelection.parentNode.removeChild( activeSelection );
activeSelection.style.width = '0';
activeSelection.style.height = '0';
}
activeImage = null;
}
}

[lord2kim]

веснушка, заранее создайте div и помещайте туда соответствующие данные...
или div должен быть поверх страницы?

[веснушка]

поверх страницы. заранее нельзя создать, как я поняла.
а именно при mouseup его нужно создать и поместить туда данные

[lord2kim]

поверх страницы. заранее нельзя создать, как я поняла.
а именно при mouseup его нужно создать и поместить туда данные

function showTxt(content){
	newdiv = document.createElement('div');      
	newdiv.setAttribute('id', 'Div');      
	newdiv.onclick = function() { this.style.display = "none";};
	with (newdiv.style) {
		position="absolute";
		top="140px";
		left="100px";
		border="1px solid black";
		backgroundColor="#fff";
	}
	document.body.appendChild(newdiv);     
	newdiv.innerHTML = content; 
	newdiv.style.display = "";
}

[веснушка]

если не затруднит, подскажите, как сделать так, чтобы этот див появлялся в том месте, где была отпущена кнопка мыши?

и такой вопросик: если при клике на этот див у меня должен выпадать список, то это делать внутри функции showText?

[lord2kim]

если не затруднит, подскажите, как сделать так, чтобы этот див появлялся в том месте, где была отпущена кнопка мыши?

как то так

document.onmouseup = function(e) {
            if ( activeImage ) {
 
                var iRect = activeImage.getBoundingClientRect();
                var sRect = activeSelection.getBoundingClientRect();
 
                var shift = shiftScroll();
                var X = ( sRect.left + shift.X < startX ? sRect.left + shift.X : startX ) - iRect.left - shift.X;
                var Y = ( sRect.top + shift.Y < startY ? sRect.top + shift.Y : startY ) - iRect.top - shift.Y;
 
                e = fixEvent( e );
 
                var shift = shiftScroll();
                var rect = activeImage.getBoundingClientRect();
 
                var X1 = Math.max( e.pageX > startX ? startX : e.pageX, rect.left );
                var Y1 = Math.max( e.pageY > startY ? startY : e.pageY, rect.top );
                var W1 = Math.min( Math.abs( Math.max( X, e.pageX ) - startX ), rect.right + shift.X - X );
                var H1 = Math.min( Math.abs( Math.max( Y, e.pageY ) - startY ), rect.bottom + shift.Y - Y );
 
                // тут что-то открываем, делаем
                // ....
                /*alert( [
                    "src: " + activeImage.src + "\n",
                    "X: " + X,
                    "Y: " + Y,
                    "W: " + activeSelection.offsetWidth,
                    "H: " + activeSelection.offsetHeight
                ].join("\n") );*/
		showTxt([
                    "src: " + activeImage.src + "<br>",
                    "X: " + X + "<br>",
                    "Y: " + Y + "<br>",
                    "W: " + activeSelection.offsetWidth + "<br>",
                    "H: " + activeSelection.offsetHeight + "<br>"
                ], X1+W1, Y1+H1);
                // ------------------------------
 
                if ( activeSelection.parentNode ) {
                    activeSelection.parentNode.removeChild( activeSelection );
                    activeSelection.style.width = "0";
                    activeSelection.style.height = "0";
                }
                activeImage = null;
            }
        }

автор скрипта наверняка придумает решение получше...

и такой вопросик: если при клике на этот див у меня должен выпадать список, то это делать внутри функции showText?

не совсем понятна задача...
нужен select внутри div-a? нарисуйте его там
чтобы div не закрывался по нажатию на нем закоментируйте следующую строку

newdiv.onclick = function() { this.style.display = "none"; }

и создайте на div-e кнопку или картинку насобытие onClick которого(-ой) повесьте закоментированную функцию

[devote]

веснушка,
смотрите решение в прошлой своей теме: Обработка событий мыши при выделении области картинки я добавил туда всплывающее окошко.

[веснушка]

только у вас всплывающее окно все время в середине изображения, а нужно там, где была отпущена кнопка мыши(
просто у моего изображения есть полоса прокрутки, т.к. оно большое(так нужно по условию) и получается, что окно всплывает где-то далеко и надо прокрутить бегунок, чтобы его найти

[devote]

веснушка,
смотрите теперь, туда же в ту тему.

[веснушка]

devote,
простите, я вас совсем уже замучила, но есть еще вопрос(
если нужно на onmouseclick всплывающего окна повесить другую картинку, которая отобразиться в том же окне поверх прежней?