SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover Links broken, on both ends of a row

    Hi
    I have a row of seven images, each are links which work without rollover, but the code I'm using also allows for rollover images.
    I found free code online, copy-pasted it carefully into each area, and when the code in the HEAD and BODY areas had the information needed, I got this problem:
    The first image loads, but after mouseover its twin 'down' image doesn't load.
    Images 2 and 3 work fine.
    Image 4 doesn't show the rollover image, but does stay visible.
    Images 5 and 6 work fine.
    Image 7 doesn't load, initially, but after I pass the mouse across the broken-link icon, the default image does load, and stays visible until the page is refreshed. (That's the 'up' image that should first appear, not the 'down' image that should appear after rollover. The 'down' image does not appear. I can't guess why the original image won't load when the Page is refreshed, but will load after Rollover.)

    I'm using NoteTab Light as the text editor.

    To ensure against typos, I have copy-pasted code over top of the problem areas -- both the html code in the BODY, and the Script code in the HEAD. Then I've carefully copy-pasted the names of the images I want to use.
    The images were all checked to make sure they are the same size, and that each had the proper name. I checked to make sure the sub-directory path is present in the path, and correctly typed.
    In the Script section, the seven sets of variables nest together, but I did try separating them, isolating each set of variables inside its own tags (shrug).

    I've basically replaced all the code, twice, and I've triple-checked the accuracy of the information I included.

    I'm using .jpgs, I haven't tried using .gifs yet, but I think that'll be next.

    I can show examples of the code here, and I can supply a URL to a web space where I'm drydocking the Site as I work on it.
    But before I get into that, perhaps someone recognizes this problem and can point me to information that I need to understand, in order to solve it.

    Thanks for any advice.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There's nothing obvious about why the problem is occuring.

    Go on, show us your code, post a link to the drydock area and we'll check things out for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Go on, show us your code, post a link to the drydock area and we'll check things out for you.
    Thank you. The url is websitework DOT homeground DOT ca.

    In the Source (CTL-U) page, the code in the BODY section is on one line, no line breaks; I can repost the page with the html portion of the rollover code separated, to make reading it easier, if someone wants that.
    (That puts gaps between the images on the menu.)

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Wow, where did you get the code from? They should be excommunicate for spreading such things.

    Some immediate problems are: The page doesn't validate, so problems will be vastly more difficult to fix

    The most obvious trouble is that your paths aren't correct.

    "rollover_middle_panel02 - news.jpg" should be "psc_tools/rollover_middle_panel02 - news.jpg" and you'll find that trouble throughout the scripting.

    Some of the html code images have the same problem.

    The image for the homepanel has no name, which is why the rollover can't target it.

    The multiple buttondown and buttonup functions are a complete waste. Get rid of all but one of them, do a bit of tidying and you will have the following:

    Code javascript:
    <!--
    function buttondown( buttonname )
    {
        if (document.images) {
          document[ buttonname ].src = eval( buttonname + "down.src" );
        }
    }
    function buttonup ( buttonname )
    {
        if (document.images) {
          document[ buttonname ].src = eval( buttonname + "up.src" );
        }
    }
    if (document.images) {
        newspanelup           = new Image();
        newspanelup.src       = "psc_tools/rollover_middle_panel02 - news.jpg" ;
        newspaneldown         = new Image() ;
        newspaneldown.src     = "psc_tools/rollover_middle_panel02 - news_on.jpg" ;
        calendarpanelup       = new Image();
        calendarpanelup.src   = "psc_tools/rollover_middle_panel04 - calendar.jpg";
        calendarpaneldown     = new Image() ;
        calendarpaneldown.src = "psc_tools/rollover_middle_panel04 - calendar_on.jpg";
        ourclubpanelup        = new Image();
        ourclubpanelup.src    = "psc_tools/rollover_middle_panel06 - ourclub.jpg";
        ourclubpaneldown      = new Image() ;
        ourclubpaneldown.src  = "psc_tools/rollover_middle_panel06 - ourclub_on.jpg";
        homepanelup           = new Image();
        homepanelup.src       = "psc_tools/rollover_middle_panel08 - home.jpg";
        homepaneldown         = new Image() ;
        homepaneldown.src     = "psc_tools/rollover_middle_panel08 - home_on.jpg";
        awardspanelup         = new Image();
        awardspanelup.src     = "psc_tools/rollover_middle_panel10 - awards.jpg";
        awardspaneldown       = new Image() ;
        awardspaneldown.src   = "psc_tools/rollover_middle_panel10 - awards_on.jpg";
        yearbookpanelup       = new Image();
        yearbookpanelup.src   = "psc_tools/rollover_middle_panel12 - yearbook.jpg";
        yearbookpaneldown     = new Image() ;
        yearbookpaneldown.src = "psc_tools/rollover_middle_panel12 - yearbook_on.jpg";
        boutiquepanelup       = new Image();
        boutiquepanelup.src   = "psc_tools/rollover_middle_panel14 - boutique.jpg" ;
        boutiquepaneldown     = new Image() ;
        boutiquepaneldown.src = "psc_tools/rollover_middle_panel14 - boutique_on.jpg" ;
    }
    // -->
    Get those things fixed up and it will work.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Regarding the path and name problems, I must apologize, I didn't upload the freshest index.html to the drydock before giving you the URL.

    Thank you very much for tidying that code!

    I'm not yet getting the images to appear on rollover, and I'm wondering if there's something wrong with the way I'm using this code, as well? :

    <a href="psc01_news.html"
    onmouseover="buttondown('newspanel')"
    onmouseout="buttonup('newspanel')">
    <img src="psc_tools/rollover_middle_panel02-news.jpg" name="newspanel" border="0" />
    </a>

    This is a copy-paste from the same source as the other code, and I haven't yet learned what the forward-switch does, at the location: border="0" /> .

    (The 'drydock' files have been updated.)

    Thanks for your time on this....

  6. #6
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been reading more tutorials and looking at code samples, and I found this code, which I'm able to make work:

    <a href="psc01_news.html"
    onmouseover="document.newspanel.src='psc_tools/rollover_middle_panel02-news_on.gif'"
    onmouseout="document.newspanel.src='psc_tools/rollover_middle_panel02-news.gif'">
    <img src="psc_tools/rollover_middle_panel02-news.gif" border="0" alt="Current News" name="newspanel" /></a>

    The files in the drydock are updated.

    I left intact the code in the <HEAD> section.

    I have a dialup connection with a slow modem speed on top of that, and it took a few moments for the secondary images to load so that, on mouseover(), they appeared.

    (I changed the .jpg to .gif in case that would make a difference.)

    I'd like to hear comments about the syntax of the code I'm using now. It seems to work, but now's the best time for me to develop good habits over bad ones.

    I'll wait to see if there are more comments, then I'll try to remember to close this thread in a couple of days.

    Thanks very much again, for your time and help, pmw57.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Yes, there is a better way that involves a sliding doors technique, where each image consists of both mouseover and mouseout images at the same time, so that when you do perform that action there is no extra loading required.

    All you do is use css to set the viewing size, and then tell the image to show a certain part of it on each action.

    See Creating a Three-State Menu for an excellent video tutorial on using that technique.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •