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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    disjoint rollovers with image and text

    Hello,
    I am trying to create some rollovers using the following scenario. I have four groups, let’s say hearts, diamonds, clubs and spades. Each of these groups have a varied amount of members. For each group, there is a short description of what the group is supposed to do, and then thumbnails of each of the members. To the right of the thumbnails is an image that holds a standard image, but would change to the enlarged picture of the member when the mouse is over the member's thumbnail, and below that image is another area which will hold the person name and position if any within that group. Basically there are four rollover groups. I can do the rollover for an image okay as in this code, adding more variables and images as necessary using something like this.

    var h1_on = new Image();
    h1_on.src = "images/hearts1.jpg";
    var h1_desc = new Image();
    h1_desc.src = "images/heartsDesc1.jpg";

    //categ determines the category either hearts, diamonds, clubs or spades, while shows determines
    //the category and actual number h1, h2,h3, etc
    function over(categ,shows) {
    var descriptions = [categ]+"below";
    document[categ].src = eval(shows + "_on.src");
    document[descriptions].src = eval(shows + "_below.src");
    }
    //picName determines the category, the same picture appears for each thumbnail in the same category
    function out(picName) {
    var descript = [picName]+"below";
    document[picName].src = "images/member6.jpg";
    document[descrip].src = "images/member5.jpg";
    }

    However, I want to preload the images, and use arrays to hold the descriptions and images of the four groups. I figure out I have to put in four separate arrays each for the descriptions and images. I checked out scripts on the net, and got something like this.

    if (document.images){
    var flippedH = new Array();
    for(i=0; i<6; i++){
    flippedH(i)=new image();
    flippedH(i).src = "images/hearts"+[i+1]+".jpg";
    }
    }

    but I figure out using - if(document.images){ - would utilize all the images on the page, but I need to put the different images in different arrays, how can I capture only a specific set of images for each array, should I put each group in separate divs and then utilize the id of the div?

    Also for the functions, as listed below, flipped+[categ][num] should evaluated as flippedS[2] for example, but I am not sure if how I place the square brackets will work.

    //categ takes on values of H, D, C or S while num takes on values of 1, 2, 3, etc
    function over(categ, num){
    if (document.images){
    document.images.holdings[categ].scr = flipped+[categ][num].src;
    }
    document.descrip[categ] = descrip[categ][num]
    }

    //categ2 takes on values of H, D, C and S
    function out(categ2){
    document.images.holdings[categ2].src = flipped[categ2][0];
    document.descrip[categ2] = descrip[categ][0]
    }

    Any help appreciated.

    CathyM

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 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">
    .imgd {
      position:absolute;z-index:1;visibility:hidden;left:0px;top:0px;
    }
    .divd {
      position:absolute;z-index:1;visibility:hidden;left:0px;top:200px;width:100%;height:50px;background-color:#FFFFCC;
    }
    
    
    </style>
    <script type="text/javascript">
    
    function SwapImg(id,img){
     var imgs=document.getElementById(id).getElementsByTagName('IMG');
     var ds=document.getElementById(id).getElementsByTagName('DIV');
     for (var zxc0=1;zxc0<imgs.length;zxc0++){
      ds[zxc0].style.visibility='hidden';
      imgs[zxc0].style.visibility='hidden';
      if (imgs[zxc0].src.match(img)){
       ds[zxc0].style.visibility='visible';
       imgs[zxc0].style.visibility='visible';
      }
     }
    }
    
    </script>
    </head>
    
    <body>
    <a onmouseout="SwapImg('Grp1','XXX')" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" onmouseover="SwapImg('Grp1','One')" />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" onmouseover="SwapImg('Grp1','Two')"/>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50"onmouseover="SwapImg('Grp1','Three')" />
    </a>
    <br />
    <div id="Grp1" style="position:relative;width:200px;height:200px;" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Nine.gif" width="200" height="200" />
    <img class="imgd" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="200" height="200" />
    <img class="imgd" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="200" height="200" />
    <img class="imgd" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="200" height="200" />
    <div class="divd" style="visibility:visible;z-index:0;" >Text Std</div>
    <div class="divd" style="" >Text 1</div>
    <div class="divd" style="" >Text 2</div>
    <div class="divd" style="" >Text 3</div>
    </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/

  • #3
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, the code works, now modifying it to work on my site.

    CathyM

  • #4
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've tried modifying it, but it requires that I put each of the larger images on the webpage and text and put as hidden. I'm dealing with at least four groups here, which may have between 3 to 12 members. Adding both thumbnails and the images, requires alot of typing on the page, is there a way around that?

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    .imgd {
      position:absolute;z-index:1;visibility:hidden;left:0px;top:0px;
    }
    .divd {
      position:absolute;z-index:1;visibility:hidden;left:0px;top:200px;width:100%;height:50px;background-color:#FFFFCC;
    }
    
    
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    var Ary=[];
    Ary[0]=['http://www.vicsjavascripts.org.uk/StdImages/','One.gif',200,200,'Text 1','divd'];
    Ary[1]=[null,'Two.gif',200,200,'Text 2','divd'];
    Ary[2]=[null,'Three.gif',200,200,'Text 3','divd'];
    Ary[3]=[null,'Four.gif',200,200,'Text 4','divd'];
    
    
    function zxcCreate(zxcid,zxcary){
     var zxcobj=document.getElementById(zxcid);
     for (var zxc0=0;zxc0<zxcary.length;zxc0++){
      for (var zxc1=0;zxc1<zxcary[zxc0].length;zxc1++){ zxcary[zxc0][zxc1]=(zxcary[zxc0][zxc1]||zxcary[zxc0-1][zxc1]); }
      var zxcimg=zxcStyle('IMG',{position:'absolute',zIndex:'1',visibility:'hidden',left:'0px',top:'0px',width:(zxcary[zxc0][2])+'px',height:(zxcary[zxc0][3])+'px'});
      zxcimg.src=(zxcary[zxc0][0]||zxcary[zxc0-1][0])+zxcary[zxc0][1];
      zxcobj.appendChild(zxcimg);
      var zxcd=zxcStyle('DIV',{position:'absolute',zIndex:'1',visibility:'hidden',left:'0px',top:(zxcimg.offsetHeight)+'px'},zxcary[zxc0][4]);
      zxcd.className=zxcary[zxc0][5];
      zxcobj.appendChild(zxcd);
     }
    }
    
    function zxcStyle(zxcele,zxcstyle,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    
    
    function SwapImg(id,img){
     var imgs=document.getElementById(id).getElementsByTagName('IMG');
     var ds=document.getElementById(id).getElementsByTagName('DIV');
     for (var zxc0=1;zxc0<imgs.length;zxc0++){
      ds[zxc0].style.visibility='hidden';
      imgs[zxc0].style.visibility='hidden';
      if (imgs[zxc0].src.match(img)){
       ds[zxc0].style.visibility='visible';
       imgs[zxc0].style.visibility='visible';
      }
     }
    }
    
    //-->
    </script>
    
    
    </head>
    
    <body onload="zxcCreate('Grp1',Ary);" >
    
    <a onmouseout="SwapImg('Grp1','XXX')" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" onmouseover="SwapImg('Grp1','One')" />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" onmouseover="SwapImg('Grp1','Two')"/>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50"onmouseover="SwapImg('Grp1','Three')" />
    </a>
    <br />
    
    
    <div id="Grp1" style="position:relative;width:200px;height:200px;" >
    <img  src="http://www.vicsjavascripts.org.uk/StdImages/Nine.gif" width="200" height="200" />
    <div class="divd" style="visibility:visible;z-index:0;" >Text Std</div>
    </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/

  • #6
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks,

    Before I implement it, I will try to decipher it to make sure I understand it, so when to use something similar or want to modify it, I can do so without pulling out my hair. If I have any questions I will let you know. One question on the script, is the position: absolute necessary, the pictures I am using are interspersed with text, which may flow across the screen based on size and resolution, so where the original pictures appear will differ. I supposed I can create a script to obtain the position of the images on the page and use that, but that can be obtained after the page has loaded.

    CathyM


  •  

    Posting Permissions

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