PDA

View Full Version : Images Properties in Array Disappear!

bliushift
05-17-2007, 10:55 AM
Intended Functionality:

I want images to load from a 3D array of images so I don't have to hard code each menu topic and its corresponding image links into the site.

Problems:

1) The image src is disappearing. Basically, if I display any of the array images src tags, I get the last image src assigned. (i.e. alert(ImageDatabase[0,0,0].src) gives me "electric.jpg" instead of the intended "digital_systems.jpg". "electric.jpg" is the last image source assigned.) Is this problem due the fact that I'm using a 3D array?

2) The images are loading, but wrapping around instead of continuing horizontally. This is due to the fact that I'm replacing dummy images since not all menu topics have the same number of images. Is there a way to fix this or another method to code this?

Thanks for any help.

Code:

<head>
<title>
Test
</title>
<!--
<style type="text/css" media="screen">
@import url( main.css );
</style>
-->
<script language="JavaScript">
<!-- hide from non JavaScript Browsers

var ImageDatabase = new Array(7);
//ImageDatabase[Category, Item #, ImageStatus)
// ImageStatus: 0 = BaseImage, 1 = Description



var ImageSize = new Array(7);

ImageSize[0] = 2;
ImageSize[1] = 2;
ImageSize[2] = 2;
ImageSize[3] = 5;
ImageSize[4] = 2;
ImageSize[5] = 7;
ImageSize[6] = 1;
ImageSize[7] = 5;

for(var count = 0; count <= 7; count++)
{
ImageDatabase[count] = new Array(ImageSize[count]);

for(var count2 = 0; count2 < ImageSize[count]; count2++)
{
ImageDatabase[count, count2] = new Array(3);
}

}

ImageDatabase[0,0,0] = new Image(494,430);
ImageDatabase[0,0,0].src = "digital-systems.jpg";

ImageDatabase[0,1,0] = new Image(494,430);
ImageDatabase[0,1,0].src = "biomedical.jpg";

ImageDatabase[1,0,0] = new Image(494,430);
ImageDatabase[1,0,0].src = "songblog.jpg";

ImageDatabase[1,0,0] = new Image(494,430);
ImageDatabase[1,0,0].src = "startupskunkworks.jpg";

ImageDatabase[2,0,0] = new Image(494,430);
ImageDatabase[2,0,0].src = "azlayout.jpg";

ImageDatabase[2,1,0] = new Image(494,430);
ImageDatabase[2,1,0].src = "koochungticket.jpg";

ImageDatabase[3,0,0] = new Image(494,430);
ImageDatabase[3,0,0].src = "mediaone.jpg";

ImageDatabase[3,1,0] = new Image(494,430);
ImageDatabase[3,1,0].src = "f2oorgframed.jpg";

ImageDatabase[3,2,0] = new Image(494,430)
ImageDatabase[3,2,0].src = "orangeandblueframed.jpg";

ImageDatabase[3,3,0] = new Image(494,430)
ImageDatabase[3,3,0].src = "tascframed.jpg";

ImageDatabase[3,4,0] = new Image(494,430);
ImageDatabase[3,4,0].src = "icaspframed.jpg";

ImageDatabase[4,0,0] = new Image(494,430);
ImageDatabase[4,0,0].src = "magrack.jpg";

ImageDatabase[4,1,0] = new Image(494,430);
ImageDatabase[4,1,0].src = "tascmemcard.jpg";

ImageDatabase[5,0,0] = new Image(494,430);
ImageDatabase[5,0,0].src = "tascshirt.jpg";

ImageDatabase[5,1,0] = new Image(494,430);
ImageDatabase[5,1,0].src = "rizeshirt.jpg";

ImageDatabase[5,2,0] = new Image(494,430);
ImageDatabase[5,2,0].src = "clientplate.jpg";

ImageDatabase[5,3,0] = new Image(494,430);
ImageDatabase[5,3,0].src = "futureplate.jpg";

ImageDatabase[5,4,0] = new Image(494,430);
ImageDatabase[5,4,0].src = "1920's-frame.jpg.jpg";

ImageDatabase[5,5,0] = new Image(494,430);
ImageDatabase[5,5,0].src = "nonfabric.jpg";

ImageDatabase[5,6,0] = new Image(494,430);
ImageDatabase[5,6,0].src = "reclaimed.jpg";

ImageDatabase[6,0,0] = new Image(494,430);
ImageDatabase[6,0,0].src = "portfolio.jpg";

