SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mouseover script

    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:

    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?

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Where the World Once Stood
    the blades of grass
    cut me still

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 .

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ...

  7. #7
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Where the World Once Stood
    the blades of grass
    cut me still

  8. #8
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •