SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help on multi-dimensional arrays with image rollovers

    Hi,

    I'm trying to get rollover images to work that are a little more complex than usual. I have a webpage that presently gives information on four groups within an organization. I've put each group within its own div with an id. The div contains a short description of what the group does, thumbnails pictures of each member of the group, and to the right of these thumbnails, a larger picture. This larger picture is supposed to change, when ever the mouse is over a thumbnail to a normal size picture of the thumbnail, for the first part.

    I tried to put in a script that will preload all the original images that should be changed. First I created an array with all the names of the divs, then used two for loops, one nested inside the other to get the pictures into the array. Tried to get the names of the array to hold the pictures from the first array with the names (inames), using a two dimensional array (used an example from a post on this forum) but it seemed to have gone astray, as the onmouseover doesn't work.

    The code is listed below. Any help indicating where I might have gone wrong will be appreciated.

    var inames = new Array('board', 'credit', 'superv', 'staff');
    //preload images

    for(y=0; y<inames.length; y++) {
    var imagel = document.getElementById(inames[y]);
    var imagelst = imagel.getElementByTagName("img");
    inames[y]=new Array();
    for(i=0; i<imagelt.length; i++){
    inames[y][i]=new image();
    inames[y][i].src = "images/"+inames[y]+[i]+".jpg";
    }
    }

    //categ takes on values of bd, cr, sp, sf, cat takes on values of 0 to 3, while num takes on values of 1, 2, 3, etc
    function over(categ, cat, num){
    document.[categ].scr = inames[cat][num].src;
    }

    //categ2 takes on values of bd, cr, sp and sf
    function out(categ2, cat2){
    document.[categ2].src = inames[cat2][0];

    }

    the normal size picture on the right has an id of either bd, cr, sp or sf

    CathyM

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a couple of things:

    1. document.getElementsByName (notice the 's')
    2. where did imagelt come from (the second loop)?

    I'd need to see the html to help you further...like the ID's,etc. Something doesn't appear right with the image names, either...

    HTH,

    Jon

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    re: help on multi-dimensional arrays with image rollovers

    Hi Jon,

    I've corrected the two errors you mentioned, and made a few changes to the code, I removed the multi-dimensional arrays and tried to use just normal arrays. I also added some comments to the script at least for the first run of the script, to show my logics in writing the script. Any errors in logics or otherwise, let me know. The script and the body of the html is below:

    var inames = new Array('board', 'credit', 'superv', 'staff');
    //preload images

    //for the first run
    for(var y=0; y<inames.length; y++) {
    var imagel = document.getElementById(inames[y]); //imagel should = board
    var imagelst = imagel.getElementsByTagName("img"); //imagelst should be a collection of 7 items - board 0 to 6
    var x=inames[y]=new Array(); //should have a new array of board
    alert("value of x is: " + x);
    for(var i=0; i<imagelst.length; i++){
    x[i]=new image(); //should be board[0] = new image()
    x[i].src = "images/"+inames[y]+[i]+".jpg"; //board[0] should = 'images/board0.jpg'
    }
    }

    //categ takes on values of bd, cr, sp or sf, nu takes on the values of 0 to 3, while num takes on values of 1, 2, 3, etc
    function over(categ, nu, num){ //categ = bd, nu = 0, num = 1
    var z = inames[nu]; //nu = 0, z = board,
    alert("value of z is: " + z);
    document.[categ].scr = z[num].src; //should evaluate to document.bd.src =board[1]= 'images/board1.jpg'
    }

    //categ2 takes on values of bd, cr, sp or sf, cat2 takes on the values of 0 to 3
    function out(categ2, cat2){ //categ2 = bd, cat2 = 0
    var k = inames[cat2]; //k should = board
    alert("value of k is: " + k);
    document.[categ2].src = k[0];//should evaluate to document.bd.src = board[0]='images/board0.jpg'
    }

    </script>
    </head>

    <body>
    <div id="board"><img src="images/board0.jpg" id="bd" style="float:right" />
    <img src="images/board1a.jpg" onmouseover="over('bd',0,1)" onmouseout="out('bd',0)" /><img src="images/board2a.jpg" onmouseover="over('bd',0,2)" onmouseout="out('bd',0)"/><img src="images/board3a.jpg" onmouseover="over('bd',0,3)" onmouseout="out('bd',0)"/><img src="images/board4a.jpg" onmouseover="over('bd',0,4)" onmouseout="out('bd',0)" /><img src="images/board5a.jpg" onmouseover="over('bd',0,5)" onmouseout="out('bd',0)" /><img src="images/board6a.jpg" onmouseover="over('bd',0,6)" onmouseout="out('bd',0)" />
    </div><!-- end of board div -->
    <div id="credit"><img src="images/credit0.jpg" id="cr" style="float:right" />
    <img src="images/credit1a.jpg" /><img src="images/credit2a.jpg" /><img src="images/credit3a.jpg" /><img src="images/credit4a.jpg" />
    </div><!-- end of credit div -->
    <div id="superv"><img src="images/superv0.jpg" id="sp" style="float:right" />
    <img src="images/superv1a.jpg" /><img src="images/superv2a.jpg" /><img src="images/superv3a.jpg" />
    </div><!-- end of superv div -->
    <div id="staff"><img src="images/staff0.jpg" id="sf" style="float:right" />
    <img src="images/staff1a.jpg" onmouseover="over('sf',0,1)" onmouseout="out('sf',0)" /><img src="images/staff2a.jpg" onmouseover="over('sf',0,2)" onmouseout="out('sf',0)"/><img src="images/staff3a.jpg" onmouseover="over('sf',0,3)" onmouseout="out('sf',0)"/><img src="images/staff4a.jpg" onmouseover="over('sf',0,4)" onmouseout="out('sf',0)" /><img src="images/staff5a.jpg" onmouseover="over('sf',0,5)" onmouseout="out('sf',0)" />
    </div><!-- end of staff div -->
    </body>

    the mouseover and out actions for credit and superv have not been entered as yet.

    Thanks

    CathyM

  4. #4
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are a few lines here that you should re-think:
    Code:
    var x=inames[y]=new Array();
    That effectively blows out your inames array and creates a new, empty array.

    It looks like your 'preloader' is attempting to turn your initial array of div names into an array of Image objects with the same names as the divs? So you're trying to end up with something like:
    inames[0] has name = 'board' and a .src value (like an image?)

    My suggestion would be to make your initial array and functions a little different (I've used 'board' as the sample and only included the 'over' function):
    Code:
    /*
    Additional objects can be added with {}
    separate each with a comma
    */
    var inames = [
            {name:'board',
              img:[]
            }
            ];
    
    window.onload = function() {
    	for(var y = 0; y < inames.length; y++) {
    		var imagel = document.getElementById(inames[y]['name']);
    		var imagelst = imagel.getElementsByTagName("img");
    		for(var i = 0; i < imagelst.length; i++){
    			var x = inames[y].img[inames[y].img.length] = new Image();
    			x.src = "images/" + inames[y]['name'] + [i] + ".jpg";
    		}
    	}
    };
    function over(categ, nu, num){ //categ = bd, nu = 0, num = 1
    	var z = inames[nu].img[num]; //nu = 0, z = board, 
    	document.getElementById(categ).src = z.src;
    }
    HTH,

    Jon

    Edited to fix a code error
    Last edited by jtrelfa; Aug 11, 2006 at 11:09.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jon,

    Thanks much for your help, it worked like a charm. I was able to add the other groups and fix the out function.

    However, I tried to add a twist to it, but got into a glitch. I am trying to put a text description under the enlarged picture, as well. I created the array with the description of the members, here

    var boardds = ['rollover', 'Mr.Simon Leon - President', 'Mr.McArthur Jn.Baptiste', 'Mr. Thaddeus Fontenard - ', 'Mr.Peterson - ', 'Mr.Kenneth Hilaire - ', 'Mr.Wright Fontinelle - ', 'Ms. Shirley Trim - '];

    then changed the out function, by adding some code (last three lines)

    function over(categ, nu, num){ //categ = bd, nu = 0, num = 1
    var z = inames[nu].img[num]; //nu = 0, z = board,
    document.getElementById(categ).src = z.src;

    //to change html text
    var dsT = categ + "ds";
    var dsText = eval(inames[nu]['name']+"ds")[num];
    document.getElementById(dsT).innerHtml = dsText;
    }

    when that didn't work I tried that function

    function overText(catg, nus, nums){
    var textName = inames[nus]['name']; //should evaluate to board
    var changeText = textName + 'ds'[nums]; //should evaluate to boardds[1]
    var paragraphText = document.createTextNode(changeText);
    var newParagraph = document.createElement("p");
    newParagraph.appenchild(paragraphText);

    var existingParagraph = document.getElementById(catg+"ds");//should evaluate to bdds
    var parent = existingParagraph.parentNode;
    var newChild = parent.replaceChild(newParagraph, existingParagraph);
    }

    and called both functions over and overText with the onmouse over, that did not work either

    The text I am trying to change in the body is

    <p id="bdds">Find out my name and role</p>

    I've search for assistance in the forum and tutorials but nothing to solve my problem. Any help appreciated.

    CathyM

  6. #6
    SitePoint Member jtreefrog's Avatar
    Join Date
    Nov 2003
    Location
    Roseville, Mi
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just as a suggestion, you should avoid using 'eval' if you can:
    http://24ways.org/advent/dont-be-eval

    Also, insert your code snippets using the '['code']' blocks - it's easier to differentiate between the message and the code. (It's the # sign in the toolbar)

    I digress (sorry) -

    I'm going to switch things around a bit. Why not create an object for each person? Then you can pass the object into a function that displays what you're looking for (I've put a couple of people in there):
    Code:
    var people = [
      {
        name:'Mr.Simon Leon - President',
        image:'images/image1.jpg', 
        img: ''
      },
      {
        name:'Mr.McArthur Jn.Baptiste',
        image:'images/image2.jpg',
        img: ''
      }
    ];
    On your preloader, you'd still do (sorta) the same thing - but with a different twist:
    Code:
    window.onload = function() {
      for(var i = 0; i < people.length; i++) {
    	people[i].img = new Image();
    	people[i].img.src = people[i].image; //uses the string from the object
      }
    };
    
    function loadImage(obj,dest) {
      document.getElementById('bdds').innerHTML = obj.name;
      document.getElementById(dest).src = obj.img.src;
    }
    function unloadImage(dest) {
      //restore original data here
      document.getElementById('dest').innerHTML = "";
    }
    You'll notice that I used an "image" attribute of the 'person' to make the preloader load the image - so you're able to (somewhat) dynamically pre-load the images by adding more objects to the people array. In addition, an object and a destination is sent to the loadImage function to put your image object into the right spot.

    From here, you can alter your onmouseover event:
    HTML Code:
    <img src="image1a.jpg" onmouseover="loadImage(people[0],'board');" onmouseout="unloadImage('board');" />
    This should make things a little simpler by moving all of the data into the 'people' array and then just passing objects within the array to the various functions.

    You can re-factor to reduce the number of functions by having a 'default' object that has the rollout image - then just use that object in the unloadImage() function to reset all the divs (I'm just thinking out loud at this point).

    Let me know if this works out,

    Jon

    I didn't realize I had two sitepoint logins - but it turns out I have a diff cookie set at my work computer and my home computer! I'm the same person that's been posting to this one
    Give a man a match, and he'll be warm for a minute, but set him on fire, and he'll be warm for the rest of his life.

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jon,

    It worked to a certain extent, in that it works fine in Opera (9), but in Firefox and IE, while the text will change, no picture will show, I tried right clicking on the placeholder for the picture and I get a url undefined. With IE it has another quirk, not sure it is because I have two javascripts on the page, but it passed validation.

    The cut down version of the script is here:

    ___________________________________________________________
    var people = [
    { name: 'Roll mouse over thumbnail picture to the left, to see enlarged picture with name and position here',
    image:'images/board0.jpg',
    img:''
    },
    {
    name:'Mr. Simon Leon - President',
    image:'images/board1.jpg',
    img:''
    },
    {
    name:'Mr. McArthur Jn.Baptiste',
    image:'images/board2.jpg',
    img:''
    },
    {
    name:'Mr. Thaddeus Fontenard',
    image:'images/board3.jpg',
    img:''
    }
    ];

    //preload images

    window.onload = function() {
    for(var y = 0; y < people.length; y++) {
    people[y].img = new Image();
    people[y].img.src = people[y].image;
    }
    };

    function changeImage(obj, dest, pdesc) {
    document.getElementById(pdesc).innerHTML = obj.name;
    document.getElementById(dest).src = obj.img.src;
    }
    <body>
    <img src="images/board0.jpg" id="bd" style="float:right" width="140" height="160" alt="" />
    <a href="#" onmouseover="changeImage(people[1],'bd', 'bdds')" onmouseout="changeImage(people[0],'bd', 'bdds')"><img src="images/board1a.jpg" width="50" height="57" alt="" /></a><a href="#" onmouseover="changeImage(people[2],'bd','bdds')" onmouseout="changeImage(people[0],'bd','bdds')"><img src="images/board2a.jpg" width="50" height="57" alt="" /></a><a href="#" onmouseover="changeImage(people[3],'bd','bdds')" onmouseout="changeImage(people[0],'bd','bdds')"><img src="images/board3a.jpg" width="50" height="57" alt="" /></a>
    </body>


    ____________________________________________________________
    I changed the function a little and use one function instead of two. Also tried pressing the # to block the code, it didn't seem to work for me. The page I used the script on can be viewed at www.fibjonline.com/nfccu2/aboutus3.php and the full script at www.fibjonline.com/nfccu2/memberspics2.js.

    CathyM

  8. #8
    SitePoint Member jtreefrog's Avatar
    Join Date
    Nov 2003
    Location
    Roseville, Mi
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Errr...

    I apologize - but I made a small error in my suggestion. In your object, change the 'name' attribute to something else. 'name' is a reserved word.

    I changed the property to 'desc' and altered the changeImage function to use 'desc' instead of 'name' and re-ran your code it it appears to work fine.
    Give a man a match, and he'll be warm for a minute, but set him on fire, and he'll be warm for the rest of his life.

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Tried that, but the only difference is that now I get boxes with little red x at the top left hand corner in both firefox and ie. It still works perfectly in opera.

    The code can be seen at http://www.fibjonline.com/nfccu2/aboutus.php and http://fibjonline.com/nfccu2/memberspics.js

    I tried it on a few computers to see if mine was the problem, but it all appeared with the same error

    CathyM

  10. #10
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Tried that, but the only difference is that now I get boxes with little red x at the top left hand corner in both firefox and ie. It still works perfectly in opera.

    The code can be seen at http://www.fibjonline.com/nfccu2/aboutus.php and http://fibjonline.com/nfccu2/memberspics2.js

    I tried it on a few computers to see if mine was the problem, but it all appeared with the same error

    CathyM

  11. #11
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's odd. Let me take a closer look at what I did to make it all work - maybe I changed more than just that item and didn't note it here for you.

  12. #12
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jon,

    Figured it out, I already had an onload function in the main php file when I added another one to the js file, which promptly got overwritten when the page loaded. It worked when testing on the local hard drive, but not when loaded to the server. Just created a function to call all the onload function and it worked fine.

    Thanks much for all your help.

    CathyM

  13. #13
    SitePoint Member jtreefrog's Avatar
    Join Date
    Nov 2003
    Location
    Roseville, Mi
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the delayed response. I was out of town and just got back this evening. Glad you got it figured out!!
    Give a man a match, and he'll be warm for a minute, but set him on fire, and he'll be warm for the rest of his life.


Bookmarks

Posting Permissions

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