//�������Х��ѿ������ var top_dif; // �ޥ����ݥ��󥿤Ȳ�����Y��ɸ�κ�ʬ var left_dif; // �ޥ��ݥ��󥿤Ȳ�����X��ɸ�κ�ʬ var outframe_pos; // ����ɽ�����ΰ�κ�ɸ��Ǽ���֥������� var inframe; // ������Ǽ�ΰ��div���� var outframe; // ����ɽ�����ΰ��div���� var image_width = 565; // ���������������� var image_height = 803; // �����������ʹ⤵�� var image_left_offset = 0; // �ǽ��ɽ����������ΰ��֥��ե��å� var image_top_offset = 0; // �ǽ��ɽ����������ΰ��֥��ե��å� function resizeImage(e) { // �ۥ�����������Ĵ�٤� var delta; if(window.event && window.event.wheelDelta) { delta = window.event.wheelDelta; } else if(e.wheelDalta) { delta = e.wheelDelta; } else { delta = e.detail; delta = delta * -1; } // �����Υ�������׻� var img = document.getElementById('img'); var w = img.width; var h = img.height; var re_w; if(delta > 0) { re_w = Math.round(w * 0.9); } else { re_w = Math.round(w * 1.1); } var re_h = Math.round(re_w * image_height / image_width); // ����ɽ�����֤򻻽� outframe_pos = getElemPos(outframe); var inframe_pos = getElemPos(inframe); var mouse_x; var mouse_y; if(e.wheelDalta && e.clientX && e.clientY) { mouse_x = e.clientX; mouse_y = e.clientY; } else { mouse_x = outframe_pos.x + Math.round( outframe.offsetWidth / 2 ); mouse_y = outframe_pos.y + Math.round( outframe.offsetHeight / 2 ); } var x_rate = Math.abs(mouse_x - inframe_pos.x) / w; var y_rate = Math.abs(mouse_y - inframe_pos.y) / h; var left_diff = mouse_x - Math.round( inframe_pos.x + ( re_w * x_rate ) ); var top_diff = mouse_y - Math.round( inframe_pos.y + ( re_h * y_rate ) ); var now_left = parseInt(inframe.style.left); var now_top = parseInt(inframe.style.top); // �������֤ΰ�ư inframe.style.left = (now_left + left_diff) + 'px'; inframe.style.top = (now_top + top_diff) + 'px'; // ������ꥵ���� img.width = re_w; img.height = re_h; // �Х֥�󥰤ȥǥե���ȥ��٥�ȥ������������ stopDefaultAndPropagation(e); return false; } // �Х֥�󥰤ȥǥե���ȥ��٥�ȥ������������ function stopDefaultAndPropagation(e) { // �Х֥����� if(e.stopPropagation) { e.stopPropagation(); } if(window.event) { window.event.cancelBubble = true; } // �ǥե���ȥ��٥�ȥ�����������ߤ��� if(e.preventDefault) { e.preventDefault(); } if(window.event) { window.event.returnValue = false; } } // �ɥ�å����� function dragStart(e) { // ����ɽ�����ΰ�div���Ǥκ�ɸ����� outframe_pos = getElemPos(outframe); // ������Ǽ�ΰ�div���Ǥκ�ɸ����� var pos = getElemPos(inframe); // ������Ǽ�ΰ�div���Ǥȥޥ����ݥ��󥿡��ΰ��֤κ�ʬ����� left_dif = e.clientX - pos.x; top_dif = e.clientY - pos.y; // �ɥ���������Τ˥��٥�ȥꥹ�ʡ��򥻥å� addListener(document, 'mousemove', moveElem, false); addListener(document, 'mouseup', dragEnd, false); // �Х֥�󥰤ȥǥե���ȥ��٥�ȥ������������ stopDefaultAndPropagation(e); return false; } // �ɥ�å���λ function dragEnd(e) { if(e.preventDefault) e.preventDefault(); // ���٥�ȥꥹ�ʡ���� removeListener(document, 'mousemove', moveElem, false); removeListener(document, 'mouseup', dragEnd, false); // �ޥ����ɥ�å��Υե饰��false�˥��å� dragging = false; // �Х֥�󥰤ȥǥե���ȥ��٥�ȥ������������ stopDefaultAndPropagation(e); return false; } // �ɥ�å���ʻҥ�����ɥ���ư�� function moveElem(e) { // �ޥ������֥饦����ɽ���ΰ褫�鳰�줿�齪λ if( (navigator.appName == 'Netscape' && navigator.userAgent.indexOf("Safari") < 0 ) || navigator.userAgent.indexOf("Opera") >= 0 ) { if( e.clientX >= window.innerWidth - 20 || e.clientX <= 10 || e.clientY >= window.innerHeight - 30 || e.clientY <= 10 ) { dragEnd(e); return false; } } // ������Ǽ�ΰ�div���Ǥΰ�ư inframe.style.left = (e.clientX - outframe_pos.x - left_dif) + 'px'; inframe.style.top = (e.clientY - outframe_pos.y - top_dif) + 'px'; // �Х֥�󥰤ȥǥե���ȥ��٥�ȥ������������ stopDefaultAndPropagation(e); return false; } // ���Ǥΰ��֤�����������֥������ȤȤ����֤� function getElemPos(elem) { var obj = new Object(); obj.x = elem.offsetLeft; obj.y = elem.offsetTop; while(elem.offsetParent) { elem = elem.offsetParent; obj.x += elem.offsetLeft; obj.y += elem.offsetTop; } return obj; } function getTargetNode(e) { // �о����Ǥλ��Ȥ���� var target_node; if(e.target) { target_node = e.target; } else { target_node = e.srcElement; } // Safari�к� if (target_node.nodeType == 3) { target_node = target_node.parentNode; } return target_node; } // load���ν��� function setListeners(e) { // ����ɽ�����ΰ�Ȳ�����Ǽ�ΰ��div���Ǥλ��Ȥ򥰥����Х��ѿ��˥��å� outframe = document.getElementById('outframe'); inframe = document.getElementById('inframe'); // ������Ǽ�ΰ�div�������img�����򥻥å� var img = document.createElement('img'); img.width = image_width; img.height = image_height; img.id = 'img'; img.src = 'http://api.site-builder.jp/flyer_img.php?fid=8&type=f'; inframe.appendChild(img); // ������Ǽ�ΰ�div���Ǥΰ��֤�Ĵ�� inframe.style.left = image_left_offset + 'px'; inframe.style.top = image_top_offset + 'px'; // ����ɽ�����ΰ�div���Ǥ�mousedown���٥�ȥꥹ�ʡ��򥻥å� addListener(outframe, 'mousedown', dragStart, false); // ����ɽ�����ΰ�div���ǤΥޥ����ۥ����륤�٥�ȤΥꥹ�ʡ��򥻥å� addMouseWheelListener(outframe, resizeImage, false); } // ���٥�ȥꥹ�ʡ���� function removeListener(elem, eventType, func, cap) { if(elem.removeEventListener) { elem.removeEventListener(eventType, func, cap); } else if(elem.detachEvent) { elem.detachEvent('on' + eventType, func); } } // �ޥ����ۥ����륤�٥�ȥꥹ�ʡ���Ͽ function addMouseWheelListener(elem, func, cap) { if(elem.addEventListener) { elem.addEventListener('DOMMouseScroll', func, cap); // FireFox�� elem.addEventListener('mousewheel', func, cap); // Safari�� } else if(elem.attachEvent) { elem.attachEvent("onmousewheel", func); // IE�� } } // ���٥�ȥꥹ�ʡ���Ͽ function addListener(elem, eventType, func, cap) { if(elem.addEventListener) { elem.addEventListener(eventType, func, cap); } else if(elem.attachEvent) { elem.attachEvent('on' + eventType, func); } else { alert('�����ѤΥ֥饦�����ϥ��ݡ��Ȥ���Ƥ��ޤ���'); return false; } } // load���Υ��٥�ȥꥹ�ʡ��򥻥åȤ��� addListener(window, 'load', setListeners, false);