Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.07.2012, 16:53
Аспирант
Отправить личное сообщение для веснушка Посмотреть профиль Найти все сообщения от веснушка
 
Регистрация: 12.07.2012
Сообщений: 35

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

Поняла, что нужно обработать события onmouseup, onmousedown и onmousemove.

с jscript на "Вы". подскажите, пожалуйста, с чего начать и как быть. буду благодарна за наводки!

да, делается все из студии, на шарпе. не знаю, важно это или нет.
Ответить с цитированием
  #2 (permalink)  
Старый 12.07.2012, 17:40
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<img src="http://files.sagotsky.com/wallpaper/wallpaper_little_big_planet_021.jpg" width="800" height="600" />
<div style="position: relative; top: 20px;">
	<img src="http://t.wallpaperweb.org/wallpaper/animals/1920x1200/Lion_with_cub.jpg" width="800" height="600" />
</div>
<script type="text/javascript">
    (function( window ) {

        var activeImage = null, startX = 0, startY = 0,
            activeSelection = document.createElement( 'div' ),
            html = document.documentElement,
            body = document.body,
            imgs = document.getElementsByTagName('img');

        activeSelection.style.cssText = "position:absolute; line-height:0; font-size:0; z-index: 100;"+
                             "background-color:#0f0; opacity: 0.3; filter:Alpha(opacity=30)";

        function msgBox( content, x, y, w, h ) {
            var img = activeImage,
                rect = img.getBoundingClientRect(),
                 box = document.createElement('div'),
                 bg = document.createElement('div'),
                close = document.createElement('div'),
                win = document.createElement('div');

            box.style.cssText = "z-index: 100; position: absolute; width: " +
                        ( rect.right - rect.left ) + "px; height: " +
                        ( rect.bottom - rect.top ) + "px;" +
                        "top: " + img.offsetTop + "px;"+
                        "left: " + img.offsetLeft + "px";

            bg.style.cssText = "background-color: #000; opacity: 0.3; filter: Alpha(opacity=30);"+
                        "position: absolute; width: 100%; height: 100%;";

            close.style.cssText = "position: absolute; top: 0; right: 0; margin: 2px 7px 0 0; font: 14px Tahoma; "+
                        "color: red; cursor: pointer; font-weight: bold;";
            close.innerHTML = "x";
            close.onclick = function() {
                img.parentNode.removeChild( box );
            }

            win.style.cssText = "padding: 15px; position: absolute; background-color: #fff;"+
                        "left: " + (typeof x =="undefined" ? "50%" : x + "px" ) + "; "+
                        "top: " + (typeof y =="undefined" ? "50%" : y + "px" ) + ";" +
                        "border-radius: 10px; box-shadow: 2px 2px 4px #000;" + 
                        ( w ? 'width: ' + w + 'px;' : '' ) + ( h ? 'height: ' + h + 'px;' : '' );

            win.innerHTML = content;

            win.onclick = function() {
                var image = new Image();
                image.onload = function() {
                    img.parentNode.removeChild( box );
                    img.src = image.src;
                }
                image.src = "http://dreaminginpictures.files.wordpress.com/2010/06/roses.jpg";
            }

            box.appendChild( bg );
            box.appendChild( win );
            win.appendChild( close );
            activeImage.parentNode.insertBefore( box, img );

            var ml = win.offsetWidth / 2;
            var mt = win.offsetHeight / 2;

            ml = win.offsetLeft - ml < 0 ? win.offsetLeft : ml;
            ml = ( win.offsetLeft - ml ) + win.offsetWidth > rect.right - rect.left ?
                  win.offsetWidth - ( rect.right - rect.left - win.offsetLeft ) : ml;

            mt = win.offsetTop - mt < 0 ? win.offsetTop : mt;
            mt = ( win.offsetTop - mt ) + win.offsetHeight > rect.bottom - rect.top ?
                  win.offsetHeight - ( rect.bottom - rect.top - win.offsetTop ) : mt;

            win.style.margin = "-" + mt + "px 0 0 -" + ml + "px";
        }

        function shiftScroll() {
            return {
                X: ( html && html.scrollLeft || body && body.scrollLeft || 0 ),
                Y: ( html && html.scrollTop || body && body.scrollTop || 0 )
            }
        }

        function fixEvent( e ) {

            e = e || window.event;

            if ( e.pageX == null && e.clientX != null ) {
                e.pageX = e.clientX + shiftScroll().X - ( html.clientLeft || 0 );
                e.pageY = e.clientY + shiftScroll().Y - ( html.clientTop || 0 );
            }

            if ( !e.which && e.button ) {
                e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) );
            }

            return e;
        }

        for( var i = 0; i < imgs.length; i++ ) {
            imgs[ i ].onselectstart = imgs[ i ].ondragstart = function() {
                return false;
            }
            imgs[ i ].onmousedown = function( e ) {

                e = fixEvent( e );

                activeImage = e.target || e.srcElement;
                body.insertBefore( activeSelection, body.firstChild );

                startX = e.pageX;
                startY = e.pageY;

                if ( e.preventDefault ) {
                    e.preventDefault();
                }
                e.returnValue = false;
            }
        }

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

                e = fixEvent( e );

                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;

                // тут что-то открываем, делаем
                // ....
                msgBox([
                    "src: " + activeImage.src + "<br />",
                    "X: " + X,
                    "Y: " + Y,
                    "W: " + activeSelection.offsetWidth,
                    "H: " + activeSelection.offsetHeight
                ].join("<br />"),
                    startX > e.pageX ? X : X + activeSelection.offsetWidth,
                    startY > e.pageY ? Y : Y + activeSelection.offsetHeight,
                    300
                );
                // ------------------------------

                if ( activeSelection.parentNode ) {
                    activeSelection.parentNode.removeChild( activeSelection );
                    activeSelection.style.width = "0";
                    activeSelection.style.height = "0";
                }
                activeImage = null;
            }
        }
        document.onmousemove = function( e ) {
            if ( activeImage ) {
                e = fixEvent( e );

                var shift = shiftScroll();
                var rect = activeImage.getBoundingClientRect();

                var X = Math.max( e.pageX > startX ? startX : e.pageX, rect.left + shift.X );
                var Y = Math.max( e.pageY > startY ? startY : e.pageY, rect.top + shift.Y );
                var W = Math.min( Math.abs( Math.max( X, e.pageX ) - startX ), rect.right + shift.X - X );
                var H = Math.min( Math.abs( Math.max( Y, e.pageY ) - startY ), rect.bottom + shift.Y - Y );

                activeSelection.style.left = X + "px";
                activeSelection.style.top = Y + "px";
                activeSelection.style.width = W + "px";
                activeSelection.style.height = H + "px";
            }
        }
    })( window );
