Image zoom onmouseover problems

**yhobi23** · 12-17-2010, 08:04 AM

im having a problem on image zooming using onmouseover... image always pops towards the right direction and a result the page has been distracted... any comments or help will be greatly appreciated... THX!!!

**jscheuer1** · 12-17-2010, 03:44 PM

Are you using Expando:

http://www.dynamicdrive.com/dynamici...pandoimage.htm

or Featured Image Zoomer:

http://www.dynamicdrive.com/dynamici...uredzoomer.htm

or something else?

In any case, you may want to switch to jQuery Image Magnify v1.1:

http://www.dynamicdrive.com/dynamici...agemagnify.htm

It works onclick and always zooms to the center of the viewable area. But I believe either of the first two can be adapted to zoom various directions as needed. If it's another script that you are using, it could also be adapted, perhaps.

So what exactly are you using and would you be willing to change?

**yhobi23** · 12-18-2010, 01:30 AM

thx John, but the link doesnt help me.. the image zoom that i wanted is like when you browse image on google. image pops without distracting the page.. image pops at the center of the thumbnail image. is there any css codes for that. thx again ! ! !

**jscheuer1** · 12-18-2010, 03:10 AM

Short Version:

No - there are no css codes for that.

Long Version:

What are/were you using that was giving you the problem?

Can you give me a link to the page on your site that shows the problem you are having?

The reason I ask is I'm not aware of "any css codes for that" for what Google is doing. It's javascript, and at least slightly involved. I know it's javascript because if you turn javascript off, you also turn off the effect. I'm guessing it's at least slightly involved, simply because of how it takes the caption of each image (which is seen if javascript is disabled or if the page is viewed in some browsers, even with javascript enabled) and hides it (I think before it's ever seen in supported browsers), then shows it with the enlarged image in a box that's usually directly over the image, but that gets adjusted if too near any of the browser's viewing area's edges. Sometimes though, the image isn't enlarged. But the description is still hidden initially and then added for the mouseover box view.

If you already have anything close to what you want, it would probably be easier to modify it than work from scratch. The Google code is probably copyright anyway, so we can't just lift it. Even if we can (if it's not copyright), there are so many scripts on a Google Images page, that it would be virtually impossible to find it.

And you might not require all of that functionality anyway.

**yhobi23** · 12-18-2010, 02:26 PM

i see.. if that's the case, i think its javascript. i just want to have a popup image when mouseover that's all. Maybe you can give me some codes for that.. I highly appreciate your help... Thx.

**vwphillips** · 12-18-2010, 04:29 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.mag {
  position:relative;left:100px;top:50px;
}

.pop {
  z-Index:101;background-Color:#FFFFCC;text-Align:center;
}

.pop1 {
  z-Index:101;background-Color:#FFCC66;text-Align:center;
}

/*]]>*/
</style>

