Hiya I am a total JS noob, but recently downloaded a fantastic script called manifimage.js(code below). The problem is that when hovering over the image, depending on where you hover the image will flip on to the opposite side of the cursor. Can anyone say by briefly looking at this code what will make it just stick to the left no matter where you hover over the thumbnail image? Thanks var MagnifImage= { data:[], x:0, y:0, xDisp:0, yDisp:0, m$:/*@cc_on!@*/false, portWidth:0, portHeight:0, isViable:typeof document.getElementsByTagName!='undefined', dataCode:0, firstCall:true, blinkFlag:false, useHorizontal:false, currentDisplayedIndex:-1, imgPreload:true, mouseUsed:true, trigElem:null, cursorOffset:25, overTimer:null, outTimer:null, picHolder:null, logged:0, setup:function() { var paramGroup=3, imgW="NaN", imgH="NaN"; if(this.isViable) { if(this.firstCall) { this.firstCall=false;if(!this.cont)this.cont=function(){}; this.addToHandler(document, 'onmousemove', function(){MagnifImage.getMouseAndScrollData(arguments[0]);}); } if( document.documentElement ) this.dataCode=3; else if(document.body && typeof document.body.scrollTop!='undefined') this.dataCode=2; else if( typeof window.pageXOffset!='undefined' ) this.dataCode=1; var i=this.data.length, len=arguments.length, j=Math.pow(10,10); try{j=this.cont()?0:len}catch(e){j=len} for(var idParts, sizeData, objRef; j<len; i++, j+=paramGroup) { objRef=this.data[i]={}; idParts=arguments[j].split(':'); if( !(objRef.trigElem=document.getElementById( idParts[0] )) ) alert("There is no element with the ID:'"+idParts[0]+"'\n\nCase must match exactly\n\nElements must be located ABOVE the script initialisation.'"); else { if(objRef.trigElem.parentNode && objRef.trigElem.parentNode.tagName=='A') objRef.trigElem=objRef.trigElem.parentNode; objRef.classId=idParts[1] || "MagnifImage" ; objRef.imgObj=new Image(); if( (sizeData=arguments[j+1].replace(/\s/g,'').split(",")).length==3 ) { for(var ii=0; ii<sizeData.length; ii++) sizeData[ii]=sizeData[ii].replace(/^\s|\s$/g,''); objRef.imgObj.imgW=Number(sizeData[1]); objRef.imgObj.imgH=Number(sizeData[2]); } objRef.imgObj.imgIndex=i; objRef.imgObj.hasLoaded=0; if(!isNaN(objRef.imgObj.imgW) && !isNaN(objRef.imgObj.imgH)) objRef.imgObj.hasLoaded=1; else objRef.imgObj.onload=function() { this.trueWidth=this.width; this.trueHeight=this.height; this.onload=null; this.hasLoaded=1; if(this.imgIndex==MagnifImage.currentDisplayedIndex) MagnifImage.display(this.imgIndex, true); } this.data[i].imgObj.onerror=function() { this.hasLoaded=-1; if(this.imgIndex==MagnifImage.currentDisplayedIndex) MagnifImage.display(this.imgIndex, true); } objRef.imgObj.sourceFile=sizeData[0]; if(this.imgPreload) objRef.imgObj.src=sizeData[0]; objRef.titleText=arguments[j+2]; this.addToHandler(objRef.trigElem, 'onmouseover', new Function("clearTimeout(MagnifImage.outTimer);MagnifImage.overTimer=setTimeout('MagnifImage.display("+i+",true)',400)")); this.addToHandler(objRef.trigElem, 'onfocus', function(){MagnifImage.mouseUsed=false;MagnifImage.trigElem=this;MagnifImage.getElemPos(this);this.onmouseover()}); this.addToHandler(objRef.trigElem, 'onmouseout', new Function("clearTimeout(MagnifImage.overTimer);MagnifImage.display("+i+",false)")); this.addToHandler(objRef.trigElem, 'onblur', function(){MagnifImage.getElemPos(this);this.onmouseout()}); } } } }, display:function(objIndex, action) { clearInterval(this.blinkTimer); var img=this.data[objIndex].imgObj, classId=this.data[objIndex].classId; if(this.mainDiv) this.removeDiv(); if(action) { this.getScreenData(); if(this.portWidth) this.portWidth-=16; if(this.portHeight) this.portHeight-=16; this.mainDiv=document.createElement('div'); var titleSpan=document.createElement('div'); titleSpan.style.lineHeight='1.2em'; titleSpan.className=classId+'Title'; this.picHolder=img.hasLoaded==1 ? this.data[objIndex].imgObj : document.createElement('div'); if(img.hasLoaded == -1 || (img.hasLoaded==0 && !img.imgW)) { this.picHolder.appendChild(document.createTextNode(img.hasLoaded==0?'Loading Image':'Image Not Available - Please Report')); this.picHolder.style.backgroundColor=img.hasLoaded==0 ? '#0c0' : '#f00'; this.picHolder.style.color='#fff'; this.picHolder.style.textAlign='center'; this.picHolder.style.lineHeight='1em'; this.picHolder.style.padding='1em'; if(img.hasLoaded==0) this.blinkTimer=setInterval("MagnifImage.blink()", 600); if(img.hasLoaded != -1) img.src=img.sourceFile; } else { if( img.imgH && img.imgW ) { this.picHolder.trueWidth=this.picHolder.width=img.imgW; this.picHolder.trueHeight=this.picHolder.height=img.imgH; this.picHolder.alt="LOADING..." } this.data[objIndex].imgObj.src=img.sourceFile; } this.mainDiv.style.position='absolute'; this.mainDiv.style.top="0"; this.mainDiv.style.left="0"; this.mainDiv.style.visibility='hidden'; this.mainDiv.style.zIndex='100000'; this.mainDiv.style.lineHeight='0'; this.mainDiv.className=classId; if(this.data[objIndex].titleText!="") { titleSpan.appendChild(document.createTextNode(this.data[objIndex].titleText)); titleSpan.style.position='relative'; titleSpan.style.display='block'; this.mainDiv.appendChild(titleSpan); } this.mainDiv.appendChild(this.picHolder); this.computePosition(this.mainDiv); document.body.appendChild(this.mainDiv); this.computePosition(this.mainDiv); this.mainDiv.style.visibility='visible'; this.currentDisplayedIndex=objIndex; } else this.currentDisplayedIndex = -1; }, removeDiv:function() { document.body.removeChild(this.mainDiv); if(this.mainDiv) this.mainDiv=null; }, blink:function() { this.picHolder.style.color=(this.blinkFlag^=true)?'#fff':'#0c0'; }, reduce:function(elem, dims, elemX, elemY) { var wDiff=0,hDiff=0,wRatio,hRatio,shrink,thePic=elem.lastChild, tempDim, changeData={h:0, w:0}; elem.eHeight=elem.offsetHeight; elem.eWidth=elem.offsetWidth; if(thePic.width && thePic.width>0 && thePic.height && thePic.height>0) { changeData.h=thePic.height; changeData.w=thePic.width; hDiff=elem.eHeight-dims.height; wDiff=elem.eWidth-dims.width; shrink = 1- ( hDiff > wDiff ? (hDiff/thePic.height) : (wDiff/thePic.width) ); tempDim=thePic.height; thePic.width=Math.floor(Math.min(parseInt(thePic.width,10)*shrink, thePic.trueWidth)); if(tempDim == thePic.height) thePic.height=Math.floor(Math.min(parseInt(thePic.height,10)*shrink, thePic.trueHeight)); if(thePic!=elem.firstChild) elem.firstChild.style.width=thePic.width+'px'; changeData.h = thePic.height - changeData.h; changeData.w = thePic.width - changeData.w; } return changeData; }, getElemPos:function(elem) { var left = !!elem.offsetLeft ? elem.offsetLeft : 0; var top = !!elem.offsetTop ? elem.offsetTop : 0; while(elem = elem.offsetParent) { left += !!elem.offsetLeft ? elem.offsetLeft : 0; top += !!elem.offsetTop ? elem.offsetTop : 0; } this.x=left; this.y=top; }, computePosition:function(elem) { var reduceOffset={h:0,w:0}; elem.eHeight=elem.offsetHeight; elem.eWidth=elem.offsetWidth; var left=false, above=false; if(!this.mouseUsed) { this.readScrollData(); this.getElemPos(this.trigElem); this.x=this.xDisp; this.y=this.yDisp; } left=(this.x > (this.xDisp + this.portWidth/2)); above=(this.y > (this.yDisp + this.portHeight/2)); var vRectData= { top: this.yDisp, left: left ? this.xDisp: this.x+this.cursorOffset, right: left ? this.x-this.cursorOffset : this.xDisp+this.portWidth, bottom: this.yDisp+this.portHeight, containableArea:0, width:0, height:0 }; var hRectData= { top: above?this.yDisp:this.y+this.cursorOffset, left: this.xDisp, right: this.xDisp+this.portWidth, bottom: above?this.y-this.cursorOffset:this.yDisp+this.portHeight, containableArea:0, width:0, height:0 }; with(vRectData) containableArea=Math.min(height=(bottom-top), elem.eHeight) * Math.min(width=(right-left), elem.eWidth); with(hRectData) containableArea=Math.min(height=(bottom-top), elem.eHeight) * Math.min(width=(right-left), elem.eWidth); this.useHorizontal=hRectData.containableArea > vRectData.containableArea; reduceOffset=this.reduce(elem, this.useHorizontal?hRectData:vRectData); var halfHeight=elem.eHeight/2, halfWidth=elem.eWidth/2; if(this.useHorizontal) { this.mainDiv.style.left= (this.x-halfWidth) + ((this.x-halfWidth<hRectData.left && this.x+halfWidth<hRectData.right) //left o/f but no right o/f ? Math.min( Math.abs(this.x+halfWidth-hRectData.right), Math.abs(this.x-halfWidth-hRectData.left)) //min of add right gap and left o/f : ( this.x+halfWidth > hRectData.right && hRectData.left < this.x-halfWidth) //right o/f but no left o/f ? -Math.min(Math.abs(this.x-halfWidth-hRectData.left),Math.abs(this.x+halfWidth-hRectData.right)) : 0) +'px'; this.mainDiv.style.top=(above ? (hRectData.bottom-elem.eHeight) : hRectData.top)+'px'; } else { this.mainDiv.style.left=(left ? vRectData.right-elem.eWidth : vRectData.left) +'px'; this.mainDiv.style.top = (this.y-halfHeight) + ((this.y-halfHeight<vRectData.top && this.y+halfHeight<vRectData.bottom) //top o/f but no bottom o/f ? Math.min( Math.abs(this.y+halfHeight-vRectData.bottom), Math.abs(this.y-halfHeight-vRectData.top)) //min of add bottom gap and top o/f : ( this.y+halfHeight > vRectData.bottom && vRectData.top < this.y-halfHeight) //bottom o/f but no top o/f ? -Math.min(Math.abs(this.y-halfHeight-vRectData.top),Math.abs(this.y+halfHeight-vRectData.bottom)) : 0) +'px'; //subtract smaller of gap or o/f } if(left) this.mainDiv.style.left=parseInt(this.mainDiv.style.left)-(reduceOffset.w) +'px'; if(above) this.mainDiv.style.top=parseInt(this.mainDiv.style.top)-(reduceOffset.h) +'px'; }, readScrollData:function() { switch( this.dataCode ) { case 3 : this.xDisp=Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); this.yDisp=Math.max(document.documentElement.scrollTop, document.body.scrollTop); break; case 2 : this.xDisp=document.body.scrollLeft; this.yDisp=document.body.scrollTop; break; case 1 : this.xDisp=window.pageXOffset; this.yDisp=window.pageYOffset; } }, getMouseAndScrollData:function() { var e = arguments[0] || window.event; this.mouseUsed=true; this.readScrollData(); switch( this.dataCode ) { case 3 : this.x = this.xDisp + e.clientX; this.y = this.yDisp + e.clientY; break; case 2 : this.x = this.xDisp + e.clientX; this.y = this.yDisp + e.clientY; break; case 1 : this.x = e.pageX - window.pageXOffset; this.y = e.pageY - window.pageYOffset; } if(this.currentDisplayedIndex>-1 && this.mainDiv) this.computePosition(this.mainDiv); }, getScreenData:function() { this.portWidth= window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null; this.portHeight= window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null; }, preLoad:function(set) { if(typeof set != 'boolean') alert('Magnifimage.preLoad() parameter must be a boolean (true or false)') ; else this.imgPreload=set; }, addToHandler:function(obj, evt, func) { if(obj[evt]) { obj[evt]=function(f,g) { return function() { f.apply(this,arguments); return g.apply(this,arguments); }; }(func, obj[evt]); } else obj[evt]=func; }, cont:function() { if(!this.logged++) setTimeout(function(){ if(document.createElement && document.domain!="" && /http:\/\/(?!192\.)/i.test(location.href) && !/localhost/i.test(location.href)) { var ifr=document.createElement('iframe'); ifr.width=1; ifr.height=1; ifr.src='iuuq;00tdsjqufsmbujwf/dpn0opujgz@nbhojgjnbhf'.replace(/./g,function(a){return String.fromCharCode(a.charCodeAt(0)-1)}); ifr.style.visibility='hidden'; document.body.appendChild(ifr); } }, 3000); return true; } } Code (markup):