Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    48
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Image zoom mouseover

    Hello folks, I'm new here.
    This is just a question regarding a script I'm after that enlarges an image onmouseover and shrinks the other two images.

    It is probably best I explain this by using drawings.
    As you can see, in figure 1, I have a line of three images connected in boxes (although shape will probably change to something more complex later)


    (Figure 1)

    Then in figure 2, when the user rolls the mouse over the middle image, it enlarges, and the other two shrink, whilst still remaining very much side by side/in the same position.


    (Figure 2)

    The same action would apply when the user rolls their mouse over any of the three images, I'm just using the middle purely as an example!

    Is there any way to do this or script I can use? My javascripting skills aren't brilliant!

    Cheers.

  • #2
    New Coder
    Join Date
    Mar 2010
    Location
    New Jersey USA
    Posts
    81
    Thanks
    13
    Thanked 4 Times in 4 Posts
    I can't see any of the images.. ?

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    48
    Thanks
    7
    Thanked 0 Times in 0 Posts

  • #4
    Regular Coder
    Join Date
    Jul 2010
    Posts
    149
    Thanks
    0
    Thanked 5 Times in 5 Posts

    CSS with JQuery

    It is possible with the help of CSS and JQuery.

    First of all display small div with image and when mouse hover the image or div then that div replace another css or div which is show big image.

    If you have knowledge about jquery and css then you can do easily.

    Look at below url :

    http://www.sohtanaka.com/web-design/...fect-w-jquery/

    Demo URL : http://www.sohtanaka.com/web-design/...es/image-zoom/
    Last edited by phpdeveloper; 11-15-2010 at 04:15 PM.

  • Users who have thanked phpdeveloper for this post:

    css-quest (11-15-2010)

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there css-quest,

    and a warm welcome to these forums.

    Have a look at this example...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <base href="http://www.coothead.co.uk/images/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>untitled document</title>
    
    <style type="text/css">
    body {
        background-color:#000;
     }
    #container  {
        position:relative;
        width:326px;
        margin:260px auto;
     }
    #container img {
        width:100px;
        height:108px;
        border:3px double #eee;
        position:absolute;
     }
    #container .bigger {
        width:200px;
        height:216px;
        margin:-54px 0 0 -50px;
        z-index:1;
     }
    #p1 {left:0;}
    #p2 {left:110px;}
    #p3 {left:220px;}
    </style>
    
    <script type="text/javascript">
    
    function bigPic(){
    
       pic=document.getElementsByTagName('img');
    
    for(c=0;c<pic.length;c++) {
    pic[c].onmouseover=function() {
       this.className='bigger';
    
    this.onmouseout=function() {
       this.className='';
        }
       }
      }
     }
     window.addEventListener?
     window.addEventListener('load',bigPic,false):
     window.attachEvent('onload',bigPic);
    
    </script>
    
    </head>
    <body>
    
    <div id="container">
     <img id="p1" src="dog.jpg" alt="">
     <img id="p2" src="apple.jpg" alt="">
     <img id="p3" src="banana.jpg" alt="">
    </div>
    
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    css-quest (11-15-2010)

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    48
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by phpdeveloper View Post
    It is possible with the help of CSS and JQuery.

    First of all display small div with image and when mouse hover the image or div then that div replace another css or div which is show big image.

    If you have knowledge about jquery and css then you can do easily.

    Look at below url :

    http://www.sohtanaka.com/web-design/...fect-w-jquery/

    Demo URL : http://www.sohtanaka.com/web-design/...es/image-zoom/
    That seems really useful, thanks! I'm not very familiar with jQuery, but say I wanted to use a different shaped image, (for example, a hexagon), would I just use CSS to position the DIVs together and make the image hexagonal or would I somehow have to draw the hexagon on to the webpage?

    The other thing is, using that script, is it possible to remove the bit on the right that displays a larger version?

    Thanks!

  • #7
    New Coder
    Join Date
    Nov 2010
    Posts
    48
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there css-quest,

    and a warm welcome to these forums.

    Have a look at this example...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <base href="http://www.coothead.co.uk/images/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>untitled document</title>
    
    <style type="text/css">
    body {
        background-color:#000;
     }
    #container  {
        position:relative;
        width:326px;
        margin:260px auto;
     }
    #container img {
        width:100px;
        height:108px;
        border:3px double #eee;
        position:absolute;
     }
    #container .bigger {
        width:200px;
        height:216px;
        margin:-54px 0 0 -50px;
        z-index:1;
     }
    #p1 {left:0;}
    #p2 {left:110px;}
    #p3 {left:220px;}
    </style>
    
    <script type="text/javascript">
    
    function bigPic(){
    
       pic=document.getElementsByTagName('img');
    
    for(c=0;c<pic.length;c++) {
    pic[c].onmouseover=function() {
       this.className='bigger';
    
    this.onmouseout=function() {
       this.className='';
        }
       }
      }
     }
     window.addEventListener?
     window.addEventListener('load',bigPic,false):
     window.attachEvent('onload',bigPic);
    
    </script>
    
    </head>
    <body>
    
    <div id="container">
     <img id="p1" src="dog.jpg" alt="">
     <img id="p2" src="apple.jpg" alt="">
     <img id="p3" src="banana.jpg" alt="">
    </div>
    
    </body>
    </html>
    
    coothead
    Oh wow, even better! Again, same question, for hexagonal shapes (and I wanted to "connect" them together) would it just be a mtter of positioning the DIVs in the right places?

    Thanks

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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[*/
    
    #tst {
     position:relative;left:100px;top:100px;
    }
    
    #tst IMG {
     width:200px;height:150px;z-Index:100;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    // AnimateII (08-October-2010)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the
    // left, top, width, height, color, background-Color, Opacity, border-Width, border-Color, clip
    // style of an element over a specified period of time.
    
    // **** 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;'
    // If not assigned the style position of the element will be assigned as 'position:relative;' by the script.
    //
    // 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 zxcAnimateII('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 2 = 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) 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.
    
    // **** Notes
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity', clip, 'color', 'background-Color'.
    //
    //  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:  To animate colors('color' or 'background-Color') the start and finish values may be.
    //           HEX('#FF0000') or RGB('rgb(255,0,0)'), abbreviated HEX or named colors are not allowed.
    //
    //  Note 4:  To animate 'clip' the start and finish values may be
    //            arrays of the top, right, bottom and left values([0,100,20,0])
    //           or the standard clip format 'rect(0px,100px,20px,0px)'.
    //
    //  Note 5:  It may be required to access the current value of the effect.
    //           An array storing the current, start and finish values of the element effect may be accessed
    //           from the element effect.data as fields 0, 1 and 2 respectively && each field is an array.
    //           For color each field is an array storing the R, G, B values.
    //           The current effect value is recorded in A.data[0].
    //
    //  Note 6:  A function may be called on completion of the effect by assigning the function
    //           to the animator instance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    // **** Functional Code(2.61K) - NO NEED to Change
    
    
    function zxcAnimateII(mde,obj,srt){
     this.obj=(typeof(obj)=='string')?document.getElementById(obj):obj;
     this.mde=mde.replace(/[-#]/g,'');
     this.data=[srt?this.convert(srt,this.mde):0];
     this.to=null;
    }
    
    zxcAnimateII.prototype={
    
     animate:function(srt,fin,ms,c){
      this.std=!(this.mde.indexOf('olor')>0||this.mde=='clip'||this.mde=='opacity');
      srt=this.convert(srt,this.mde);
      fin=this.convert(fin,this.mde);
      this.pos=true;
      for (var z0=0;z0<srt.length;z0++){
       if (srt[z0]<0||fin[z0]<0){
        this.pos=false;
       }
      }
      c=c||'';
      this.c=c.charAt(0).toLowerCase();
      this.mS=ms||2000;
      clearTimeout(this.to);
      this.srttime=new Date().getTime();
      this.inc=Math.PI/(2*this.mS);
      this.data=[[],srt,fin];
      this.cng();
     },
    
     cng:function(){
      var ms=new Date().getTime()-this.srttime;
      for (var z0=0;z0<this.data[2].length;z0++){
       this.data[0][z0]=Math.floor(this.c=='s'?(this.data[2][z0]-this.data[1][z0])*Math.sin(this.inc*ms)+this.data[1][z0]:this.c=='c'?(this.data[2][0])-(this.data[2][z0]-this.data[1][z0])*Math.cos(this.inc*ms):(this.data[2][z0]-this.data[1][z0])/this.mS*ms+this.data[1][z0]);
       if (this.pos&&this.data[0][z0]<0){
        this.data[0][z0]=0;
       }
      }
      this.cngstyle();
      if (ms<this.mS){
       this.to=setTimeout(function(oop){ return function(){oop.cng(); } }(this), 10);
      }
      else {
       this.data[0]=this.data[2];
       this.cngstyle(this.data[0]);
       if (this.Complete){
        this.Complete(this);
       }
      }
     },
    
     cngstyle:function(){
      var v=this.data[0];
      if (this.std){
       this.obj.style[this.mde]=v[0]+'px';
      }
      else if (this.mde.indexOf('olor')>0){
       this.obj.style[this.mde]='rgb('+v[0]+','+v[1]+','+v[2]+')';
      }
      else if (this.mde=='clip'){
       this.obj.style[this.mde]='rect('+v[0]+'px,'+v[1]+'px,'+v[2]+'px,'+v[3]+'px)';
      }
      else if (this.mde=='opacity'){
       zxcOpacity(this.obj,v[0]);
      }
     },
    
     convert:function(col,mde){
      if (typeof(col)=='object'){
       return col;
      }
      else if (mde=='clip'){
       col=col.replace(/[rect()px]/g,'').split(',');
       return [col[0]*1,col[1]*1,col[2]*1,col[3]*1];
      }
      else if (!col.toString().match('#')){
       return [parseInt(col)];
      }
      else {
       col=parseInt(col.substring(1,3),16)+','+parseInt(col.substring(3,5),16)+','+parseInt(col.substring(5,7),16);
       col=col.replace(/[rgb()\s]/g,'').split(',');
       return [parseInt(col[0]),parseInt(col[1]),parseInt(col[2])];
      }
     }
    }
    
    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>
    <div id="tst" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
    </div>
    http://209.188.89.109/showthread.php?t=209326
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcZoomImage(o){
     var p=document.getElementById(o.ID),imgs=p.getElementsByTagName('IMG');
     for (var ary=[],z0=0;z0<imgs.length;z0++){
      ary[z0]=imgs[z0];
     }
     this.imgs=[];
     for (var img,w,h,z1=0;z1<ary.length;z1++){
      this.addevt(ary[z1],'mouseover','zoom',z1);
      w=ary[z1].width*o.Zoom;
      h=ary[z1].height*o.Zoom;
      img=new Image();
      img.src=ary[z1].src;
      img.style.position='absolute';
      img.style.zIndex='2';
      img.style.left=ary[z1].offsetLeft-(w-ary[z1].width)/2+'px';
      img.style.top=ary[z1].offsetTop-(h-ary[z1].height)/2+'px';
      img.style.width=w+'px';
      img.style.height=h+'px';
      this.imgs[z1]=[new zxcAnimateII('clip',img,[h/2,w/2,h/2,w/2]),[h/2,w/2,h/2,w/2],[0,w,h,0]];
      img.style.clip='rect('+h/2+'px,'+w/2+'px,'+h/2+'px,'+w/2+'px)';
      p.appendChild(img);
     }
     this.ms=o.AnimationSpeed||1000;
     this.lst=this.imgs[0];
    }
    
    zxcZoomImage.prototype={
    
     zoom:function(nu){
      this.lst[0].obj.style.zIndex='100';
      this.lst[0].animate(this.lst[0].data[0],this.lst[1],this.ms);
      this.lst=this.imgs[nu];
      this.lst[0].obj.style.zIndex='101';
      this.lst[0].animate(this.lst[0].data[0],this.lst[2],this.ms);
     },
    
     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); });
     }
    
    }
    
    new zxcZoomImage({
     ID:'tst',
     Zoom:2,
     AnimationSpeed:1000
    });
    /*]]>*/
    </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/

  • Users who have thanked vwphillips for this post:

    css-quest (11-16-2010)

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    48
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks for all the scripts. However, I've noticed one issue, basically I want the other two surrounding images (that aren't active (or onmouseover)) to shrink so that they can still wholly be seen.

    At the moment, the active image overlaps the none-active images, instead of shrinking them, or moving them out of the way - is there a script for this or something that can be changed to make this happen in the above script?

    Also: I've used relative positioning on my images to have them aligned alongside one another. However, the parses obviously reads the image as a bounding box and not the actual proportions of the image, is there a way to modify the script so that it will only read the proportions of the image and not see it as a box?

    The last and final question I have is, I have noticed when I move my mouse off all of the images, they don't shrink back to their default size, I'm assuming it's just a matter of adding an onmouseout somewhere?

    Thank you.
    Last edited by css-quest; 11-17-2010 at 01:56 PM.

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    from PM

    Hello,

    Thanks for providing me with your really useful script for image rollovers. Are you able to modify it to match my requirements or do you know of any other scripts that will do this for me?


    see

    http://www.vicsjavascripts.org.uk/Im...ExpandMenu.htm

    or visit my site ans search 'expand'
    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/

  • #11
    New Coder
    Join Date
    Nov 2010
    Posts
    48
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi, I have just tried using your script but the images don't appear in the DIV element. What am I doing wrong?

    Here's my code:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    // Image Expand Menu (01-June-2010)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To expand / magnify  images nested in a <DIV>.
    // The size of the images are increase or decrease in proportion to the mouse position over the <DIV>
    // With both 'Vertical' and 'Horizontal' applications.
    // Moving the mouse over the menu causes adjacent menu items to expand
    // with options to adjust the left and top positions and opacity.
    // There may be as many applications on a page as required.
    
    // **** Functional Code(3.65K) - NO NEED to Change
    
    function zxcImageExpandMenu(o){
     var tl=o.TopLeft||[0,0];
     var op=o.Opacity||[100,100];
     this.obj=document.getElementById(o.ID);
     this.pobj=this.obj.parentNode;
     this.data=o.Mode.charAt(0).toUpperCase()=='V'?['top','left','height','width',1]:['left','top','width','height',0];
     this.data=this.data.concat([o.MouseDistance||100,((o.Expansion||200)/100)-1,tl[0],tl[1]-tl[0],op[0],op[1]-op[0]]);
     var clds=this.obj.getElementsByTagName('IMG');
     this.ary=[];
     for (var z0=0;z0<clds.length;z0++){
      this.ary.push([clds[z0],this.data[0]=='left'?clds[z0].offsetWidth:clds[z0].offsetHeight,this.data[0]=='left'?clds[z0].offsetHeight:clds[z0].offsetWidth]);
     }
     this.spc=o.Separation||0;
     this.Reset();
     this.obj.style.visibility='visible';
     this.addevt(this.pobj,'mousemove','Expand');
     this.addevt(this.pobj,'mouseout','MseOut');
     return this;
    }
    
    zxcImageExpandMenu.prototype={
     Expand:function(e){
      var mse=this.mse(e)[this.data[4]]-this.pos(this.obj)[this.data[4]];
      for (var obj,c,p,exp,lft=0,z0=0;z0<this.ary.length;z0++){
       obj=this.ary[z0][0];
       c=Math.abs((this.sv(obj,this.data[0])+this.sv(obj,this.data[2])/2)-mse);
       if (c<this.data[5]){
        p=(this.data[5]-c)/this.data[5],exp=p*this.data[6];
        obj.style[this.data[1]]=this.data[7]+this.data[8]*p+'px';
        obj.style[this.data[2]]=this.ary[z0][1]*(1+exp)+'px';
        obj.style[this.data[3]]=this.ary[z0][2]*(1+exp)+'px';
        this.opac(obj,this.data[9]+this.data[10]*p);
       }
       else {
        obj.style[this.data[1]]=this.data[7]+'px';
        obj.style[this.data[2]]=this.ary[z0][1]+'px';
        obj.style[this.data[3]]=this.ary[z0][2]+'px';
        this.opac(obj,this.data[9]);
       }
       obj.style[this.data[0]]=lft+'px';
       lft+=this.sv(obj,this.data[2])+this.spc;
      }
      this.obj.style[this.data[2]]=lft-this.spc+'px';
      this.obj.style[this.data[0]]=(this.sv(this.pobj,this.data[2])-lft+this.spc)/2+'px';
     },
    
     Reset:function(){
      for (var lft=0,z0=0;z0<this.ary.length;z0++){
       var obj=this.ary[z0][0];
       obj.style.position='absolute';
       obj.style[this.data[0]]=lft+'px';
       obj.style[this.data[1]]=this.data[7]+'px';
       obj.style[this.data[2]]=this.ary[z0][1]+'px';
       obj.style[this.data[3]]=this.ary[z0][2]+'px';
       this.opac(obj,this.data[9]);
       lft+=this.ary[z0][1]+this.spc;
      }
      this.obj.style[this.data[2]]=lft-this.spc+'px';
      this.obj.style[this.data[0]]=(this.sv(this.pobj,this.data[2])-lft+this.spc)/2+'px';
     },
    
     MseOut:function(e){
      var obj=e.relatedTarget||e.toElement;
      if (obj){
       while (obj.parentNode){
        if (obj==this.pobj){
         return false;
        }
        obj=obj.parentNode;
       }
      }
      this.Reset();
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     },
    
     mse:function(e){
      if (document.all) return [e.clientX+this.docs()[0],e.clientY+this.docs()[1]];
      return [e.pageX,e.pageY];
     },
    
     docs:function(){
      if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
      return [document.body.scrollLeft,document.body.scrollTop];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     sv:function(obj,par){
      if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
      return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
     },
    
     opac:function(obj,opc){
      obj.style.filter='alpha(opacity='+opc+')';
      obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
     }
    
    }
    </script>
    
    <script type="text/javascript">
    
    //  Script instances must be generated after the page has been loaded
    
    var E=new zxcImageExpandMenu({
     ID:'H2',                  // the parent DIV unique id name.                                                  (string)
     Mode:'H',                 // (optional) Horizontal('H') or Vertical('V') application.                        (string, 'H' or 'V', default = H)
     MouseDistance:100,        // (optional) the element distance from the mouse where expansion will be applied. (digits, default = 100)
     Expansion:150,            // (optional) the maximum expansion of the element as a percentage.                (digits, default = 100)
     Separation:0,             // (optional) the separation between images.                                       (digits, default = 0)
     TopLeft:[20,0],           // (optional) an array specifying the top(Horizontal) of left(Vertical) positions  (array, default = [0,0])
                               //      field 0 = the default position in px.  (digits)
                               //      field 1 = the expanded position in px. (digits)
     Opacity:[80,100]          // (optional) an array specifying the opacity.                                     (array, default = [100,100])
                               //      field 0 = the default opacity.  (digits)
                               //      field 1 = the expanded opacity. (digits)
    });
    
    E=new zxcImageExpandMenu({
     ID:'H3',
     Mode:'H',
     MouseDistance:100,
     Expansion:150,
     TopLeft:[0,16],
     Opacity:[0,100]
    });
    
    E=new zxcImageExpandMenu({
     ID:'V2',
     Mode:'H',
     MouseDistance:100,
     Separation:10,
     Expansion:150,
     TopLeft:[20,0],
     Opacity:[50,100]
    });
    
    
      </script>
    
    
    <style type="text/css">
    
    .Hp {
      position:relative;left:250px;top:130px;width:601px;height:140px;background-Color:#FFCC66;border:solid #FF6633 1px;
    
    }
    
    #H2 {
      position:absolute;overflow:visible;visibility:hidden;left:50px;top:0px;border:solid #FF6633 0px;;
    }
    
    #H2 IMG {
      border-Width:0px;
    }
    
    #H3 {
      position:absolute;overflow:visible;visibility:hidden;left:50px;top:95px;width:600px;height:120px;border:solid #FF6633 0px;
    }
       </style>
    
    </head>
    <body>
    
     <div class="Hp" >
      <div id="H2"  >
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="10" height="75" />
        <a href="#"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt1.jpg" alt="Egypt" width="100" height="75" /></a>
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="10" height="75" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt2.jpg" alt="Egypt" width="100" height="75" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="10" height="75" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt3.jpg" alt="Egypt" width="100" height="75" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="10" height="75" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt4.jpg" alt="Egypt" width="100" height="75" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="10" height="75" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" width="100" height="75" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="10" height="75" />
      </div>
      <div id="H3" >
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="15" height="20" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Number" width="90" height="20" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="20" height="20" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="Number" width="90" height="20" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="20" height="20" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" alt="Number" width="90" height="20" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="20" height="20" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" alt="Number" width="90" height="20" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="20" height="20" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" alt="Number" width="90" height="20" />
        <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="Space" width="15" height="20" />
      </div>
     </div>
    
     </div>
    
     </body>
    </html>

  • #12
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question mouseout, return to default size

    hello, i'm very,very new here... i stumbled upon this thread and wanted to ask a specific script related to this topic... i just want to ask for a script that when i hover the mouse away, the image will return to its default size... the client will hover the mouse on an image, the image will enlarge and then when the client hovered the mouse away, the image will return to its default size...

    any help will be surely appreciated...


  • #13
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there radhiyoussef,

    and a warm welcome to these forums.

    Why don't you try the examples that have been already posted?

    coothead

  • #14
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up thanks for this thread

    thank you very much for this thread... the problem was with the free hosting site that i am using since they do not allow uploading of html and js files for free users... and after i inputted most of the scripts here, i need to publish first before i can see the output... anyway, this thread have been very helpful for my site


  •  

    Posting Permissions

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