asked on

document.images has no properties error

I have the following code which works in IE but not in Netscape or firefox. It gives me a:

"document.images[names] has no properties error for this line:

document.images[name].src=temp;

If I put an alert in before the above line of code, it works. I tried setTimeout but that doesn't work??? Any ideas???

/////////////////////////////////////////////////

<html>
<head>
<script language=javascript>

      function init() {

      if (!document.getElementById) return
      var imgOriginSrc;
      var imgTemp = new Array();
      var imgarr = document.getElementsByTagName('img');
      for (var i = 0; i < imgarr.length; i++)
      {
            if (imgarr[i].getAttribute('hsrc'))
            {
                  imgTemp[i] = new Image();
            imgTemp[i].src = imgarr[i].getAttribute('hsrc');
                  imgarr[i].onmouseover = function()
                  {
                   imgOriginSrc = this.getAttribute('src');
                   this.setAttribute('asrc',this.getAttribute('src'))
                   this.setAttribute('src',this.getAttribute('hsrc'))
                    }
            imgarr[i].onmouseout = function()
                  {
                        if(!imgOriginSrc){
                              if( this.getAttribute('asrc') ) {
                                    imgOriginSrc=this.getAttribute('asrc');
                              } else {
                                    imgOriginSrc=this.getAttribute('src');
                              }
                        }
              this.setAttribute('src',imgOriginSrc)
             }
            }
      }

};

function clearTitles2(name){

document.images.sgm1.src="http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm1.gif";
document.images.sgm2.src="http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm2.gif";
document.images.sgm3.src="http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm3.gif";

document.images.sgm1.hsrc="http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm1_over.gif";
document.images.sgm2.hsrc="http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm2_over.gif";
document.images.sgm3.hsrc="http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm3_over.gif";
       //alert("spot 1");
       p2(name);
       }

       function p2 (name){

       var temp = "http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_" + name + "_select.gif";
       document.images[name].src=temp;
       document.images[name].hsrc=temp;
       document.images[name].asrc=temp;

       init();

      };

</script>
</head>

<body leftmargin=0 topmargin=0 marginheight=0 marginwidth=0 bgcolor="#000000" onload="init();">
<center>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=62>
<a href="#"><img src="http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm1_select.gif" hsrc="http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm1_over.gif" width=102 height=27 border=0 name=sgm1 onclick="javascript:clearTitles2('sgm1');"></a></td>
<td width=95>
<a href="#"><img src="http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm2.gif" hsrc="http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm2_over.gif" width=146 height=27 border=0 name=sgm2 onclick="javascript:clearTitles2('sgm2');"></td>
<td width=70>
<a href="#"><img src="http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm3.gif" hsrc="http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm3_over.gif" width=137 height=27 border=0 name=sgm3 onclick="javascript:clearTitles2('sgm3');"></td>
</tr>
</table>

</body>
</html>

archrajan

try
document.getElementById('imageid').src = temp;
instead of
document.images[name].src=temp;

archrajan

And this lines

document.images[name].hsrc=temp;
document.images[name].asrc=temp;

has to be

document.getElementById(name).setAttribute('hsrc',temp);
document.getElementById(name).setAttribute('asrc',temp);

archrajan

also where do u see the errors????
in firefox and IE a black page with 3 buttons in the top is opened.. and i dont get any errors when i click them

ASKER

I tried what you suggested and had the same issues:
document.getElementById("imageid") has no properties

/////////////////////////////////////
function I changed
////////////////////////////////

function p2 (name){

             var temp = "http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_" + name + "_select.gif";

            document.getElementById('imageid').src      = temp;
             document.getElementById(name).setAttribute('hsrc',temp);
            document.getElementById(name).setAttribute('asrc',temp);

             init();

      };

archrajan

this line
document.getElementById('imageid').src = temp;
shud be
document.getElementById(name).src = temp;

because u r getting it from the function right?

and when you call ur function p2 u shud pass the id of the image as an argument

ASKER

The error I'm getting in Netscape and Firefox are after an image is clicked. The image should change to a dark blue inset background.

example:

http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_sgm1_select.gif

ASKER

Sorry .. I changed that line and I still get the error

document.getElementById(name) has no properties

I am passing name in to the function!

ASKER CERTIFIED SOLUTION

archrajan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

What does this line do???

name = name.id

archrajan

it just assigns the objects'id to the variable name

ASKER

Thanks a billion! :) This was driving me crazy!