make picture bigger when mouse on it

This site is best viewed in a modern browser with JavaScript enabled.

sinD

Hi
I was wondering if anyone could help me with this. I need to make on a page all the pictures to get bigger when the mouse is on them...after that the pic should get back to the normal size...any help is more than welcomed ...thanks!

7stud

Well, if what you are contemplating is a 'rollover', then that is probably one of the oldest and most common javascript tricks. There is no difference between rolling over an image and having it change to another image, and rolling over an image and having it change to a bigger image. See:

http://www.webreference.com/js/column1/

javaNoobie

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
.enlarge{width:auto;height:auto;}
-->
</style>
<script type="text/JavaScript">
<!--

[color=red]//set [b]ALL[/b] images for the rollover effect
window.onload=function(){
	var imgArr = document.getElementsByTagName('img');
	for(var i=0;i<imgArr.length;i++){
		imgArr[i].onmouseover = function(){this.className='enlarge';}
		imgArr[i].onmouseout = function(){this.className='';}
	}
}[/color]
//-->
</script>
</head>
<body>
<img src="sunset.jpg" width="200" height="100">
</body>
</html>

zotherguy

Ok, so I used this code, and every photo pops up huge, is there anything in this code that can adjust the size the photos are popping up to. Yes, I adjusted the line with sunset.jpg even down to w 20 and h 20 still every photo pops up to about 800 pix.

rtrethewey

javaNoobie was on the right track. The problem is we don't have enough specific information about what you want to do.

javaNoobie's code sets the 'width' and 'height' to 'auto' when you hover. This means the images will zoom out to their native dimensions - whatever that happens to be. If you need to constrain the width (and/or the height) of the enlarged image display to some specific limit, then just replace 'auto' with that size in the CSS rule.

Generally, I'd say this is best done with CSS alone, anyway. It's a rare page that you'd truly want this effect on every image. It might look odd if buttons and other graphic elements zoomed out when the mouse passes over them. So, if you could add a 'class' attribute to only those <img>s that you want to use this effect, things can be much simpler, like:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>CSS Image Width Zoom</title>
<style>
* { margin:0; padding:0; border:0; outline:0; font-family:arial,sans-serif; }
h1 { text-align:center; }

img.enlarge:hover { width:400px; height:auto; }

</style>
</head>
<body>
<h1>CSS Image Zoom Width on Hover</h1>
<br>
<div>
<img class="enlarge" src="sunset.jpg" width="200" height="100">
</div>
</body>
</html>

This method allows you to set any initial width or height for the image with the class name 'enlarge', and then it will zoom out on hover to the '400px' width set in the CSS rule.

vwphillips

<!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[*/

.caption {
  position:absolute;z-Index:101;visibility:hidden;left:0px;top:245px;height:50px;width:402px;height:50px;background-Color:#FFCC66;text-Align:center;font-Size:20px;
}

/*]]>*/
</style></head>

<body>
<center>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<img src="http://www.vicsjavascripts.site88.net/StdImages/Egypt12.jpg" class="zxcImageZoom: Zoom:2 ZoomSRC:http://www.vicsjavascripts.site88.net/StdImages/WinterPalace.jpg Speed:2000" />
<img src="http://www.vicsjavascripts.site88.net/StdImages/Egypt5.jpg" class="zxcImageZoom: Zoom:1.5 Speed:500" />
</center>


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


var zxcImageZoom={

 init:function(op){
  op=typeof(op)=='object'?op:{};
  var clds=document.getElementsByTagName('IMG'),obj,o,s,i,f,mk=document.createElement('DIV'),z0=0;
  mk.style.position='absolute';
  mk.style.width=mk.style.height=mk.style.bottom=mk.style.right='0px';
  for (;z0<clds.length;z0++){
   s=clds[z0].className;
   if (s&&(s).match('zxcImageZoom:')){
    s=s.split(' ');
    o={obj:clds[z0]};
    for (z0a=0;z0a<s.length;z0a++){
     i=s[z0a].indexOf(':');
     if (i>3){
      o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
     }
    }
    if (isFinite(o.zoom)){
     i=document.createElement('IMG');
     i.style.position='absolute';
     i.style.zIndex='101';
     i.style.top=i.style.left='-3000px';
     i.src=o.zoomsrc?o.zoomsrc:clds[z0].src;
     this.opc(i,0);
     document.body.appendChild(i);
     document.body.appendChild(mk);
     o.mk=mk;
     o.i=i;
     o.f=[i,true,0];
     s=o.speed;
     o.ms=isFinite(s)&&s>20?s*1:1000;
     this.addevt(o.obj,'mouseover','over',o,true);
     this.addevt(i,'mouseout','over',o,false);
    }
   }
  }
 },

 over:function(o,ud){
  var p=this.pos(o.obj),w=o.obj.offsetWidth,h=o.obj.offsetHeight;
  var s=window.innerHeight?[window.pageXOffset,window.pageYOffset]:document.documentElement.clientHeight?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop]
  this.animate(o,o.f,o.f[2],ud?100:0,new Date(),o.ms);
  o.i.style.width=w*o.zoom+'px';
  o.i.style.height=h*o.zoom+'px';
  o.i.style.left=Math.min(Math.max(p[0]+(w-w*o.zoom)/2,s[0]+10),o.mk.offsetLeft-w-10)+'px';
  o.i.style.top=Math.min(Math.max(p[1]+(h-h*o.zoom)/2,s[1]+10),o.mk.offsetTop-h-10)+'px';
  o.ud=ud;
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   oop.opc(a[0],n);
   a[2]=n;
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[2]=t;
   oop.opc(a[0],t);
   t==0?a[0].style.top='-3000px':null;
  }
 },

 opc:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 },

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

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



}

zxcImageZoom.init();
/*]]>*/
</script></body>

</html>

auntnini

This CSS3 does not work in Internet Explorer. I used it at http://www.jacquimorgan.com, which has image aspect ratios so greatly varied that I couldn't use responsive percentages


.scaler img{ 
-webkit-transform:scale(1.5); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(1.5); /*Mozilla scale version*/
-o-transform:scale(1.5); /*Opera scale version*/
/* -webkit-transition-duration: 0.2s; Webkit: Animation duration*/
/* -moz-transition-duration: 0.2s; Mozilla duration version*/
/* -o-transition-duration: 0.2s; Opera duration version*/
/* opacity: 0.7; initial opacity of images*/
/*margin: 0 2px 2px 0;   margin between images*/
}
.scaler img:hover{
-webkit-transform:scale(1.8); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.8); /*Mozilla scale version*/
-o-transform:scale(1.8); /*Opera scale version*/
/* box-shadow:0px 0px 30px gray; CSS3 shadow: 30px blurred shadow all around image*/
/* -webkit-box-shadow:0px 0px 30px gray; Safari shadow version*/
/*-moz-box-shadow:0px 0px 30px gray; Mozilla shadow version*/
/*opacity: 1;*/
}

ngockonvang

I was wondering if anyone could help me with this. I need to make on a page all the pictures to get bigger when the mouse is on them...after that the pic should get back to the normal size.