Added by thebman220 on July-4-2008, 11:02 pm
/**
* To make this work (as it's currently written) activate it like this:
* <a href="some_image.jpg" target="_new"
* onMouseOver="display(this);"
* onMouseOut ="hide(this);">Image</a>
*/
const WINDOW_WIDTH=window.innerWidth?
window.innerWidth:
parent.document.body.clientWidth;
const WINDOW_HEIGHT=window.innerHeight?
window.innerHeight:
parent.document.body.clientHeight;
const ns=(document.layers)?true:false;
const ie=(document.all)?true:false;
const w3=(document.getElementById)&&(!ie);
var imgbox;
function img_box(id) {
img_box.MAX_OFFSET_X=50;
img_box.MAX_OFFSET_Y=50;
img_box.MAX_WIDTH=300;
img_box.MAX_HEIGHT=300;
img_box.MAX_STEP=50;
img_box.DEF_OFFSET_X=5;
img_box.DEF_OFFSET_Y=5;
img_box.DEF_STEP=1;
var yOffset;
var mouseOver;
var mouseOffsetX;
var mouseOffsetY;
var mouseStep;
var width;
var height;
var moveIntervalID;
var container;
// call to "construct()" at bottom ("not defined" errors)
img_box.prototype.setContainer=function(argv,forceReset) {
if (typeof forceReset=="boolean"&&forceReset) {
container=null;
}
var type=(typeof argv);
if (type="object"&&typeof argv.innerHTML!="undefined") {
container=argv;
} else if (type=="string"||type=="number") {
container=get_by_id(id);
}
if (container==null) {
container=document.createElement("div");
container.style.position="absolute";
if (type!="undefined") {
container.id=id;
}
document.body.appendChild(container);
}
}
img_box.prototype.setImgContent=function(src) {
var img=document.createElement("img");
img.src=src;
var constraints=constrainWH(img.width ,width,
img.height,height);
img.width =constraints[0];
img.height=constraints[1];
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(img);
}
img_box.prototype.setStep=function(s) {
mouseStep=s;
}
img_box.prototype.getStep=function() {
return mouseStep;
}
img_box.prototype.setOffset=function(o) {
var x=mouseOffsetX;
if (!(img_box.prototype.setOffsetX(o)&&img_box.prototype.setOffsetY(o))) {
mouseOffsetX=x;
return false;
}
return true;
}
img_box.prototype.setOffsetX=function(o) {
if (o<0||o>MAX_OFFSET_X) {return false;}
mouseOffsetX=o;
return true;
}
img_box.prototype.getOffsetX=function() {
return mouseOffsetX;
}
img_box.prototype.setOffsetY=function(o) {
if (o<0||o>MAX_OFFSET_Y) {return false;}
mouseOffsetY=o;
return true;
}
img_box.prototype.getOffsetY=function() {
return mouseOffsetY;
}
img_box.prototype.setDims=function(o) {
var w=width;
if (!(img_box.prototype.setWidth(o)&&img_box.prototype.setHeight(o))) {
width=w;
return false;
}
return true;
}
img_box.prototype.setWidth=function(o) {
if (o<0||o>MAX_WIDTH) {return false;}
width=o;
return true;
}
img_box.prototype.getWidth=function() {
return width;
}
img_box.prototype.setHeight=function(o) {
if (o<0||o>MAX_HEIGHT) {return false;}
height=o;
return true;
}
img_box.prototype.getHeight=function() {
return height;
}
img_box.prototype.startMove=function(src) {
beginXYcapture();
img_box.prototype.setImgContent(src);
mouseOver=true;
img_box.prototype.moveContainerToMouse();
img_box.prototype.showContainer();
moveIntervalID=window.setInterval(img_box.prototype.moveContainerToMouse,25);
}
img_box.prototype.endMove=function() {
if (moveIntervalID!="") {
window.clearInterval(moveIntervalID);
}
moveIntervalID="";
img_box.prototype.hideContainer();
endXYcapture();
mouseOver=false;
container.innerHTML="";
img_box.prototype.moveContainerToStart();
}
img_box.prototype.showContainer=function() {
try {
container.style.display='block';
container.style.visibility='visible';
} catch (err1) {
return false;
}
return true;
}
img_box.prototype.hideContainer=function() {
try {
container.style.display='none';
container.style.visibility='hidden';
} catch(err1) {
return false;
}
return true;
}
img_box.prototype.moveContainerToMouse=function() {
if (!mouseOver) {
return;
}
var divWidth =parseInt(container.offsetWidth);
var divHeight=parseInt(container.offsetHeight);
var x=X;
var y=Y;
var yMod=y-(y%mouseStep);
var xMod=x-(x%mouseStep);
var newLeft=xMod+mouseOffsetX;
var newTop =yMod+mouseOffsetY;
if (newLeft+divWidth>WINDOW_WIDTH) {
newLeft=xMod-(mouseOffsetX+divWidth);
}
if (newTop+divHeight>WINDOW_HEIGHT) {
newTop=yMod-(mouseOffsetY+divHeight);
}
container.style.left=newLeft+'px';
container.style.top =newTop+'px';
}
img_box.prototype.moveContainerToStart=function() {
container.style.left=0+'px';
container.style.top =0+'px';
}
function construct(id) {
mouseOver=false;
mouseOffsetX=img_box.DEF_OFFSET_X;
mouseOffsetY=img_box.DEF_OFFSET_Y;
mouseStep=img_box.DEF_STEP;
width=img_box.MAX_WIDTH;
height=img_box.MAX_HEIGHT;
moveIntervalID="";
img_box.prototype.setContainer(id);
var temp=0;
if (ie) {
temp=document.body.scrollTop;
} else if (ns) {
temp=window.pageYOffset;
} else if (w3) {
temp=pageYOffset;
}
yOffset=parseInt(temp);
}
construct(id);
}
// USED FOR X/Y CAPTURE
xyChange=false;
X=0;
Y=0;
ie=(document.all)?true:false;
function setMouseXY(e) {
var tempX;
var tempY;
if (ie) {
tempX=window.event.clientX+document.body.scrollLeft;
tempY=window.event.clientY+document.body.scrollTop;
} else {
tempX=e.pageX;
tempY=e.pageY;
}
if (tempY<0) {tempX=0;}
if (tempY<0) {tempY=0;}
if (X!=tempX||Y!=tempY) {
xyChange=true;
}
X=tempX;
Y=tempY;
return true;
}
function XYchanged() {
var ret=xyChange;
xyChange=false;
return ret;
}
function beginXYcapture() {
if (!ie) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=setMouseXY;
}
function endXYcapture() {
document.onmousemove=null;
}
// END X/Y CAPTURE USE
function get_by_id(id) {
return document.getElementById?document.getElementById(id):
document.all?document.all[id]:0;
}
function constrainWH(width,maxWidth,height,maxHeight) {
var divider;
if (width>maxWidth&&width!=0) {
divider=width/maxWidth;
width/=divider;
height/=divider;
}
if (height>maxHeight&&height!=0) {
divider=height/maxHeight;
width/=divider;
height/=divider;
}
return [Math.round(width),Math.round(height)];
}
window.onload=function() {
imgbox=new img_box('imgbox');
imgbox.endMove();
}
function display(elem) {
imgbox.startMove(elem.href);
}
function hide() {
imgbox.endMove();
}
Added by thebman220 on October-2-2008, 7:29 pm
Added by thebman220 on September-28-2008, 5:24 pm
Added by thebman220 on July-9-2008, 11:31 pm
Added by thebman220 on July-5-2008, 12:50 am
Added by thebman220 on July-5-2008, 12:03 am