ImageDatabase[7,0,0] = new Image(494,430);
ImageDatabase[7,0,0].src = "violin.jpg";

ImageDatabase[7,1,0] = new Image(494,430);
ImageDatabase[7,1,0].src = "piano.jpg";

ImageDatabase[7,2,0] = new Image(494,430);
ImageDatabase[7,2,0].src = "viola.jpg";

ImageDatabase[7,3,0] = new Image(494,430);
ImageDatabase[7,3,0].src = "acoustic.jpg";

ImageDatabase[7,4,0] = new Image(494,430);
ImageDatabase[7,4,0].src = "electric.jpg";



var split = new Array()
/*
for(var count = 0; count <= 7; count++)
{
for(var count2 = 0; count2 < ImageSize[count]; count2++)
{
split = ImageDatabase[count, count2, 0].split(".");
ImageDatabase[count, count2, 1] = eval(split[0] + "_d.jpg");
}
}
*/
function load(topicnum)
{
alert("Size=" + ImageSize[topicnum]);
for(var count = 0; count < ImageSize[topicnum]; count++)
{
alert("count=" + count);
switch(count + 1)
{
case 0: alert("wtf"); break;
case 1: alert(ImageDatabase[0,0,0].src); imageswap(document.image01, ImageDatabase[0,count,0]); break;
case 2: imageswap(document.image02, ImageDatabase[1,count,0]); break;
case 3: imageswap(document.image03, ImageDatabase[2,count,0]); break;
case 4: imageswap(document.image04, ImageDatabase[3,count,0]); break;
case 5: imageswap(document.image05, ImageDatabase[4,count,0]); break;
case 6: imageswap(document.image06, ImageDatabase[5,count,0]); break;
case 7: imageswap(document.image07, ImageDatabase[6,count,0]); break;
case 8: imageswap(document.image08, ImageDatabase[7,count,0]); break;
case 9: imageswap(document.image09, ImageDatabase[8,count,0]); break;
case 10: imageswap(document.image10, ImageDatabase[9,count,0]); break;
}
}
return true;
}

function imageswap(image1, image2)
{
image1.src = image2.src;
image1.width = image2.width;
image1.height = image2.height;
return true;
}

// - stop hiding -->
</script>
</head>

<body>

<script language="JavaScript">
<!-- hide from non JavaScript Browsers

load(0);

// - stop hiding -->

</script>

<img src="portfolio-popup-3.jpg" usemap="#portfolio-popup-3" style="border-style:none">
<map id="portfolio-popup-3" name="portfolio-popup-3">
<area shape="rect" coords="51,120,159,135" onMouseOver = "load(0);" href="#">
<area shape="rect" coords="51,136,159,150" onMouseOver = "load(1);" href="#">
<area shape="rect" coords="51,150,159,164" onMouseOver = "load(2);" href="#">
<area shape="rect" coords="51,165,159,179" onMouseOver = "load(3);" href="#">
<area shape="rect" coords="51,179,159,192" onMouseOver = "load(4);" href="#">
<area shape="rect" coords="51,193,159,208" onMouseOver = "load(5);" href="#">
<area shape="rect" coords="51,209,159,223" onMouseOver = "load(6);" href="#">
<area shape="rect" coords="51,223,159,238" onMouseOver = "load(7);" href="#">
<area shape="default">
</map>

<img src = "buffer.gif" name = "image01">
<img src = "buffer.gif" name = "image02">
<img src = "buffer.gif" name = "image03">
<img src = "buffer.gif" name = "image04">
<img src = "buffer.gif" name = "image05">
<img src = "buffer.gif" name = "image06">
<img src = "buffer.gif" name = "image07">
<img src = "buffer.gif" name = "image08">
<img src = "buffer.gif" name = "image09">
<img src = "buffer.gif" name = "image10">

</body>
dumpfi
05-17-2007, 04:47 PM
If you do something like thisImageDatabase[3,3,0].src = "tascframed.jpg";you're not assigning to the first element of the fourth element of the fourth element of ImageDatabase. You're assigning to the first element of ImageDatabase.

The is because the comma operator evaluates all the expressions delimited by it (in this case the expressions are all literals so the results of the evaluation are those literals) and the result of the last evaluation is "returned", e.g.:
var a = (myfunc(1,2) , z = 7 + 4 , 2) + 3;This calls myfunc with the parameters 1 and 2, assigns the result of 7 + 4 to z and then a is assigned the result of 2 + 3.

What you probably want is accessing nested arrays and it's done like this:myArray[i][j][k]dumpfi