<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 1 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.neg=srt<0||fin<0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime;
  this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
  this.apply();
  if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
  else {
   this.data[0]=this.data[2];
   this.apply();
   if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
   if (this.data[0]<0&&!this.neg) this.data[0]=0;
   if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
   else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>


</head>

<body>

<img class="mag magnify:120% PopUpClassName:pop HTML:Egypt 1 AnimationSpeed:1000 padding:10px " src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img class="mag HTML:Egypt 2 src:http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />


<script type="text/javascript">
/*<![CDATA[*/
// Image Magnify (18-December-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

function zxcImageMag(opts){
 var imgs=this.bycls(opts.ImageClassName);
 for (var z0=0;z0<imgs.length;z0++){
  new zxcMagnify(imgs[z0],this.options(imgs[z0].className),opts);
 }
}

zxcImageMag.prototype={

 options:function(cls){
  for (var cls=cls.split(' '),o={},index,nme,option,z0=0;z0<cls.length;z0++){
   index=cls[z0].indexOf(':');
   if (index>0){
    o[cls[z0].substring(0,index).toLowerCase()]=cls[z0].substring(index+1);
   }
  }
  return o;
 },

 bycls:function(nme){
  for (var reg=new RegExp('\\b'+nme+'\\b'),els=document.getElementsByTagName('IMG'),ary=[],z0=0; z0<els.length;z0++){
   if(reg.test(els[z0].className)) ary.push(els[z0]);
  }
  return ary;
 }

}

function zxcMagnify(img,o,opts){
 this.img=img;
 var mag=o.magnify?parseInt(o.magnify)/100:typeof(opts.Magnify)=='number'?opts.Magnify/100:1.2,pop,div,div2,padding=o.padding?parseInt(o.padding):typeof(opts.Padding)=='number'?opts.Padding:0,magimg=new Image();
 magimg.src=o.src||img.src;
 magimg.width=img.width*mag;
 magimg.height=img.height*mag;
 magimg.style.position='relative';
 magimg.style.top=padding+'px';
 pop=document.createElement('DIV');
 pop.className=o.popupclassname||opts.PopUpClassName;
 document.body.appendChild(pop);
 pop.style.position='absolute';
 pop.style.visibility='hidden';
 pop.style.overflow='hidden';
 div=document.createElement('DIV');
 div.appendChild(magimg);
 div.style.position='absolute';
 div.style.left='0px';
 div.style.top='0px';
 pop.appendChild(div);
 div.appendChild(magimg);
 if (o.html){
  div2=document.createElement('DIV')
  div2.style.position='relative';
  div2.style.top=padding+'px';
  div.appendChild(div2);
  div2.innerHTML=o.html;
 }
 this.popw=div.offsetWidth+padding*2;
 this.poph=div.offsetHeight+padding*2;
 div.style.width=this.popw+'px';
 div.style.height=this.poph+'px';
 div.style.border='solid black 1px';
 this.divlft=new zxcAnimate('left',div)
 this.lft=new zxcAnimate('left',pop);
 this.top=new zxcAnimate('top',pop);
 this.width=new zxcAnimate('width',pop);
 this.height=new zxcAnimate('height',pop);
 this.opac=new zxcAnimate('opacity',pop);
 this.opac.Complete=function(){
    if (this.data[0]==0){
     this.obj.style.visibility='hidden';
    }
   }
 this.ms=o.animationspeed?o.animationspeed*1:typeof(opts.AnimationSpeed)=='number'?opts.AnimationSpeed:1000;
 this.to=null;
 this.addevt(this.img,'mouseover','animate',true);
 this.addevt(pop,'mouseout','hide',true);
 this.addevt(pop,'mouseover','hide',false);
}

zxcMagnify.prototype={

 animate:function(ud){
  var pos=this.pos(this.img),w=this.img.width,h=this.img.height,from=-this.popw/2,to=0;
  this.divlft.animate(ud?from:to,ud?to:from,this.ms);
  from=pos[0]+w/2;to=pos[0]+(w-this.popw)/2;
  this.lft.animate(ud?from:to,ud?to:from,this.ms);
  from=pos[1]+h/2;to=pos[1]+(h-this.poph)/2;
  this.top.animate(ud?from:to,ud?to:from,this.ms);
  this.width.animate(ud?0:this.popw,ud?this.popw:0,this.ms);
  this.height.animate(ud?0:this.poph,ud?this.poph:0,this.ms);
  this.opac.animate(ud?0:100,ud?100:0,this.ms);
  this.lft.obj.style.visibility='visible';
 },

 hide:function(ud){
  clearTimeout(this.to);
  if (ud){
   var oop=this;
   this.to=setTimeout(function(){ oop.animate(false); },100);
  }
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 },

 pos:function(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}



}

new zxcImageMag({
 ImageClassName:'mag',
 Padding:5,
 PopUpClassName:'pop1',
 Magnify:150,
 AnimationSpeed:500
});

/*]]>*/
</script>

</body>

</html>

**jscheuer1** · 12-18-2010, 05:59 PM

Hi Vic.

Doesn't work so good for me here in IE 8 or Firefox 3.6.13. In Firefox I get a very tiny 'enlarged image' that pulses in and out of view for the first image. For the second, no pulse, just a tiny image. IE 8 shows a larger image, but untill everything is cached, it's choppy. Even then (still IE 8) I get both larger images at once if I move the mouse too fast.

@yhobi23 -

What were you using before? What was giving you the problem you stated in your original post:

im having a problem on image zooming using onmouseover... image always pops towards the right direction

**vwphillips** · 12-18-2010, 06:27 PM

Code:

.mag {
  position:relative;width:200px;height:150px;left:100px;top:50px;
}

Code:

 hide:function(ud){
  clearTimeout(this.to);
  if (ud&&this.opac.data[0]==100){
   var oop=this;
   this.to=setTimeout(function(){ oop.animate(false); },100);
  }
 },

solves the problems for me.

thanks for the feed back.

**yhobi23** · 12-19-2010, 01:42 AM

@ john

i used this codes:
<img src = "small-image.htm" width = "150" height "150"
onmouseover = "this.src = 'large-image'"
onmouseout = "this.src ='small-image'">

image enlarge but always to right..
i wnt it to to pop at the center of the image.

**jscheuer1** · 12-19-2010, 08:27 AM

You would need a container and some positioning to do that.

Vic's code is actually improving though, have you tried it?

@Vic -

In both browsers a rapid back and fourth of the mouse over both images can still produce a situation where both images are enlarged at once. After that happens, a situation arises where one may mouse out of the current larger image, but the other one remains enlarged. I would think it needs some kind of a 'contract all' before a given one is enlarged.

In IE the anti-aliasing of the text "Egypt" (ClearType) is lost. This is from the use of filter, which I believe is unnecessary. In both, with javascript disabled, there is no caption. The Google version shows the caption by default if there is no javascript.

If you're up against the right (perhaps others) browser edge, the enlarged image displays partially outside the viewport.

Feel free to deal with these or not. When I have more time I will try my hand at it.

Thread: Image zoom onmouseover problems

Thread Tools

Search Thread

Image zoom onmouseover problems

Bookmarks

Bookmarks

Posting Permissions