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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mouseover with Fade effect to display larger image.

    Hi, not been here for a while. But thought I'd try my luck with a question I solved ages ago. I'm very rusty on JS lately so please bear with me. I'll try and explain what I need.

    I have created this in the past and know it is very possible, this was almost 4 years ago though and I've unfortunately lost it.

    Right...
    I wish to create a 4x4 table, and merge the center 4 cells together (relatively easy). Leaving 12 cells around the edge. Each of these cells will be a perfect square. Within these 12 cells would be a faded image. When the mouse hovers over the images, it would change opacity to full and fade in that particular image within the 4 merged cells in the center larger.

    If anyone can cypher what I trying to achieve and perhaps help me clear the rustiness in order to achieve this I'd appreciate it alot.

    I dont believe it's too difficult, but cannot remember to much about JS.

    One other thing is, I cannot use the HEAD tag to store JS scripts into. I'm cetain though that the script tag can be used within the body tag anyway.

    Please correct me if I'm wrong anywhere.

    Thanx in advance.
    Golden_Eagle

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // By Vic Phillips (08-May-2007) http://www.vicsjavascripts.org.uk
    
    
    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;
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    var zxcEvt=0;
    
    function zxcAddEvt(zxc,zxcfun,zxcevt){
     zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    
    
    function zxcInitDisplay(zxcid,zxcspd){
     var zxcp=document.getElementById(zxcid);
     zxcp.lst=null;
     var zxcimgs=zxcp.getElementsByTagName('IMG');
     var zxclft=0;zxctop=0;zxcwh=zxcimgs[0].width;
     zxcp.main=[];
     for (var zxc0=0;zxc0<12;zxc0++){
      zxcES(zxcimgs[zxc0],{position:'absolute',left:zxclft+'px',top:zxctop+'px',width:zxcwh+'px',height:zxcwh+'px'});
      zxclft+=zxcwh;
      zxclft=(zxc0==3||zxc0==5||zxc0==7)?0:(zxc0==4||zxc0==6)?zxcwh*3:zxclft;
      zxctop=(zxc0==3||zxc0==5||zxc0==7)?zxctop+zxcwh:zxctop;
      zxcOpacity(zxcimgs[zxc0],50);
      zxcAddEvt(zxcimgs[zxc0],'zxcDisplayMse','mouseover');
      zxcAddEvt(zxcimgs[zxc0],'zxcDisplayMse','mouseout');
      zxcp.main[zxc0]=zxcES(zxcimgs[zxc0].cloneNode(false),{position:'absolute',left:zxcwh+'px',top:zxcwh+'px',width:zxcwh*2+'px',height:zxcwh*2+'px'},zxcp);
      zxcp.main[zxc0].oop=new zxcDisplayOpac(zxcp.main[zxc0],zxcspd);
      zxcOpacity(zxcp.main[zxc0],0);
     }
    }
    
    function zxcDisplayMse(zxcevt){
     zxcOpacity(this,(zxcevt.type=='mouseover')?100:50);
     if (zxcevt.type=='mouseover'){
      var zxcp=this.parentNode;
      for (var zxc0=0;zxc0<zxcp.main.length;zxc0++){
       zxcES(zxcp.main[zxc0],{zIndex:(zxcp.main[zxc0].src==this.src)?'1':'0'});
       zxcp.main[zxc0].oop.opacud=(zxcp.main[zxc0].src==this.src)?1:-1;
       zxcp.main[zxc0].oop.fade();
      }
     }
    }
    
    var zxcOOPCnt=0;
    
    function zxcDisplayOpac(zxcimg,zxcspd){
     this.to=null;
     this.ref='zxc'+zxcOOPCnt++;
     window[this.ref]=this;
     this.opac=0;
     this.img=zxcimg;
     this.spd=zxcspd;
    }
    
    zxcDisplayOpac.prototype.fade=function(){
     if ((this.opacud>0&&this.opac<100)||(this.opacud<0&&this.opac>0)){
      zxcOpacity(this.img,this.opac+=this.opacud)
      this.setTimeOut('fade()',this.spd);
     }
    }
    
    zxcDisplayOpac.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    
    function zxcOpacity(zxcobj,zxcopc) {
     if (zxcopc<0||zxcopc>100){ return; }
     if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')';	}
     else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
    }
    
    
    //-->
    </script>
    </head>
    
    <body onload="zxcInitDisplay('test',50);">
    <div id="test" style="position:relative;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width="100" height="100" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="100" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="100" height="100" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="100" height="100" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width="100" height="100" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" width="100" height="100" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" width="100" height="100" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Eight.gif" width="100" height="100" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Nine.gif" width="100" height="100" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width="100" height="100" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" >
    
    </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
    •