Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.11.2009, 13:21
Интересующийся
Отправить личное сообщение для EmDmAl Посмотреть профиль Найти все сообщения от EmDmAl
 
Регистрация: 06.11.2009
Сообщений: 17

Получение координат от картинки
Здравствуйте. Имеется скрипт увеличния картинки, я его тестирую по адресу http://enspm.su/new/. При наведении на картинку в полосе прокрутки она увеличивается не с места картинки, а с верху, это из-за того что используются в css контейнеры div, я изменял в стилях поля div и нашел решение исрользовать именно все так. НО я хочу чтобы каринка начиналась увеличиваться с самой картинки (файл обработчик image_zoomref.js), для этого необходимо передавать в этот файл местоположение картинки или хотябы чтобы приблизительно открывалось в том месте (местоположение курсора события this.oThumb.onclick = function() { this.expander.expand();}). Необходимо пихать координаты в 78 строку this.x = this.oThumb.x; и в 157 строку this.oDiv.style.left = this.x + "px";. Но у меня ничего получалось, подскажите как это грамотно сделать?
function ImageExpander(oThumb, sImgSrc)
{
        // store thumbnail image and overwrite its onclick handler.
        this.oThumb = oThumb;
        this.oThumb.expander = this;
        this.oThumb.onclick = function() { this.expander.expand(); }
        
        // record original size
        this.smallWidth = oThumb.offsetWidth;
        this.smallHeight = oThumb.offsetHeight; 
 
        this.bExpand = true;
        this.bTicks = false;
        
        // self organized list
        if ( !window.aImageExpanders )
        {
                window.aImageExpanders = new Array();
        }
        window.aImageExpanders.push(this);
 
        // create the full sized image.
        this.oImg = new Image();
        this.oImg.expander = this;
        this.oImg.onload = function(){this.expander.onload();}
        this.oImg.src = sImgSrc;
}
 
ImageExpander.prototype.onload = function()
{
        this.oDiv = document.createElement("div");
        document.body.appendChild(this.oDiv);
        this.oDiv.appendChild(this.oImg);
        this.oDiv.style.position = "absolute";
        this.oDiv.expander = this;
        this.oDiv.onclick = function() {this.expander.toggle();};
        this.oImg.title = "Click to reduce.";
        this.bigWidth = this.oImg.width;
        this.bigHeight = this.oImg.height;
        
        if ( this.bExpand )
        {
                this.expand();
        }
        else
        {
                this.oDiv.style.visibility = "hidden";
                this.oImg.style.visibility = "hidden";
        }
}
ImageExpander.prototype.toggle = function()
{
        this.bExpand = !this.bExpand;
        if ( this.bExpand )
        {
                for ( var i in window.aImageExpanders )
                        if ( window.aImageExpanders[i] !== this )
                                window.aImageExpanders[i].reduce();
        }
}
ImageExpander.prototype.expand = function()
{
        // set direction of expansion.
        this.bExpand = true;
 
        // set all other images to reduce
        for ( var i in window.aImageExpanders )
                if ( window.aImageExpanders[i] !== this )
                        window.aImageExpanders[i].reduce();
 
        // if not loaded, don't continue just yet
        if ( !this.oDiv ) return;
        
        // hide the thumbnail
        this.oThumb.style.visibility = "visible";
        var xd = '200';
        // calculate initial dimensions
        this.x = this.oThumb.x;
        this.y = this.oThumb.y;
        this.w = this.oThumb.clientWidth;
        this.h = this.oThumb.clientHeight;
        
        this.oDiv.style.left = this.x + "px";
        this.oDiv.style.top = this.y + "px";
        this.oImg.style.width = this.w + "px";
        this.oImg.style.height = this.h + "px";
        this.oDiv.style.visibility = "visible";
        this.oImg.style.visibility = "visible";
        
        // start the animation engine.
        if ( !this.bTicks )
        {
                this.bTicks = true;
                var pThis = this;
                window.setTimeout(function(){pThis.tick();},25);        
        }
}
ImageExpander.prototype.reduce = function()
{
        // set direction of expansion.
        this.bExpand = false;
}
ImageExpander.prototype.tick = function()
{
        // calculate screen dimensions
        var cw = document.body.clientWidth;
        var ch = document.body.clientHeight;
        var cx = document.body.scrollLeft + cw / 2;
        var cy = document.body.scrollTop + ch / 2;
 
        // calculate target
        var tw,th,tx,ty;
        if ( this.bExpand )
        {
                tw = this.bigWidth;
                th = this.bigHeight;
                if ( tw > cw )
                {
                        th *= cw / tw;
                        tw = cw;
                }       
                if ( th > ch )
                {
                        tw *= ch / th;
                        th = ch;
                }
                tx = cx - tw / 2;
                ty = cy - th / 2; 
        }
        else
        {
                tw = this.smallWidth;
                th = this.smallHeight;
                tx = this.oThumb.x;
                ty = this.oThumb.y;
        }       
        // move 5% closer to target
        var nHit = 0;
        var fMove = function(n,tn) 
        {
                var dn = tn - n;
                if ( Math.abs(dn) < 3 )
                {
                        nHit++;
                        return tn;
                }
                else
                {
                        return n + dn / 10;
                }
        }
        this.x = fMove(this.x, tx);
        this.y = fMove(this.y, ty);
        this.w = fMove(this.w, tw);
        this.h = fMove(this.h, th);
        
        this.oDiv.style.left = this.x + "px";
        this.oDiv.style.top = this.y + "px";
        this.oImg.style.width = this.w + "px";
        this.oImg.style.height = this.h + "px";
 
        // if reducing and size/position is a match, stop the tick      
        if ( !this.bExpand && (nHit == 4) )
        {
                this.oImg.style.visibility = "hidden";
                this.oDiv.style.visibility = "hidden";
                this.oThumb.style.visibility = "visible";
 
                this.bTicks = false;
        }
        
        if ( this.bTicks )
        {
                var pThis = this;
                window.setTimeout(function(){pThis.tick();},25);
        }
}
Ответить с цитированием
  #2 (permalink)  
