Results 1 to 8 of 8

Thread: Insane onmousover problem

  1. #1
    Join Date
    Aug 2008
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Insane onmousover problem

    Hi, I've got a very weird problem.
    Check the page:
    http://ds5.agh.edu.pl/~keanux/Ewa3/pl/java2.php

    You'll notice a small arrow that is supposed to change color when onmouseovered. Everything works fine until I run the script under IE 6.x. The funny thing is that the script is working when I engage the page from the localhost but it crashes after uploading to the server (the link I provided).

    Error displayed:
    'document[...]' is empty or not an object

    The script looks like this:

    if (document.images) {
    image1on = new Image();
    image1on.src = "arrow1.png";
    image1off = new Image();
    image1off.src = "arrow4.png";
    image2on = new Image();
    image2on.src = "arrow2.png";
    image2off = new Image();
    image2off.src = "arrow3.png";
    }
    function changeImages() {
    if (document.images) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
    }}}

    <a href="about2.php" onmouseover="changeImages('image1', 'image1on')" onmouseout="changeImages('image1', 'image1off')"><img src="arrow1.png" name="image1" class="arrow2" alt="dalej" /></a>

    Any clues? Coz I'm about to go crazy...

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    I believe IE6 requires the document.getElementById() instead of changeImages('image1', 'image1on')
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. The Following User Says Thank You to BLiZZaRD For This Useful Post:

    Imperator (09-07-2008)

  4. #3
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    The name attribute is invalid under an XHTML doctype.

    Use of eval is not required. Change 'name' to 'ID' and try this function instead:
    Code:
    function changeImages() 
    {
     if (document.getElementById && document.images) 
      for (var i=0; i<arguments.length; i+=2) 
       document.getElementById(arguments[i]).src = arguments[i+1].src;
    }
    Using this function, the second of each pair of parameters should not be in quotes.
    Last edited by clueful; 09-08-2008 at 03:03 AM.

  5. The Following User Says Thank You to clueful For This Useful Post:

    Imperator (09-07-2008)

  6. #4
    Join Date
    Aug 2008
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Ok, I picked up your advice, guys, and attempted to change the function. I came up with something like this: (I had some troubles with incorporating your code, clueful, so I decided to change it)

    <script language="javascript" type="text/javascript">
    function changeOverImage()
    {
    document.getElementById("img1").src = "arrow1.png";
    }

    function changeOutImage()
    {
    document.getElementById("img1").src = "arrow4.png";
    }
    </script>

    <img id="img1" src="arrow4.png" alt="dalej" onmouseover="changeOverImage()" onmouseout="changeOutImage()" />

    And the problem is the same. The script is working fine except when I run it under IE6x (it works on localhost but fails after uploading to the server). The only change is that there is no error. The image just doesn't change.

    http://ds5.agh.edu.pl/~keanux/Ewa3/pl/java2.php

  7. #5
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by Imperator View Post
    Ok, I picked up your advice, guys, and attempted to change the function. I came up with something like this: (I had some troubles with incorporating your code, clueful, so I decided to change it)
    I have revised the function in my first post, but as indicated the second parameter (image object name) must not be passed in quotes. That will work.

  8. #6
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    I think you can do this in a number of ways. I've mentioned some of it below:

    1. Inline event handling for onmouseover and onmouseout like the following code:
    [CODE]<img id="img1" src="arrow4.png" alt="dalej" onmouseover="this.src='arrow1.png';" onmouseout="this.src='arrow4.png';" />[CODE]

    2. Replace your current img tag with the following one. It looks similar to your but there is one key difference in the way the JS function being called. Insert the JS function below in place of the current functions.
    Code:
    <img id="img1" src="arrow4.png" alt="dalej" onmouseover="changeOverImage(this);" onmouseout="changeOutImage(ICODE]this[/ICODE]);" />
    
    function changeOverImage(obj){
    	obj.src = 'arrow1.png';
    }
    function changeOutImage(obj){
    	obj.src = 'arrow4.png';
    }
    3.
    Use the following img tag. There is no event related attributes in the tag
    Code:
    <img id="img1" src="arrow4.png" alt="dalej"/>
    After that insert the below mentioned script element after the img tag mentioned above. This is very important you need to put the below script element after the above mentioned img tag otherwise it will not work as expected.
    Code:
    <script type="text/javascript">            
    (function() {
    	if (document.getElementById('img1')) {
    		document.getElementById('img1').onmouseover = function() {
    			this.src = '2.gif';
    		};
    		document.getElementById('img1').onmouseout = function() {
    			this.src = '1.gif';
    		};
    	}
    })();      
    </script>
    Hope this helps.

  9. The Following User Says Thank You to codeexploiter For This Useful Post:

    Imperator (09-08-2008)

  10. #7
    Join Date
    Aug 2008
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Damn, still nothing. I mean I tried all suggested ways but the problem is still the same: everything works fine until I upload the page to the server and run it under IE6x. I gotta check if the problem occurs on different computers. Thanks, guys.

  11. #8
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by Imperator View Post
    Damn, still nothing. I mean I tried all suggested ways but the problem is still the same: everything works fine until I upload the page to the server and run it under IE6x. I gotta check if the problem occurs on different computers. Thanks, guys.
    This can only be .png-related issue. I think there are fixes available but can't you just change to a gif?

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
  •