link hover color not honored when using onclick event

Discussion in 'HTML' started by Richard Thoms, Dec 1, 2005.

  1. Hello,

    Please checkout the html code below.

    The first link is normal and will always show red when hovering. The
    second link has no href in it (is that legal?) but accomplishes what I
    want to do (create a simple popup window and).

    The problem is that the second link will not honor the A:hover style
    (color=red) in IE, it does work fine in Firefox.

    One more interesting note is that without the A style definition the
    second link has absoulutely no formatting. I'm forced to set the color,
    decoration, and cursor to make it look like a link. This is true for
    both IE and Firefox.

    Any ideas?

    I'm very new to the javascript so maybe there is an easier way to do
    what I want. I thought about using target="_blank" but that gives me
    full browser and I want more of a popup look.

    Thanks in advance for any help.

    -Richard

    ----------------------------------------
    <html>

    <style type="text/css">
    <!--
    A {
    color:#0000ff;
    text-decoration: underline;
    cursor: pointer;
    cursor: hand;
    }

    A:hover {
    color:#ff0000;
    }
    -->
    </style>

    <body>
    <a href="hover_color.htm" target="_blank">
    1 - Normal Link: Hover here and color changes!
    </a><br />
    <a onClick="window.open('hover_color.htm','','width=400,height=100')">
    2 - Popup Link: Hover here and no color change!
    </a><br />
    </body>
    </html>
     
    Richard Thoms, Dec 1, 2005
    #1
    1. Advertising

  2. Richard Thoms

    Mark Parnell Guest

    In our last episode, Richard Thoms <> pronounced to
    alt.html:

    > The
    > second link has no href in it (is that legal?)


    What does the validator say?

    > but accomplishes what I
    > want to do (create a simple popup window and).


    But it's not about what you want; it's what about what your visitor
    wants. It's unlikely he/she/it wants a popup, and likely that their
    browser or other software will block popups. Or they could have
    Javascript disabled, in which case nothing will happen at all (at least
    with a popup blocker, they may get a message telling them it's been
    blocked).

    > The problem is that the second link will not honor the A:hover style


    No, the problem is that you are trying to force a popup on your
    visitors.

    > (color=red) in IE, it does work fine in Firefox.


    IE doesn't support :hover on anything except links.

    > I'm forced to set the color,
    > decoration, and cursor to make it look like a link.


    That's because without a href attribute it's not a link. It's just an
    anchor.

    --
    Mark Parnell
    http://clarkecomputers.com.au
     
    Mark Parnell, Dec 1, 2005
    #2
    1. Advertising

  3. Mark Parnell wrote:
    > In our last episode, Richard Thoms <> pronounced to
    > alt.html:
    >
    >>The
    >>second link has no href in it (is that legal?)

    >
    >
    > What does the validator say?


    Validator does not complain so I guess it's OK. More on that below.

    >
    >>but accomplishes what I
    >>want to do (create a simple popup window and).

    >
    >
    > But it's not about what you want; it's what about what your visitor
    > wants. It's unlikely he/she/it wants a popup, and likely that their
    > browser or other software will block popups. Or they could have
    > Javascript disabled, in which case nothing will happen at all (at least
    > with a popup blocker, they may get a message telling them it's been
    > blocked).


    Good points. For some more background. The real application is a
    "email this page" link and purpose here is to produce a clean "popup"
    style window that lets the visitor still see the current page but fill
    in the form to send the email. I would rather not have to bring up a
    full browser with all the menus/toolbars/etc for that purpose.

    You know I have a pop-up blocker running but it does not complain. Is
    window.open() all it takes to be tagged as an evil pop-up or are there
    other things the pop-up blockers look for? For sure I don't want to get
    this linked blocked and it is not an "automatic" or unsolicited pop-up,
    instead only when user clicks the "email this page" link will the new
    window appear.

    >
    >>The problem is that the second link will not honor the A:hover style

    >
    >
    > No, the problem is that you are trying to force a popup on your
    > visitors.
    >
    >>(color=red) in IE, it does work fine in Firefox.

    >
    >
    > IE doesn't support :hover on anything except links.
    >
    >
    >>I'm forced to set the color,
    >>decoration, and cursor to make it look like a link.

    >
    >
    > That's because without a href attribute it's not a link. It's just an
    > anchor.
    >


    I think this is the key to the problem. No href means no link, just an
    anchor. I develop using firefox and everthing looked great there but
    then when I test with IE I got unexpected results. Perhaps it is
    firefox which has a bug and is letting this sneak through.

    Thanks for the input.

    -Richard
     
    Richard Thoms, Dec 1, 2005
    #3
  4. Richard Thoms

    rf Guest

    Richard Thoms wrote:

    > Perhaps it is
    > firefox which has a bug and is letting this sneak through.


    If you find differing behaivour between Firefox/any-other-browser and IE
    you can safely assume that it is IE that is at fault.

    As Mark said IE only supports :hover on *links*, that is an anchor with an
    href attribute. Firefox rightly supports :hover on just about anything,
    including anchors without an href attribute.

    --
    Cheers, Richard.
     
    rf, Dec 1, 2005
    #4
  5. Richard Thoms

    Mark Parnell Guest

    In our last episode, Richard Thoms <> pronounced to
    alt.html:

    > Good points. For some more background. The real application is a
    > "email this page" link and purpose here is to produce a clean "popup"
    > style window that lets the visitor still see the current page but fill
    > in the form to send the email.


    a) Have the form as part of the page and return them to the same page
    after submission
    b) Have a link to the form on a separate page, that then takes them back
    to the original page after submission.

    > You know I have a pop-up blocker running but it does not complain.


    Different blockers will block different things. All (at least in theory)
    will block unsolicited popups; some will block *any* popup.

    > Is
    > window.open() all it takes to be tagged as an evil pop-up


    Evil popup is redundant IMNSHO. :) All popups are evil. If I want
    something opened in a new window (or more likely, new tab), I will do it
    myself.

    > or are there
    > other things the pop-up blockers look for?


    There certainly are others, but window.open can also be blocked.

    > For sure I don't want to get
    > this linked blocked and it is not an "automatic" or unsolicited pop-up,


    Understood. But I still don't want a new window to open when I click a
    link.

    > instead only when user clicks the "email this page" link will the new
    > window appear.


    *If* the user has Javascript enabled, and *if* the popup isn't blocked.

    > I think this is the key to the problem. No href means no link, just an
    > anchor. I develop using firefox and everthing looked great there but
    > then when I test with IE I got unexpected results.


    Firefox supports :hover properly, not just on links.

    > Perhaps it is
    > firefox which has a bug and is letting this sneak through.


    Firefox has several different options for blocking popups. The basic
    popup blocker won't block window.open when triggered by user
    interaction, but it can be configured to do so (as I have done). I can't
    even remember which option it is that controls that particular feature,
    but it can certainly be done.

    --
    Mark Parnell
    http://clarkecomputers.com.au
     
    Mark Parnell, Dec 1, 2005
    #5
  6. Richard Thoms wrote:
    > Mark Parnell wrote:
    >
    >> In our last episode, Richard Thoms <> pronounced to
    >> alt.html:
    >>
    >>> The second link has no href in it (is that legal?)
    >>> /.../ [:hover does not work]

    >> That's because without a href attribute it's not a link. It's just an
    >> anchor.

    >
    > I think this is the key to the problem. No href means no link, just an
    > anchor. I develop using firefox and everthing looked great there but
    > then when I test with IE I got unexpected results. Perhaps it is
    > firefox which has a bug and is letting this sneak through.


    Nono, check the specs, it's IE that's rusty.
    The solution to your problem is to use something along the
    lines of
    <a
    href="foo.html"
    onclick="window.open('foo.html'); return false"
    >

    instead of just
    <a onclick="window.open('foo.html')">

    This solves your problem (a is now a "proper" link and IE
    will support :hover on it) as well as another one: your
    current solution does not work for users without JS, whereas
    the one with href does.

    WRT popup-blockers: No, they're smart enough not to block
    popups triggered by onclick events, so I wouldn't worry
    about that.
    What I'd consider more is whether a popup is perhaps still
    more of a nuisance to the user than an elegant solution.
     
    Mitja Trampus, Dec 1, 2005
    #6
  7. Mitja Trampus wrote:
    > Richard Thoms wrote:
    >
    >> Mark Parnell wrote:
    >>
    >>> In our last episode, Richard Thoms <> pronounced to
    >>> alt.html:
    >>>
    >>>> The second link has no href in it (is that legal?)

    >
    > >>> /.../ [:hover does not work]

    >
    >>> That's because without a href attribute it's not a link. It's just an
    >>> anchor.

    >>
    >>
    >> I think this is the key to the problem. No href means no link, just
    >> an anchor. I develop using firefox and everthing looked great there
    >> but then when I test with IE I got unexpected results. Perhaps it is
    >> firefox which has a bug and is letting this sneak through.

    >
    >
    > Nono, check the specs, it's IE that's rusty.


    I should have known better. IE correct, FireFox wrong, what was I thinking?

    > The solution to your problem is to use something along the lines of
    > <a
    > href="foo.html"
    > onclick="window.open('foo.html'); return false"
    > >

    > instead of just
    > <a onclick="window.open('foo.html')">
    >
    > This solves your problem (a is now a "proper" link and IE will support
    > :hover on it) as well as another one: your current solution does not
    > work for users without JS, whereas the one with href does.


    That did it!

    Thanks for the help.

    > WRT popup-blockers: No, they're smart enough not to block popups
    > triggered by onclick events, so I wouldn't worry about that.
    > What I'd consider more is whether a popup is perhaps still more of a
    > nuisance to the user than an elegant solution.


    Good to know. I'll consider go/no-go for pop-up but I think in this
    application pop-up is the way to go. The visitor is on a web-page.
    They click "email this page to a friend" a small POP-UP comes up to
    enter email to/from info and a little message (all the while they can
    still see the page they are referring to). Click send and the pop-up
    goes away and they are right back where they started.

    Thanks to all. I'll consider this issue closed!
     
    Richard Thoms, Dec 2, 2005
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Pål Andreassen

    NTFS rights not honored

    Pål Andreassen, Dec 16, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    409
    Kevin Spencer
    Dec 16, 2003
  2. =?Utf-8?B?Y2hheg==?=

    TraceOutputOptions not honored

    =?Utf-8?B?Y2hheg==?=, Aug 25, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    5,340
    Walter Wang [MSFT]
    Aug 29, 2006
  3. Pål Andreassen

    NTFS rights not honored

    Pål Andreassen, Dec 16, 2003, in forum: ASP .Net Security
    Replies:
    4
    Views:
    141
    Norman Rasmussen
    Dec 17, 2003
  4. Matt
    Replies:
    5
    Views:
    195
    Michael Winter
    Feb 12, 2004
  5. Krys

    Change link color on div hover

    Krys, Jun 7, 2009, in forum: Javascript
    Replies:
    20
    Views:
    518
    Thomas 'PointedEars' Lahn
    Jun 10, 2009
Loading...

Share This Page