</script>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 20.07.2012 в 10:23. Причина: Подправил код для ИЕ
Ответить с цитированием
  #3 (permalink)  
Старый 13.07.2012, 09:08
Аспирант
Отправить личное сообщение для веснушка Посмотреть профиль Найти все сообщения от веснушка
 
Регистрация: 12.07.2012
Сообщений: 35

спасибо большое!
скажите, а если этот код скопировать в блокнот и сохранить как <name>.html он будет работать как здесь в примере на сайте? а то я так сделала, открываю mozilla, картинка есть, а выделение не происходит(
Ответить с цитированием
  #4 (permalink)  
Старый 13.07.2012, 09:11
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Сообщение от веснушка Посмотреть сообщение
спасибо большое!
скажите, а если этот код скопировать в блокнот и сохранить как <name>.html он будет работать как здесь в примере на сайте? а то я так сделала, открываю mozilla, картинка есть, а выделение не происходит(
все работает, только что проверил...в IE не совсем корректно, а в FireFox и GoogleChrome все летает
Ответить с цитированием
  #5 (permalink)  
Старый 13.07.2012, 09:25
Аспирант
Отправить личное сообщение для веснушка Посмотреть профиль Найти все сообщения от веснушка
 
Регистрация: 12.07.2012
Сообщений: 35

и вы вообще ничего не меняли? просто копи-паст сделали в блокнот и все?
Ответить с цитированием
  #6 (permalink)  
Старый 13.07.2012, 09:26
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Сообщение от веснушка Посмотреть сообщение
и вы вообще ничего не меняли? просто копи-паст сделали в блокнот и все?
так точно) какой у вас браузер? (желательно с версией)
Ответить с цитированием
  #7 (permalink)  
Старый 13.07.2012, 09:28
Аспирант
Отправить личное сообщение для веснушка Посмотреть профиль Найти все сообщения от веснушка
 
Регистрация: 12.07.2012
Сообщений: 35

Mozilla Firefox 13.0.1
Ответить с цитированием
  #8 (permalink)  
Старый 13.07.2012, 09:33
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Сообщение от веснушка Посмотреть сообщение
Mozilla Firefox 13.0.1
да не ну все работает...может вы вместе с цифарками скопировали в начале каждой строки?
Ответить с цитированием
  #9 (permalink)  
Старый 13.07.2012, 09:38
Аспирант
Отправить личное сообщение для веснушка Посмотреть профиль Найти все сообщения от веснушка
 
Регистрация: 12.07.2012
Сообщений: 35

нет, я при удалении цифирок удалила лишнее просто
спасибо большое!)

в мозилле и хроме и правда работает. а что не так с explorer? не объясните мне? :-[

Последний раз редактировалось веснушка, 13.07.2012 в 09:41.
Ответить с цитированием
  #10 (permalink)  
Старый 13.07.2012, 09:40
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Сообщение от веснушка Посмотреть сообщение
нет, я при удалении цифирок удалила лишнее просто
спасибо большое!)
когда наводите мышкой на фрагмент кода обрамленный тегами [html] или [JS], как у devote, на этом форуме, сверху справа появляется "менюшка", в которой можно отключить эти цифарки (с помощью иконки с единичкой)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отписать блок от событий мыши Urchin Общие вопросы Javascript 11 05.03.2013 08:52
Проблема с заключение картинки в ссылку. Iktash Элементы интерфейса 6 14.12.2012 09:37
Обработка ошибок при асинхронном выполнении в JavaScript Mirror13 Общие вопросы Javascript 0 29.04.2012 17:19
Изменение картинки при ховере на ссылку DImaN Общие вопросы Javascript 0 25.12.2008 12:13
FireFox: onmouseover не работает при зажатой кнопке мыши no. Общие вопросы Javascript 4 19.08.2008 13:43