Javascript Menubar problem

[Dan]

I wrote this code to display a list of menu items when the user mouseover's a perticular image. It works ok, but when I add the following line it only goes through and does the first image from the first aray. I can not figure out why.

Code:

//Array info is above//

dropimages=new Array(drop1,drop2,drop3,drop4,drop5,drop6,drop7);
names=new Array('theatre','cable','vacuum','dss','alarm','intercom','phone');
brwdth=window.document.body.clientWidth;
cntwdth=brwdth/2;
startX=275;
startY=cntwdth-205;
for (i=0;i<dropimages.length;i++) {
currntArry = dropimages[i];
TotSize = ((currntArry.length/2)*20);
startX=(260+(i*20));
totalcont = window.document.createElement('div');
window.document.body.appendChild(totalcont);
totalcont.style.top=startX;
totalcont.style.position='absolute';
totalcont.style.left=startY;
totalcont.style.width=170;
totalcont.style.height=TotSize;
totalcont.style.backgroundColor='red';
totalcont.id=names[i]+'a1';
totalcont.style.visibility='visible';
newX=0;

for (k=0;k<currntArry.length;k++) {

cont=window.document.createElement('div');
totalcont.appendChild(cont);
cont.style.top=newX
newX=newX+19;
cont.style.position='absolute';
cont.id=names[i] + 'dropcont';
cont.style.left=1;
cont.style.width=160;
cont.style.height=18;
cont.style.backgroundColor='black';
cont.style.visibility='inherit';
temp=window.document.createElement('img');
temp.style.position='absolute';
cont.appendChild(temp);
temp.src=currntArry[k];
temp.lnk="test";
temp.cont=cont;
temp.style.top=1;
temp.style.left=0;
temp.style.height=16;
temp.style.width=160;
temp.id='dropitem'+k;
temp.cont=cont;
temp.style.visibility='inherit';
temp.style.cursor='hand';

// if I insert "temp.onmouseover=alert("test");" it give me one alert when loading the page and then nothing //
k++;
}
}

so like stated right about here, when i insert anything to run on the onmouseover property of temp it runs once when loading the page, and then not at all, plus the loop is exited and none of the other arrayed items are created. This one has me way confused... any help would be appreciated.

Daniel

[Dan]

I add the following and still get the same problem...
temp.onmouseover=alert("over");
temp.onmouseout=alert("out");

i get an alert box saying "over" when i load the page and then no matter where i put my mouse i dont get anything else, plus it only loads the first image of the array...

Daniel

[Dan]

as reguested here is the total page... there are to script included files but one is just for the image rollovers and the other is formatting for the content section... i have removed both and the problem still persisted... anyways any help would be greatly appreciated.

Daniel

[khalidali63]

Are you trying to attach event to this DIV?

[Dan]

i dont think so i believe the event is attached to the image...
temp is a childnode of the div cont though which has a parentnode of totalcont which is also a div

[khalidali63]

You are creating a menu,and you want to assosciate mouse over and out events with it so when mouse is brought over the menu image it does something?

[Dan]

thats correct... they mouse over... rollover and status bar changed... they click ... takes them to set link... at least thats what i am hoping for...

Daniel

[khalidali63]

here you go

Cheers

Khalid

[Dan]

Cool it works... but could you explain to me why... and why the way I was doing it didnt work? I would really appreciate it.

Daniel

[khalidali63]

To attache an event to any element you have to use the syntax I sent you,the way you were doing it would call the fiunction and thats all but it wasn't really attaching the event for your purpose.

Might want to read on adding events in DOM specs...to get get a broader understanding.
The method I have written is a universal,it will work for both NS or IE browsers

Cheers

Khalid