Mouseover script

[Mark T.]

I am fairly new to JavaScript and now I am trying to create my own mouseover-script, but to no avail. Could someone point out what is wrong with the code:

if (document.images)
   {

     // de plaatjes pre-laden
     home_out = new Image();
     home_out.src = "../images/home1.gif";
     home_on = new Image();
     home_on.src = "../images/home2.gif";

   }


// de daadwerkelijke functies
function ImageOn(Name)
  { if (document.images)
       { OnName = eval(Name + "_on.src");
         document.images[Name].src = OnName;
       }
  }

function ImageOut(Name)
  { if (document.images)
       { OutName = eval(Name + "_out.src");
         document.images[Name].src = OutName;
       } 
  }

In the link I place:

<a href="" onMouseOver="ImageOn('home')" onMouseOut="ImageOut('home')"><img src="images/home1.gif" name="home" border="0"></a>

Could someone help me out with this?

[Vincent Puglia]

Hi MarkT,

The following jumps out:
home_out.src = "../images/home1.gif";
and
<img src="images/home1.gif"

if your original image link appears but not either of the mouse events, the problem is the browser cannot find the image (you are probably getting an 'object expected' error message)

"../images/" means go up one directory and then look for a directory/folder called 'images'
"images/" means look for a directory/folder called 'images' just below the current directory/folder.

Hope this helps.

Vinny

[Mark T.]

Thanks, but I forgot to add that I use an external JavaScript-document, and the links to the images are just fine. I doublechecked them before posting. I get the message that the page has loaded fine, but with some flaws. I am led to believe that the problem lies in the execution of the script, but since I am no JavaScript Wizard, I fail to find the cause of the problem.

[Vincent Puglia]

Hi Mark,

Except for what I already pointed out, the code is correct. Which again leads me to believe that is where your problem lies. I presume you are loading the images & code with a *.js file? And included it as follows: <script language="javascript" src='somename.js"></script> ?
And that there is no html within the document (including <script> tags)?
If that is so, and if your js file is in a different folder, the file is read into your html file. Therefore, the file paths have to be relevant to the html page, not the js file, because it is the html that is executing the commands. If that is not the case, something else is screwing up the execution. What error message are you getting? And what browser are you using?

Vinny

[Mark T.]

I think I have the problem already. I load the images in the external JavaScript-sheet, according to their "place in the folders viewed from the place of the sheet" (this sound really weird, I hope you get what I mean), which is different from the HTML-file. Meaning the HTML-file and the JS-file are on different locations (gee, that makes much more sense then the previous explanation ). I have to change the location of the images, and then the script will probably work.
Thanks for helping me out with this .

[Mark T.]

I changed the file locations, so that they match with the ones in the HTML-document, and still the script won't do it's job ...

[Vincent Puglia]

Hi Mark,

I just threw the code (with src="/images/....") & link in the same document & changed the sources to gifs I have, and the script works. So...there is something else going on at your end. Best solution: post a url.

Vinny

[duckie]

Try "root-relative" URLs. This almost always work better.

For example, say your URL is http://www.mywebsite.com/

Your image is at http://www.mywebsite.com/images/navi/nav1.gif

To refer to this image from anywhere on your website, you say "/images/navi/nav1.gif"

Note the slash before images.

[Mark T.]

Then the mistake is in the external .js-file I guess. I will try and place the code in the actual HTML-file as well, see if it changes anything. I am still developing the site, and I will not put it online before it is finished, so I have no URL so far.