www.webdeveloper.com
Results 1 to 8 of 8

Thread: make picture bigger when mouse on it

  1. #1
    Join Date
    Nov 2004
    Posts
    3

    Question make picture bigger when mouse on it

    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!

  2. #2
    Join Date
    Oct 2004
    Posts
    1,118
    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/

  3. #3
    Join Date
    Jul 2004
    Location
    Singapore, SG
    Posts
    654
    Code:
    <!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">
    <!--
    
    //set ALL 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='';}
    	}
    }
    //-->
    </script>
    </head>
    <body>
    <img src="sunset.jpg" width="200" height="100">
    </body>
    </html>

  4. #4
    Join Date
    Dec 2013
    Posts
    2
    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.

  5. #5
    Join Date
    Mar 2011
    Posts
    1,136
    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:
    Code:
    <!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.
    Rick Trethewey
    Rainbo Design

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,670
    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[*/
    
    .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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Sep 2006
    Location
    new york
    Posts
    265
    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

    Code:
    .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;*/
    }

  8. #8
    Join Date
    Jan 2014
    Posts
    4
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles