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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Location
    Wales, UK
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript onmouseover, Images and Text enlarging

    Hi,

    I'm a new poster and, after scanning through the JS threads, i couldn't find the solution to my problem. I apologise in advance if the problem & solution have already been posted in another thread.

    Ok, quite simply, i have hyperlinked text above and image. The image is also a link & both have the same href, so link to the same place. The image has a JS onmouseover/onmouseout script applied to change size (i.e. bigger on mouseover).

    I would like the image to enlarge when the text is hovered, in the same way as it would have if hovered over the image itself. The image is styled with transparency in its normal state and a CSS opacity (1) is added to make the image appear opaque on mouseover.

    This is the code:

    Code:
     
    <script type="text/javascript">
    function moveover()
    {
    document.getElementById('aboutimage').width="210";
    document.getElementById('aboutimage').height="130";
    }
    function moveback()
    {
    document.getElementById('aboutimage').width="140";
    document.getElementById('aboutimage').height="87";
    }
    </script>
    
    <a href="businessmodel.html"><img id="aboutimage" src="file:///Users/SirRon/Desktop/clwwebsitefiles/images/businessmodel.jpg" onmouseover="moveover()" onmouseout="moveback()" align="left" width="142" height="87" /></a>
    
    <a id="aboutsidepagelink" href="businessmodel.html" onmouseover="moveover()" onmouseout="moveback()">Business Model</a>
    I've tried to add the moveover/moveback bit to the text hyperlink so that hovering over it performs the JS function on the image. This works to an extent, but the effect i achieve is that the enlarged image is out of position (to the right of where it should be) and the opacity does not appear, although the re-sizing is correct.

    An older version of this site displays the problem here - www.cardifflegal.com/services.html. The images and links to the right side are my concern (apologies to MSIE users. My site is encoded on MAC for Safari and i recently discovered that it does not render correctly on IE, although it seems OK in MFF).

    One other thing. If the image is clicked and the user presses the back button, the larger image appears to the right of where it should be, as above, again without the opacity. So i figured the problem is related to the JS. Am i using the right code?

    I am no good with JS and the code reflects the extent of my (lack of) understanding, although in my mind the effect i would like to achieve is simple. Would be indebted to anyone who can provide a straightforward, understandable solution.

    Runako

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    May I suggest that you thinkg about CSS solutions? You don't need JS to make these types of effects, you can use the pseudo classes like
    Code:
    img:hover { width: 200px; }
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    you could with the image style position as relative or absolute
    Code:
    function moveover()
    {
     var img=document.getElementById('aboutimage')
    img.width="210px";
    img.height="130px";
    img.left="20px";
    img.top="-20px";
    }
    function moveback()
    {
     var img=document.getElementById('aboutimage')
    img.width="140px";
    img.height="87px";
    img.left="10px";
    img.top="-10px";
    }
    or to retain the image center position

    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>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (13-March-2008) DRAFT
    // 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.
    
    // **** 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.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  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
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     if (zxcsrtfin[0]==zxcsrtfin[1]) return;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  this.opacity(this.data[0]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else  this.opacity(this.data[0]);
     }
    }
    
    zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
     if (zxcopc<0||zxcopc>100){ return; }
     this.obj.style.filter='alpha(opacity='+zxcopc+')';
     this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    
    /*]]>*/
    </script>
    <style type="text/css">
    /*<![CDATA[*/
    #tst {
      opacity:100;
    }
    
    /*]]>*/
    </style><script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcExpand(zxcid,zxcmax,zxcspd,zxcopc){
     var zxcp=document.getElementById(zxcid);
     if (!zxcp.data){
      var zxcw=zxcp.offsetWidth;
      var zxch=zxcp.offsetHeight;
      var zxclft=zxcp.offsetLeft;
      var zxctop=zxcp.offsetTop;
      zxcp.data=[zxcw,zxcw*zxcmax,zxclft,zxclft-Math.max(0,(zxcw*zxcmax-zxcw)/2),zxch,zxch*zxcmax,zxctop,zxctop-(zxch*zxcmax-zxch)/2,zxcopc||100,100];
      zxcp.spd=zxcspd||1000;
      zxcExpandDo(zxcp,10)
      setTimeout(function(){ zxcExpandDo(zxcp,zxcspd); },50);
     }
     else zxcExpandDo(zxcp,zxcspd)
    }
    
    function zxcExpandDo(zxcframe,zxcspd){
     zxcBAnimator('width#',zxcframe,zxcframe.data[0],zxcframe.data[1],zxcspd);
     zxcBAnimator('left#',zxcframe,zxcframe.data[2],zxcframe.data[3],zxcspd);
     zxcBAnimator('height#',zxcframe,zxcframe.data[4],zxcframe.data[5],zxcspd);
     zxcBAnimator('top#',zxcframe,zxcframe.data[6],zxcframe.data[7],zxcspd);
     zxcBAnimator('opacity#',zxcframe,zxcframe.data[8],zxcframe.data[9],zxcspd);
    }
    
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
     for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
     if (zxcp) zxcp.appendChild(zxcele);
     if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
     return zxcele;
    }
    
    
    
    
    
    /*]]>*/
    </script>
    </head>
    
    <body onload="zxcExpand('tst',1.2,100,50);">
    <div style="position:relative;left:100px;top:100px;width:200px;height:200px;border:solid black 1px;">
    <a href="#"
    onmouseover="zxcExpand('tst');"
    onmouseout="zxcExpand('tst');"
    >Link</a><br />
    
    <img id="tst" style="position:relative;left:20px;top:10px;" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100"
    onmouseover="zxcExpand('tst');"
    onmouseout="zxcExpand('tst');"
    
    />
    </div>
    
    </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/


  •  

    Posting Permissions

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