Старый 07.11.2009, 10:18
Интересующийся
Отправить личное сообщение для EmDmAl Посмотреть профиль Найти все сообщения от EmDmAl
 
Регистрация: 06.11.2009
Сообщений: 17

Господа забудьте о выше приведенном, подскажите:
пытаюсь получить и вывести на экран координаты кортинки относительно верхнего левого угла, но мне выдает 0, тоесть как я понял никаких действий по подсчету координат он невидет, объясните почему, пожалуйста.
<img src="images/flamingo_sm.jpg" id="Idnew" border="0" onClick="new ImageExpander(this, 'images/flamingo.jpg', top);"></a>
<script language="javascript">
var Idnew = document.getElementById('Idnew');
var funct1 = function (Idnew)
{
    var curleft = curtop = 0;
    if (Idnew.offsetParent) {
        curleft = Idnew.offsetLeft
        curtop = Idnew.offsetTop
        while (Idnew = Idnew.offsetParent) {
            curleft += Idnew.offsetLeft
            curtop += Idnew.offsetTop
        }
    }
	alert(curleft);
//alert(event.pageY);
}
Idnew.addEventListener("click", funct1, false);
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 07.11.2009, 16:02
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Idnew.addEventListener("click", function() {funct1(Idnew)}, false);
Ответить с цитированием
  #4 (permalink)  
Старый 07.11.2009, 21:47
Интересующийся
Отправить личное сообщение для EmDmAl Посмотреть профиль Найти все сообщения от EmDmAl
 
Регистрация: 06.11.2009
Сообщений: 17

Riim,
Огромное спасибо.
Ответить с цитированием
  #5 (permalink)  
Старый 08.11.2009, 14:34
Интересующийся
Отправить личное сообщение для EmDmAl Посмотреть профиль Найти все сообщения от EmDmAl
 
Регистрация: 06.11.2009
Сообщений: 17

С верхним примером я разобрался, но неработает в IE скрипт увеличения картинки. После фотографий вставил:
<script language="javascript">
		var Idnew = document.getElementById('Idnew');
		var funct1 = function (Idnew)
		{
   		 var curleft = curtop = 0;
    	if (Idnew.offsetParent) {
        curleft = Idnew.offsetLeft
        curtop = Idnew.offsetTop
        while (Idnew = Idnew.offsetParent) {
            curleft += Idnew.offsetLeft
            curtop += Idnew.offsetTop
        }
   		 }
//alert(event.pageY);
}
Idnew.addEventListener("load", function() {funct1(Idnew)}, false);

в image_zoomref.js подредактировал:
this.x = this.oThumb.x + 442;
this.y = this.oThumb.y + curtop;.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинки (бекграунд дива ) при событии (нажатие клавиш или клавиши и мыши) Monster Events/DOM/Window 5 01.11.2009 01:16
Координаты картинки после движения Lisenok Общие вопросы Javascript 10 30.10.2009 19:58
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42
Смена картинки при перезагрузке + наведении Мария Элементы интерфейса 2 22.08.2009 14:57
Получение координат изображения Гость Общие вопросы Javascript 4 08.04.2008 19:50