Simple (?) mouseover problem - please check syntax

[Norman Lamont]

I've got the following script in a page. The objective is to have a routine putButton() that will put a simple button with mouseover on the page. There are three types of button: a 'go to the top of the page', and depending on whether the page is in a specific frameset or its own window, 'back' or 'close'.

The script works perfectly except for the mouseover. It gives me the message 'document.all[...] is null or not an object'. I've put a test statement in the mouseover function which shows that the unique name isn't being passed correctly to the mouseover function. I've simplified it as far as I can (originally there was only one document.write, but I put it in each 'if' branch to see if I could isolate what was wrong). The correct image is displayed on the page - only the mouseover image is not working.

The page is for a corporate intranet so I can't put the whole page on the web. If you need more just ask.

<script language="Javascript">
var imgName
var overimgName
var imgId
var which
function putButton(imgId) {
// receive unique name for each image
imgName="" //reset
overimgName="" //reset

if (imgId=="top") {
imgName="http://<%=myhost%>/images/nav/top_1.gif"
overimgName="http://<%=myhost%>/images/nav/top_2.gif"
document.write("<a href='#top' onMouseOver='change(1)' onMouseOut='change(0)'><img src='" + imgName + "' id='" + imgId + "' border='0' alt='Go to the top of the page.' /></a>")
}
else {
if (window.name=="training"){
// in frameset so display back button
imgName="http://<%=myhost%>/images/nav/back_1.gif"
overimgName="http://<%=myhost%>/images/nav/back_2.gif"
document.write("<a href='javascript:history.go(-1)' onMouseOver='change(1)' onMouseOut='change(0)'><img src='" + imgName + "' id='" + imgId + "' border='0' alt='Back to previous screen.' /></a>")
}
else {
// not in frameset so display close button
imgName="http://<%=myhost%>/images/nav/close_1.gif"
overimgName="http://<%=myhost%>/images/nav/close_2.gif"
document.write("<a href='window.close()' onMouseOver='change(1)' onMouseOut='change(0)'><img src='" + imgName + "' id='" + imgId + "' border='0' alt='Close this window.' /></a>")
} //end else
} // end else

}// end fn

function change(toggle){
//alert(imgId) //test
if (toggle==1) {
document.all[imgId].src=overimgName
}
else {
document.all[imgId].src=imgName
}
}
</script>

In the page itself we have, for example, <script language="Javascript">putButton('back1')</script>.

It's obviously a syntax error - maybe because the mouseover instruction is coming before the image Id has been written to the page? Previously I had two parameters being passed to the change() function - the toggle number and imgId, but that didn't work either.

Any suggestions welcome.

[Markdidj]

Install NS7, gives superb error reports...

[dbalsdon]

just wondering... did you add the underscore in

 'java_script_:history.go(-1)'

??

[MikeFoster]

The variable 'imgId', which is declared outside any function, is global. However, the parameter to the function 'putButton()' is also named 'imgId', which makes it a local variable of the function. This is not the same variable as the global 'imgId', they are two different variables with the same name but different 'scope'. A quick fix would be...

<script language="Javascript">
var imgName
var overimgName
var imgId
var which
function putButton(id) {
  imgId = id;
  ...