PDA

Click to See Complete Forum and Search --> : returning image from array

russ801
03-12-2003, 04:46 PM
I am trying to manipulate images based on mouseover. I'm not close yet; but my first step is to display an image from an array.

Where have I gone wrong in this snippet?I have tried several variations on this , so it may be worse than my original effort :confused:

<SCRIPT language="JavaScript1.2">

//var x=0
var r=1

alert (r)

var photos = new Array(
new Array("Images/MarH0022V.jpg", "Images/MarH0022T.jpg","Images/MarH0022C.jpg"),
new Array("Images/NicM0421V.jpg","Images/NicM0421T.jpg",null),
new Array("Message-3W.jpg", null,null),
new Array("Message-1W.jpg","Message-3W.jpg",null)
);


//var bigimg= new Image()
var bigimg=(photos[1][0])

alert (bigimg)


/*function blowup(r)*/
var imgSrc = new Array();
for(x=0;x<photos.length;x++){
imgsrc[x] = new Image();
imgsrc[x].src =photos[x][0]
}

alert (x)
eval(document.getElementsByName("bigimg").src = imgsrc[r].src)



</SCRIPT></HEAD>
<BODY bgcolor="#474747">
<TABLE width="478" border="1" cellspacing="0" cellpadding="0" cool gridx="16" gridy="16" height="343" showgridx showgridy usegridx usegridy>
<TBODY>
<TR height="32">
<TD height="342" rowspan="4" width="268"><IMG name=bigimg src="Images/MarH0022V.jpg"></TD>
russ801
03-12-2003, 05:41 PM
I had my doubts about the eval statement.

for this example I set r=1 It will be a parameter in future scripts

so my logic is that the for loop should populate an array with imgsrc[0], imgsrc[1], etc.

However when i put an alert in the for loop 'alert(x), it only returns 0, so I don't know if the array is getting populated.
russ801
03-12-2003, 09:20 PM
the multidimensional array will come in handy later. All of the images in a 'row' are related. I just need to pull the first element at this time.

It still isn't working. I C&P your suggestion and added some debuggin alerts. The first alert returns x=0 and the second alert doesn't trigger.

var imgSrc = new Array();
for(var x=0;x<photos.length;x++){
alert ('x='+x);
img= new Image();
img.src =photos[x][0];
imgsrc[x]=img;
alert (img);
}

some of the syntax changes you made? define new array but use different variable for the 'new image()' statement. Why? Also added another statement to stuff img into the array. makes sense this way but why the extra step?
khalidali63
03-12-2003, 11:38 PM
grrrrrrrrrrr

Well I think here is your bug
look at this statement

var imgSrc = new Array();

and now look at this statement
imgsrc[x]=img;

Can you see the diff?

imgsrc should be imgSrc

Don't I love programming,
the eval thing you do not need so get rid fo that

and let me know
Nedals
03-13-2003, 12:31 AM
<html><head><title></title>
<SCRIPT language="JavaScript1.2">
var r = 0;
var photos = new Array(
new Array("sample.jpg", "Images/MarH0022T.jpg","Images/MarH0022C.jpg"),
new Array("Images/NicM0421V.jpg","Images/NicM0421T.jpg",null),
new Array("Message-3W.jpg", null,null),
new Array("Message-1W.jpg","Message-3W.jpg",null)
);
/*
You don't need all that array stuff. The only time you really need something like that, is when you want to preload images. On second thoughts, maybe you do want it but ONLY for preload, Not part of the flow of this script.
*/
// Preload the images
var imgAry = new Array(); // I use ....Ary. It helps in debug
for(x=0; x<photos[r].length; x++) { // [r] since it's 2 dimensional array
imgAry[x] = new Image();
imgAry[x].src = photos[r][x]; // 2 dimensional array
}

// need this because image element does not yet exist. The page needs to load first.
function setImg() {
document['bigimg'].src = photos[r][0];
}

onload = setImg; // no ()
</SCRIPT>
</HEAD>

<BODY bgcolor="#ffffff">
<TABLE width="478" border="1" cellspacing="0" cellpadding="0">
<TR><TD height="342" width="268"><IMG name=bigimg src=""></TD></tr>
</table>

Mini Tutorial:
When ever you try to address elements on a page, be sure the page has loaded; because page elements don't exist until the page has finished loading.
russ801
03-13-2003, 08:58 AM
spend more time correcting my typing and syntax errors than programming.


Originally posted by khalidali63
grrrrrrrrrrr

Well I think here is your bug
look at this statement

var imgSrc = new Array();

and now look at this statement
imgsrc[x]=img;

Can you see the diff?

imgsrc should be imgSrc

Don't I love programming,
the eval thing you do not need so get rid fo that

and let me know :D
russ801
03-13-2003, 09:20 AM
Thanks. that seems to do the thing.

:)

var r=1


var photos = new Array(
new Array("Images/MarH0022V.jpg", "Images/MarH0022T.jpg","Images/MarH0022C.jpg"),
new Array("Images/NicM0421V.jpg","Images/NicM0421T.jpg",null),
new Array("Message-3W.jpg", null,null),
new Array("Message-1W.jpg","Message-3W.jpg",null)
);


// Preload the images
var imgAry = new Array(); // I use ....Ary. It helps in debug
for(x=0; x<photos.length; x++) { // [r] since it's 2 dimensional array
imgAry[x] = new Image();
imgAry[x].src = photos[r][x]; // 2 dimensional array
}


function setImg() {
document['bigimg'].src = photos[r][0];
}

onload = setImg; // no ()
I could use three arrays (I only need one for this snippet) but the 2D array makes it easier to type and track the elements

The [r] after the photos.length is not required.

yours is much simpler in getting the image into the .src.

I thought about an onload but didn't know I needed to create the image element.

why document[bigimg]. src rather than the document.getelemetby name?

and why onload setimg with out the ()?

Thansk for your time. it works and thats what counts. Just trying to understand what I am doing.

Russ
russ801
03-13-2003, 10:42 AM
the photos.length returns one of two length values

one (without a parameter) returns the number of rows in the array

the other (with a parameter) returns the number of elements in that row

You knew that, but I didn't see it. For the purposes of this snippet , I need the number of rows in the array.

I am now working on the second stage where I need the number of elements in a row.

Thanks for showing me how.
russ801
03-14-2003, 10:38 AM
here is what I eneded up with:

<SCRIPT language="JavaScript1.2">


var r=null
var imgno=0

// create the array to load the full size images , thumbnails and composite pages if applicable
var photos = new Array(
new Array("Images/MarH0022V.jpg","Images/MarH0022T.jpg","Images/MarH0022C.jpg"),
new Array("Images/NicM0421V.jpg","Images/NicM0421T.jpg",null),
new Array("Images/DouB0296V.jpg","Images/DouB0296T.jpg",null),
new Array("Images/SteP0004V.jpg","Images/SteP0004T.jpg",null),
new Array("Images/DiaJ0468V.jpg","Images/DiaJ0468T.jpg",null),
new Array("Images/JudL0015V.jpg","Images/JudL0015T.jpg",null)
);


// Preload the images
var imgAry = new Array();
var imgtn = new Array();
// for each row
for(x=0; x<photos.length; x++) {
imgAry[x] = new Image();//full size images
imgtn[x] = new Image();//thumnails
imgAry[x].src = photos[x][0];
imgtn[x].src = photos[x][1];
}


function setImg() {
document['bigimg'].src = photos[0][0];
document['tn0'].src = photos[0][1];
document['tn1'].src = photos[1][1];
document['tn2'].src = photos[2][1];
document['tn3'].src = photos[3][1];
document['tn4'].src = photos[4][1];
document['tn5'].src = photos[5][1];
}
// image swap function
function Blowup(r) {
document['bigimg'].src = photos[r][0];
imgno=r;
//alert (imgno)

}
//function Composite (imgno) {
//if (photos[imgno][2]=!null)

//}



onload = setImg; // no ()


</SCRIPT> </HEAD>
<BODY bgcolor="#474747" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<TABLE width="600" cellspacing="10" cellpadding="5" cool gridx="16" gridy="16" height="400" showgridx showgridy usegridx usegridy>
<COL span="1" valign="middle" align="center" width="5%">
<TBODY>
<TR height="32">
<TD height="360" rowspan="4" width="360" colspan="3" nowrap valign="middle"><IMG name="bigimg" src=""></TD>
<TD rowspan="4" nowrap height="360"></TD>
<TD height="32" colspan="2" width="123" align="center"></TD>
</TR>
<TR height="96">
<TD height="96" valign="top" align="left" xpos="32"><IMG src="" name="tn0" alt="" height="72" width="48" border="0" onmouseover="Blowup(0);" </td></TD>
<TD height="96" valign="top" align="center" xpos="112"><IMG src="" name="tn1" alt="" height="72" width="48" border="0" onmouseover="Blowup(1);" </td></TD>
<TD width="2" height="96"><spacer type="block" width="1" height="96"></TD>
</TR>
<TR height="96">
<TD height="96" valign="top" align="center" xpos="32"><IMG src="" name="tn2" alt="" height="72" width="48" border="0" onmouseover="Blowup(2);" </td></TD>
<TD height="96" valign="top" align="left" xpos="112"><IMG src="" name="tn3" alt="" height="72" width="48" border="0" onmouseover="Blowup(3);" </td></TD>
</TR>
<TR height="96">
<TD height="96" valign="top" align="center" xpos="32"><IMG src="" name="tn4" alt="" height="72" width="48" border="0" onmouseover="Blowup(4);" </td></TD>
<TD height="118" valign="top" align="left" xpos="112"><IMG src="" name="tn5" alt="" height="72" width="48" border="0" onmouseover="Blowup(5);" </td></TD>
<TD width="1" height="118"><spacer type="block" width="1" height="118"></TD>
</TR>
<TR height="1" cntrlrow>
<TD height="1" width="268"><spacer type="block" width="32" height="1"></TD>
<TD height="1" width="268"></TD>
<TD height="1" width="268"></TD>
<TD></TD>
<TD height="1" align="center"><spacer type="block" width="80" height="1"></TD>
<TD height="1"><spacer type="block" width="79" height="1"></TD>
<TD width="1" height="1"></TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT language="JavaScript1.2" src="subfr.js"></SCRIPT></BODY>
</HTML>

Next step is to develop a display element that will be dependent on the third vaule of the array.