Results 1 to 14 of 14
  1. #1
    Lounger
    Join Date
    Jun 2001
    Location
    South Australia, Australia
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mouseovers in Netscape

    Hi,

    I have set up some mouseovers within a <td>, which have links, and work fine in IE. The code is this:

    <tr><td class="button" onMouseOver="this.className='Mouseover'" onMouseDown="this.className='Mouseclick'" onMouseOut="this.className='button'">Sample Link</td></tr>

    Anyway, as I said, works beautifully in IE. But when I try it in Netscape 6, it doesn't. The mouseover changes work, but the links don't. It's as if the <a href=""> is not there at all.

    I'm tempted to ignore the <10% of Netscape users, since that would be easier, but I figure I should try and fix the problem.

    Can anyone tell me either what I've done wrong, or why I will never be able to make this work, or whether I can set something up to browser detect and make it work.

    Thankyou.

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Mouseovers in Netscape

    Maybe:
    <tr><td class="button" onMouseOver="this.className='Mouseover'" onMouseDown="this.className='Mouseclick'" onMouseOut="this.className='button'">Sample Link</td></tr>

  3. #3
    3 Star Lounger
    Join Date
    Jan 2001
    Location
    PA
    Posts
    246
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Mouseovers in Netscape

    Do you have a reason for the decision to nest the entire single cell row within the anchor?

    Try

    <tr><td>Sample Link</td></tr>

    or

    <tr><td class="button" onMouseOver="this.className='Mouseover'" onMouseDown="this.className='Mouseclick'" onMouseOut="this.className='button'">Sample Link</td></tr>

    instead.

  4. #4
    Lounger
    Join Date
    Jun 2001
    Location
    South Australia, Australia
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Mouseovers in Netscape

    Thanks! The one that looks the most promising is this:

    <tr><td><a href="link.html" class="button"
    onMouseOver="this.className='Mouseover'"
    onMouseDown="this.className='Mouseclick'"
    onMouseOut="this.className='button'">Sample
    Link</a></td></tr>

    This seems to work with both IE and Netscape. But... (I know, some people are never satisfied...)

    I'm not able to make the cell a specified width anymore. The cell width is whatever space the "Sample Link" writing takes up. I want each cell to be 140 pixels. I've tried putting "width=140" in the <td> and in the <tr>, but neither work. The width in the <table> is 140, so I would have thought it should work. But it doesn't.

    If I can just get the width of each cell constant, this will be brilliant. Thanks in advance for any suggestions...

  5. #5
    3 Star Lounger
    Join Date
    Jan 2001
    Location
    PA
    Posts
    246
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Mouseovers in Netscape

    Try putting the width attribute in the colwidth parameter of the <table> tag. I don't have my HTML reference handy and don't remember the exact syntax, but do remember past success with fixed column widths using colwidth or colspec in the <table> tag,

  6. #6
    Lounger
    Join Date
    Jun 2001
    Location
    South Australia, Australia
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Mouseovers in Netscape

    The colwidth didn't bring any joy. I thought I'd answer your previous question though. I want to nest the entire single cell row within the anchor so that as soon as the user moves the mouse over any part of the cell, they can click. I've looked at my code on 3 different browsers now. IE 5.5 does exactly what I want and makes each cell a fixed width, regardless of cell contents.

    Netscape 6 performs the mouseover and mouseout functions fine, but it won't recognise the links (which makes it a little difficult for a netscape user to go anywhere in my site). Also, the page NEVER appears to have finished loading.

    Opera 5 is interesting. It doesn't make the cells fixed width, and it doesn't do any of the mouseover effects, but it does give the link.

    I'm beginning to think that I should forget about using mouseovers and the like, and simply use buttons. At least they'll take people somewhere...

    Nevertheless, if you have any bright ideas, please let me know.

  7. #7
    3 Star Lounger
    Join Date
    Jan 2001
    Location
    PA
    Posts
    246
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Mouseovers in Netscape

    From the code snippet that you posted, especially "this.className='", it looks like you are using Java for this which may explay why Opera isn't displaying the mouseovers. There are two versions of Opera, with and without Java support. That may be the reason. Another reason is that Opera uses the Sun JRE whereas IE and Windows Netscape use the MS JRE. The Java code you are using my be MS Java specific which means it is not working on Mac and Linux machines either.

    As for the links in Netscape, make sure you are not netsting any table tags within the link tags. This is illegal HTML which may be tolerated by IE, but not Netscape.

    If you want some simple JavaScript code that replaces Images on mouseover, mousedown, etc., that works with all three browsers, let me know.

    Last, I like your idea about forgetting the mouseovers to insure that the links work. Too many web sites these days are willing to sacrifice their usefullness to many visitors in order to achieve a certain look in IE.

  8. #8
    Lounger
    Join Date
    Jun 2001
    Location
    South Australia, Australia
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Mouseovers in Netscape

    You wrote: "If you want some simple JavaScript code that replaces Images on mouseover, mousedown, etc., that works with all three browsers, let me know."

    Yes please!

  9. #9
    3 Star Lounger
    Join Date
    Jan 2001
    Location
    PA
    Posts
    246
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Mouseovers in Netscape

    First, put this code in your <head>
    <pre>if(document.images) { <font color=6495ed>tests browser for adequate version of JS</font color=6495ed>
    brightImageVariable = new Image <font color=6495ed>this defines the variable for your mouseover image; you
    can use whatever you like left of = sign</font color=6495ed>
    dimImageVariable = new Image <font color=6495ed>mouseout variable</font color=6495ed>

    brightImageVariable.src = "path/bright_image.gif"
    dimImageVariable.src = "path/dim_image.gif"
    }
    else
    brightImageVariable = ""
    dimImageVariable = ""
    document.link_name = ""
    }
    </pre>
    Now define your link as follows

    <pre><a href="sample.html" onMouseover=document.link_name.src=brightImageVari able.src
    onMouseout=document.link_name.src=dimImageVariable .src>
    [img]path/dim_image.gif[/img]</a>
    </pre>
    BTW, don't use transparent images as the replaced image will show underneath.

    For multiple rollover links, make sure you give each default link image (dim_image.gif in the above example) a unique name (link_name in the above example.)

    This should work with all version 3 or newer browsers.

  10. #10
    Lounger
    Join Date
    Jun 2001
    Location
    South Australia, Australia
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Mouseovers in Netscape

    Thanks very much for this...Much appreciated!

  11. #11
    3 Star Lounger
    Join Date
    Jan 2001
    Location
    PA
    Posts
    246
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Mouseovers in Netscape

    Let me know how it works out. Also, feel free to ask if you are not sure what is literal and what is pseudo code.

  12. #12
    Lounger
    Join Date
    Jun 2001
    Location
    South Australia, Australia
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Mouseovers in Netscape

    Well thanks for that. Since you've been so helpful, I'll push your generosity a little further. <img src=/S/smile.gif border=0 alt=smile width=15 height=15>

    What I want to do is have 11 "buttons" lined up down the left side of my page, in the standard format. So far, I've had to create 11 different buttons, as each has a different text on it going to a separate page. Is it possible to have just 2 images, one being dimImage and one being brightmage, and then somehow overlay the text I want onto the "buttons" I want? So each "button" will appear to be a separate button, but will only be one "button" with different text. I think I read somewhere that this can be done, but I could have been imagining it. Thanks again,

  13. #13
    3 Star Lounger
    Join Date
    Jan 2001
    Location
    PA
    Posts
    246
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Mouseovers in Netscape

    You are asking for trouble. Its a great idea that you have which would work well in a world with fully compatible browsers, but...

    You just struggled with a cross browser problem. I guarantee that your approach will cause another.

    If you want a site that looks consistent and is functional cross browser and cross platform (remember, few mac users and no linux users use IE), make your text part of the graphics, not floating over them.

  14. #14
    Lounger
    Join Date
    Jun 2001
    Location
    South Australia, Australia
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Mouseovers in Netscape

    Done. You finally convinced me to go for functionality and usability rather than bells and whistles. I have to admit: the time I've spent recently trying to make things look really great, and then discovering that other browsers don't render them the same... it's nice to remember that most people on the net are looking for information, not for bells and whistles. So thanks for your advice and comments. Buttons it is...

Posting Permissions

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