Problem with seemingly clean code

[lefteyecc]

Hello all I am new to these forums. I have looked about and see many helpful people here and have seen many people inneed of help. I am having a problem however with a simple (seemingly) script that I wrote. Here is is. I keep geting a syntax error dunno why because I am pretty sure the script is written properly

 <script language=\"javascript\">

        function normify(img)
        {
            if(document.images)
            {
                var image_norm = eval(img + \"_norm.src\");
                document[img].src = image_norm;
            }
        }
          
        function greenify(img)
        {
            if(document.images)
            {
                var image_hovered = eval(img + \"_hovered.src\");
                document[img].src = image_hovered;
            }
        }
          
          if(document.images)
          {
             var im_pics = new Array(\"home\", \"files\", \"about\", \"links\", \"samba\", \"cups\", \"webmin\", \"phpmyadmin\", \"phpsurveyor\", \"phpnuke\", \"sugarcrm\");
               for(var i=0; i < im_pics.length; ++i)
               {
                   im_pics[i]_norm = new Image()
                   im_pics[i]_hovered = new Image()
                   im_pics[i]_norm.src = \"admin/pics/im_pics[i] + \".png\"\";
                   im_pics[i]_hovered.src = \"admin/pics/im_pics[i] + \"-green.png\"\";
               }
          }
      </script>

Can anyone here help me try to figure out what's wrong?. I've been debugging this and going at it for the past two days. Dunno wtf is going on.

 

[BillyRayPreachersSon]

You have escaped all your quotes unnecessarily.

Hope this helps,
Dan

 

[adam0101]

You also have syntax errors towards the bottom. Change this:

im_pics_norm.src = \"admin/pics/im_pics + \".png\"\";
im_pics_hovered.src = \"admin/pics/im_pics + \"-green.png\"\";

To this:

im_pics_norm.src = "admin/pics/" + im_pics + ".png";
im_pics_hovered.src = "admin/pics/" + im_pics + "-green.png";



Also, to make it run faster, I'd get rid of the evals.

Change this:

var image_norm = eval(img + \"_norm.src\");

To this:

var image_norm = document.images

.src;

And this:

var image_hovered = eval(img + \"_hovered.src\");

To this:

var image_hovered = document.images

.src;

Adam

 

[lefteyecc]

Ohh ok thanks. The reason why I exscaped the characters is because I am using this script in a php page. Thanks for your help guys I will now go edit and see if this code works.

 

[lefteyecc]

OK I did the neccessary editing but now when I load I get the error that the img has not property

Error: document.images[img]+ "_norm"[/img] has no properties
Source File: [URL unfurl="true"]http://mhserver/[/URL]
Line: 15

and

Error: document.images[img]+ "_hovered"[/img] has no properties
Source File: [URL unfurl="true"]http://mhserver/[/URL]
Line: 24

Here is the edited script. Now I've been working with this for the pas say 4 hours now and I have no idea what could be wrong.

  <script language=\"javascript\">

        function normify(img)
        {
            if(document.images)
            {
                var image_norm = document.images[img]+ \"_norm\"[/img].src;
                document[img].src = image_norm;
            }
        }
          
        function greenify(img)
        {
            if(document.images)
            {
                var image_hovered = document.images[img]+ \"_hovered\"[/img].src;
                document[img].src = image_hovered;
            }
        }
          
          if(document.images)
          {
               var im_pics = new Array(\"home\", \"files\", \"about\", \"links\", \"samba\", \"cups\", \"webmin\",
                                                 \"phpmyadmin\", \"phpsurveyor\", \"phpnuke\", \"sugarcrm\");
               for(var i=0; i < im_pics.length; ++i)
               {
                   im_pics_norm = im_pics[i] + \"_norm\";
                   im_pics_hovered = im_pics[i] + \"_hovered\";
                   im_pics_norm = new Image();
                   im_pics_hovered = new Image();
                   im_pics_norm.src = \"admin/pics/\" + im_pics_norm + \".png\";
                   im_pics_hovered.src = \"admin/pics/\" + im_pics_hovered + \"-green.png\";
               }
          }
      </script>

 

[trollacious]

The error messages mean that the functions aren't getting a valid image name passed to them. That's in your HTML code. If you showed the actual output rather than what's in your PHP page, it'd help with the problem.

Lee

 

[BillyRayPreachersSon]

Do you actually have image names that end in "_norm" and "_hovered"? It's been bugging me the way that your code works - setting the src of one image in the doc to the src of another... something just doesn't add up for some reason.

That aside, I imagine you'll want to change both occurrences of this:

document[img].src =

to this:

document.images[img].src =

Hope this helps,
Dan

 

[lefteyecc]

Ok I've been working at it and considered a few things that you guys said.

Ok here is what I have

<script language=\"javascript\">

         if(document.images)
          {
               var im_pics = new Array(\"home\", \"files\", \"about\", \"links\", \"samba\", \"cups\", \"webmin\",
                                                 \"phpmyadmin\", \"phpsurveyor\", \"phpnuke\", \"sugarcrm\");
               for(var i=0; i < sizeof(im_pics); ++i)
               {
                   im_pics_norm = im_pics[i] + \"_norm\";
                   im_pics_hovered = im_pics[i] + \"_hovered\";
                   im_pics_norm = new Image();
                   im_pics_hovered = new Image();
                   im_pics_norm.src = \"admin/pics/\" + im_pics[i] + \".png\";
                   im_pics_hovered.src = \"admin/pics/\" + im_pics[i] + \"-green.png\";
               }
          }

        function normify(img_name)
        {
            if(document.images)
            {
                document.images[img]name[/img].src =  eval(img_name + \"_norm.src\");
            }
        }
          
        function greenify(img_name)
        {
            if(document.images)
            {
                document.images[img]name[/img].src = eval(img_name + \"_hovered.src\");
            }
        }
     </script>

I now get this error

Error: links_norm is not defined
Source File: [URL unfurl="true"]http://mhserver/[/URL]
Line: 30

and

Error: links_hovered is not defined
Source File: [URL unfurl="true"]http://mhserver/[/URL]
Line: 38

For every image in the im_pics array.

 

[tsuji]

lefteyecc,

Maybe this.
[tt]for(var i=0; i < sizeof(im_pics); [red]i++[/red])[/tt]

regards - tsuji

 

[BillyRayPreachersSon]

As I asked before: Do you actually have image names that end in "_norm" and "_hovered"?

You're certainly not generating them in the JS above, so I can only assume that they are created in the HTML... This being the case, how about you post the HTML to help us to help you?

Dan

 

[lefteyecc]

OK Here is the HTML that I am using.

printf("<!DOCTYPE html
  PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
  \"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"/>[/URL]
  <html>
  <head>
      <link rel=\"stylesheet\" type=\"text/css\" href=\"admin/css/home-server-css.css\"/>
      <title>%s</title>
      <script language=\"javascript\" type=\"text/javascript\"></script>
      <script language=\"javascript\">

         if(document.images)
          {
               var im_pics = new Array(\"home\", \"files\", \"about\", \"links\", \"samba\", \"cups\", \"webmin\",
                                                 \"phpmyadmin\", \"phpsurveyor\", \"phpnuke\", \"sugarcrm\");
               for(var i=0; i < sizeof(im_pics); ++i)
               {
                   im_pics_norm = im_pics[i] + \"_norm\";
                   im_pics_hovered = im_pics[i] + \"_hovered\";
                   im_pics_norm = new Image();
                   im_pics_hovered = new Image();
                   im_pics_norm.src = \"admin/pics/\" + im_pics[i] + \".png\";
                   im_pics_hovered.src = \"admin/pics/\" + im_pics[i] + \"-green.png\";
               }
          }

        function normify(img_name)
        {
            if(document.images)
            {
                document.images[img]name[/img].src =  eval(img_name + \"_norm.src\");
            }
        }
          
        function greenify(img_name)
        {
            if(document.images)
            {
                document.images[img]name[/img].src = eval(img_name + \"_hovered.src\");
            }
        }
     </script>
  </head>
  ", $title);
   printf("<body>
   <table class=\"menubar\">
    <tr>
     <td>
       <a onMouseover=\"greenify('home');\" onMouseout=\"normify('home');\" href=\"index.php\">
          <img name=\"home\" border=\"0\" src=\"admin/pics/home.png\" alt=\"homepage\"/>
       </a>
       <a onMouseover=\"greenify('files')\" onMouseout=\"normify('files')\" href=\"files.php\">
          <img name=\"files\" border=\"0\" src=\"admin/pics/files.png\" alt=\"filepage\"/>
       </a>
       <a onMouseover=\"greenify('about')\" onMouseout=\"normify('about')\" href=\"about.php\">
          <img name=\"about\" border=\"0\" src=\"admin/pics/about.png\" alt=\"aboutpage\"/>
       </a>
       <a onMouseover=\"greenify('links')\" onMouseout=\"normify('links')\" href=\"links.php\">
          <img name=\"links\" border=\"0\" src=\"admin/pics/links.png\" alt=\"linkspage\"/>
       </a>
     </td>
    </tr>
   </table>");
  printf("<table class=\"rightbar\">
   <th class=\"noborder\"><img src=\"admin/pics/administration.png\" alt=\"administration\" class=\"rightbar\" /></th>
    <tr>
        <td>
               <a onMouseover=\"greenify('samba');\" onMouseout=\"normify('samba');\" href=\"[URL unfurl="true"]http://%s:901/\">[/URL]
               <img class=\"rightbar\" name=\"samba\" src=\"admin/pics/samba.png\"/>
               </a>
        </td>
    </tr>
    <tr>
        <td>
            <a onMouseover=\"greenify('cups');\" onMouseout=\"normify('cups');\" href=\"[URL unfurl="true"]http://%s:631/\">[/URL]
            <img class=\"rightbar\" name=\"cups\" src=\"admin/pics/cups.png\"/>
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a onMouseover=\"greenify('webmin');\" onMouseout=\"normify('webmin');\" href=\"[URL unfurl="true"]https://%s:10000/\">[/URL]
            <img class=\"rightbar\" name=\"webmin\" src=\"admin/pics/webmin.png\"/>
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a onMouseover=\"greenify('phpmyadmin');\" onMouseout=\"normify('phpmyadmin');\" href=\"/phpmyadmin/\">
            <img class=\"rightbar\" name=\"phpmyadmin\" src=\"admin/pics/phpmyadmin.png\"/>
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a onMouseover=\"greenify('phpsurveyor');\" onMouseout=\"normify('phpsurveyor');\" href=\"/phpsurveyor/admin/\">
            <img class=\"rightbar\" name=\"phpsurveyor\" src=\"admin/pics/phpsurveyor.png\"/>
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a onMouseover=\"greenify('phpnuke');\" onMouseout=\"normify('phpnuke');\" href=\"/phpnuke/html/\">
            <img class=\"rightbar\" name=\"phpnuke\" src=\"admin/pics/phpnuke.png\"/>
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a onMouseover=\"greenify('sugarcrm');\" onMouseout=\"normify('sugarcrm');\" href=\"/sugarsuite/\">
            <img class=\"rightbar\" name=\"sugarcrm\" src=\"admin/pics/sugarcrm.png\"/>
            </a>
        </td>
    </tr>
  </table>
  ", $_SERVER['SERVER_ADDR'], $_SERVER['SERVER_ADDR'], $_SERVER['SERVER_ADDR']);

Ok this is the code section that corresponds to my problem. This code is part of a function to generate the same header for certain pages oon my current project.

 

[BillyRayPreachersSon]

These two lines:

document.images[img]name[/img].src =  eval(img_name + \"_norm.src\");
document.images[img]name[/img].src = eval(img_name + \"_hovered.src\");

are attempting to get the src property of images that do not exist (there are NO images with names ending in "_norm" or "_hovered").

Dan

 

[BillyRayPreachersSon]

Erm - hang on - ignore that.. I'm not quite sure why I thought that!

Dan

 

[BillyRayPreachersSon]

OK - they're not trying to access images that do not exist, they're trying to access JS variables that do not exist.

There are many ways of fixing this with your existing code, and many more ways of achieving the same result with far different code. This is probably one of less hassle ways. Replace this:

               for(var i=0; i < sizeof(im_pics); ++i)
               {
                   im_pics_norm = im_pics[i] + \"_norm\";
                   im_pics_hovered = im_pics[i] + \"_hovered\";
                   im_pics_norm = new Image();
                   im_pics_hovered = new Image();
                   im_pics_norm.src = \"admin/pics/\" + im_pics[i] + \".png\";
                   im_pics_hovered.src = \"admin/pics/\" + im_pics[i] + \"-green.png\";
               }

with this:

               for(var i=0; i < sizeof(im_pics); ++i)
               {
                   window[im_pics[i] + '_norm'] = new Image();
                   window[im_pics[i] + '_norm'].src = \"admin/pics/\" + im_pics[i] + \".png\";
                   window[im_pics[i] + '_hovered'] = new Image();
                   window[im_pics[i] + '_hovered'].src = \"admin/pics/\" + im_pics[i] + \"-green.png\";
               }

I removed the first two lines altogether, as they were completely redundant (setting two variables, and setting them again in the next two lines).

Hope this helps,
Dan

 

[BillyRayPreachersSon]

Incidentally, I would also change these two lines:

                document.images[img]name[/img].src =  eval(img_name + \"_norm.src\");
                document.images[img]name[/img].src = eval(img_name + \"_hovered.src\");

with these two:

                document.images[img]name[/img].src = window[img]name + '_norm'[/img].src;
                document.images[img]name[/img].src = window[img]name + '_hovered'[/img].src;

as it avoids the use of eval which IMHO is slow and unnecessary for 99% of the time people use it.

Hope this helps,
Dan

 

[lefteyecc]

Ha success. Thanks guys for all your help I learned a few things that'd very much so be helpful later on. I made the edits as you guys suggested and I also had to make one edit on my own. The linke that tests the size of the array was wrong. I didn't know that javascript doesn't support sizeof for arrays but changing it to im_pics.length fixed my problem. Anyway here's the fixed code.

 <script language=\"javascript\">

         if(document.images)
          {
               var im_pics = new Array(\"home\", \"files\", \"about\", \"links\", \"samba\", \"cups\", \"webmin\",
                                                 \"phpmyadmin\", \"phpsurveyor\", \"phpnuke\", \"sugarcrm\");
               for(var i=0; i < im_pics.length; ++i)
               {
                   window[im_pics[i] + '_norm'] = new Image();
                   window[im_pics[i] + '_norm'].src = \"admin/pics/\" + im_pics[i] + \".png\";
                   window[im_pics[i] + '_hovered'] = new Image();
                   window[im_pics[i] + '_hovered'].src = \"admin/pics/\" + im_pics[i] + \"-green.png\";
               }
          }

        function normify(img_name)
        {
            if(document.images)
            {
                document.images[img]name[/img].src = window[img]name + '_norm'[/img].src;
            }
        }
          
        function greenify(img_name)
        {
            if(document.images)
            {
                document.images[img]name[/img].src = window[img]name + '_hovered'[/img].src;
            }
        }
     </script>

Thanks alot again. Also does anyone know where I can get good tutorials for javasdcript because I had no idea about that window function. I also don't nknow alot more because my pos book didn't teach it to me. Anyway thanks again for the help and you WILL be seeing me here again