SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2003
    Location
    New York, NY
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange border appears in js image flip

    I'm creating a tabbed menu navigation for a site. I'm using javascript to to give the tabs a mouseover effect. I also have a function that decides whether the tab has been selected or deselected by the user, and uses that info to determine which image file to use in the img swap.

    The page works fine in IE 6, however in Netscape 6.2, when I mouseover the tabs, a thin border quickly flashes around each image as it swaps. It looks like the placeholder that's displayed for a broken image in IE, only with only the border and no red "x". I'm not sure why this is happening, as all the images have been preloaded.

    The markup is XHTML 1.0 Transitional. Here's the js I'm using:

    Code:
    function loadObj(objName, objSource) {
     eval(objName + ' = new Image()');
     eval(objName + '.src = "' + objSource + '"');
    }
     
    loadObj('home_down_over','images/tabs/home_down_over.gif');
    loadObj('home_down_out','images/tabs/home_down_out.gif');
    loadObj('home_up_over','images/tabs/home_up_over.gif');
    loadObj('home_up_out','images/tabs/home_up_out.gif');
    /**
     * ...
     * you get the idea.
     */
    loadObj('buy_up_out','images/tabs/buy_up_out.gif');
     
    var selected = false;
     
    /** Swap in the onmouseover image. */
    function tabUp(imgId) {
     if (selected == imgId) {
      document.getElementById(imgId).src = eval(imgId + '_up_over.src');
     }
     else {
      document.getElementById(imgId).src = eval(imgId + '_down_over.src');
     }
    }
     
    /** Swap in the onmouseout image. */
    function tabDown(imgId) {
     if (selected == imgId) {
      document.getElementById(imgId).src = eval(imgId + '_up_out.src');
     }
     else {
      document.getElementById(imgId).src = eval(imgId + '_down_out.src');
     }
    }
     
    /** Display the "selected version" of the tab, and deselect
     * the previously selected tab.
     */
    function clickTab(imgId) {
     if (selected != false) {
      document.getElementById(selected).src = eval(selected + '_down_out.src');
     }
     selected = imgId;
     document.getElementById(imgId).src = eval(imgId + '_up_out.src');
    }
    Some things I have tried, that haven't solved my problem:
    • Used the document.images array and name attributes instead of ID attributes.
    • Changed the images directly in the onmouseover attribute, using onmouseover="this.src = 'newfile.gif';return true;"
    • Eliminated the preloading function and manually preloaded each image file.
    If anyone has any insight on this problem, it would be appreciated. I've been at it for a couple of hours now and it's starting to really bug me. Thanks.
    So I says to him, I says, Hey! Llama! How about a little something, you know, for the effort, you know?

  2. #2
    SitePoint Addict
    Join Date
    Mar 2002
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make sure you explicitly set all the borders for the images and see if that helps. It may just be that your browser is interpreting the code rather slowly - is it a fast PC?

    Nick
    All4YourPC for all your PC needs. Custom software.
    Websites. Web marketing. Training.
    http://members.aol.com/nickjc67


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
  •