• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 405
  • Last Modified:

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>
0
894359
Asked:
894359
  • 6
  • 5
1 Solution
 
archrajanCommented:
try
document.getElementById('imageid').src = temp;
instead of
document.images[name].src=temp;
0
 
archrajanCommented:
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);
0
 
archrajanCommented:
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
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
894359Author Commented:
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();
        
      };
0
 
archrajanCommented:
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
0
 
894359Author Commented:
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
0
 
894359Author Commented:
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!
0
 
archrajanCommented:
<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){
      
        name = name.id
     
      var temp = "http://images.ea.com/eagames/official/timesplitters/timesplitters/us/online/statsbygm/nav/nav_" + name + "_select.gif";
         document.getElementById(name).src=temp;
        document.getElementById(name).setAttribute('hsrc',temp);
        document.getElementById(name).setAttribute('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(this);return false;" id = "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(this);return false;" id = "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(this);return false;" id = "sgm3"></td>
      </tr>
   </table>

</body>
</html>
0
 
894359Author Commented:
What does this line do???

name = name.id
0
 
archrajanCommented:
it just assigns the objects'id to the variable name
0
 
894359Author Commented:
Thanks a billion! :) This was driving me crazy!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now