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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image problem - JS assistance

    Hello, I would like some help on my site.

    I am going to have pictures, that is aligned in a row, next to eachother.
    It is only possible to see three pictures like this:

    Picture1 Picture2 Picture3

    Picture2 is the one in the middle and the one you can see correctly, but when you hover your mouse over Picture3, Picture2 & Picture1 moves to the left, leaving Picture1 out of sight, in a blank area, and a new picture shows up after Picture3.

    Picture2 Picture3 Picture4

    And the same happens if you hover your mouse over Picture1 but the other way around, like instead of Picture4 showing up, Picture0 shows up and Picture3 disappeares.

    When you hover over any picture that is in the middle, nothing happens.

    If anyone knows a javascript that is similar to this, it would be great if you could post it, and maybe explain how I would insert it into my html.

    Thanks.
    zyiiilo

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    welcome

    best to post your code

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    That is the problem

    My problem is that I know nothing about JS, so I have no code, but I am willing to experiement with codes that you guys support me with.

    Thanks again.
    zyiiilo

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    try this

    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">
    <!--
    
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var ImgAry=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');
    var ImgCnt=1;
    
    function MoveImg(obj,dir){
     imgs=obj.parentNode.getElementsByTagName('IMG');
     ImgCnt+=dir;
     if (ImgCnt>ImgAry.length-imgs.length){ ImgCnt--; }
     if (ImgCnt<0){ ImgCnt=0; }
     for (i=0;i<imgs.length;i++){
      imgs[i].src=ImgPath+ImgAry[ImgCnt+i];
     }
    
    
    }
    //-->
    </script>
    
    </head>
    
    <body>
    <span >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=100 height=100 onmouseover="MoveImg(this,-1);">
    <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 onmouseover="MoveImg(this,1);" >
    </span>
    <br>Picture1 Picture2 Picture3<br>
    <br>
    Picture2 is the one in the middle and the one you can see correctly,<br>
    but when you hover your mouse over Picture3, Picture2 & Picture1 moves to the left,<br>
    leaving Picture1 out of sight, in a blank area,<br>
    and a new picture shows up after Picture3.
    
    Picture2 Picture3 Picture4
    
    And the same happens if you hover your mouse over Picture1 but the other way around,<br>
    like instead of Picture4 showing up, Picture0 shows up and Picture3 disappeares.
    </body>
    
    </html>

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Excvellent

    I love you man, thanks a bunch

    Do you know if its possible to delay the pictures from changing so it looks like its sliding?

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    sliding require different techniques

    do you want each image to slde individually of all three from left and right?

  • #7
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Yeah

    Yes, that would be great, just as you did it but that the pictures slide instead of changing so fast...

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <html>
    <head>
    </head>
    <body onload="zxcInitGroup('ImgGrp1',zxcImgAry);zxcInitGroup('ImgGrp2',zxcImgAry);">
    
    
    <div id="ImgGrp1" style="position:relative;width:300px;height:100px;" >
     <div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
     <div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
     <div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
     <div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
    </div>
    <br>
    <br>
    <div id="ImgGrp2" style="position:relative;" >
     <div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
     <div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
     <div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
    </div>
    
    <script>
    // by Vic Phillips (15-08-2005) http://www.vicsjavascripts.org.uk
    
    var zxcImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var zxcImgAry=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');
    var zxcSRCAry=new Array();
    
    for (zxc0=0;zxc0<zxcImgAry.length;zxc0++){
     zxcSRCAry=new Image();
     zxcSRCAry.src=zxcImgPath+zxcImgAry[zxc0];
    }
    
    var zxcObj,zxcDir;
    var zxcAry=new Array();
    var zxcACnt=0;
    
    function zxcInitGroup(zxcid,zxcary){
     zxcAry[zxcACnt]=document.getElementById(zxcid);
     zxcAry[zxcACnt].divs=zxcAry[zxcACnt].getElementsByTagName('DIV');
     zxcAry[zxcACnt].divs[0].onmouseover=function(){ zxcChange(this.parentNode,1); }
     zxcAry[zxcACnt].divs[zxcAry[zxcACnt].divs.length-1].onmouseover=function(){ zxcChange(this.parentNode,-1); }
     for (zxc0=0;zxc0<zxcAry[zxcACnt].divs.length;zxc0++){
      zxcAry[zxcACnt].divs[zxc0].style.top='0px';
      zxcAry[zxcACnt].divs[zxc0].style.left=(zxcAry[zxcACnt].divs[zxc0].offsetWidth*zxc0)+'px';
      zxcAry[zxcACnt].divs[zxc0].cnt0=zxc0;
      for (zxc1=0;zxc1<zxcary.length;zxc1++){
       zxcimg=document.createElement('IMG');
       zxcimg.src=zxcImgPath+zxcary[zxc1];
       zxcimg.width=(zxcAry[zxcACnt].divs[zxc0].offsetWidth);
       zxcimg.height=(zxcAry[zxcACnt].divs[zxc0].offsetHeight);
       zxcAry[zxcACnt].divs[zxc0].appendChild(zxcimg);
       zxcimg.style.position='absolute';
       zxcimg.style.zIndex=0;
       zxcimg.style.top='0px';
       zxcimg.style.left=(zxcAry[zxcACnt].divs[zxc0].offsetWidth)+'px';
      }
      zxcAry[zxcACnt].divs[zxc0].imgs=zxcAry[zxcACnt].divs[zxc0].getElementsByTagName('IMG')
      zxcAry[zxcACnt].divs[zxc0].imgs[zxc0].style.left='0px';
     }
     zxcACnt++;
    }
    
    function zxcChange(zxcobj,zxcdir){
     if (zxcObj){ return; }
     zxcDir=zxcdir;
     for (zxc0=0;zxc0<zxcobj.divs.length;zxc0++){
      zxcobj.divs[zxc0].last=zxcobj.divs[zxc0].imgs[zxcobj.divs[zxc0].cnt0];
      zxcobj.divs[zxc0].last.style.zIndex=0;
      zxcobj.divs[zxc0].cnt0+=zxcDir;
      if (zxcobj.divs[zxc0].cnt0>=zxcobj.divs[zxc0].imgs.length){ zxcobj.divs[zxc0].cnt0=0; }
      if (zxcobj.divs[zxc0].cnt0<0){ zxcobj.divs[zxc0].cnt0=zxcobj.divs[zxc0].imgs.length-1; }
      zxcobj.divs[zxc0].next=zxcobj.divs[zxc0].imgs[zxcobj.divs[zxc0].cnt0];
      zxcobj.divs[zxc0].next.style.left=(zxcobj.divs[zxc0].offsetWidth*zxcDir)+'px';
      zxcobj.divs[zxc0].next.style.zIndex=1;
     }
     zxcObj=zxcobj.divs;
     zxcRotate();
    }
    
    function zxcRotate(){
     for (zxc0=0;zxc0<zxcObj.length;zxc0++){
      zxcObj[zxc0].next.style.left=(parseInt(zxcObj[zxc0].next.style.left)-zxcDir)+'px';
     }
     if (parseInt(zxcObj[0].next.style.left)>0&&zxcDir==1){ setTimeout('zxcRotate()',10); }
     else if (parseInt(zxcObj[0].next.style.left)<0&&zxcDir==-1){ setTimeout('zxcRotate()',10); }
     else {
     for (zxc1=0;zxc1<zxcObj.length;zxc1++){
      zxcObj[zxc1].next.style.left='0px';
      zxcObj[zxc1].last.style.left=(zxcObj[zxc1].last.offsetWidth*zxcDir)+'px';
     }
     setTimeout('zxcObj=null;',100);
     }
    }
    
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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