Skip navigation
This discussion is locked
Currently Being Moderated

The href Attribute and # Content

May 19, 2009 4:48 PM

PROBLEM:  I would like the title attribute of an <a> to display its contents on hover, but prevent anything from occurring upon clicking.

 

BACKGROUND:  On the source page below I have many words that are highlighted with the <em>.  Without any special effort on the part of the viewer these words appear with italics decoration.  If the cursor is passed over these words, they are highlighted, and if the cursor is held some length of time the contents of the title attribute is displayed.  If the viewer clicks on these words, however, the action ranges from nothing happening, to moving to the top of the page, to moving to the first <a> with a name attribute.  My goal is to having nothing occur beyond the special hover effects.

 

I have tried all manner of approaches including a doNothing() {} JavaScript.  Still, I cannot remove this erratic, unwanted behavior.

 

SOURCE IMAGE:  http://www2.gol.com/users/hsmr/emblem/name.html

 
Replies
  • Currently Being Moderated
    May 19, 2009 5:36 PM   in reply to kiusau

    <a href="#" title="this is a title" onclick="return false">something else</a>

     
    |
    Mark as:
  • Currently Being Moderated
    May 19, 2009 9:20 PM   in reply to kiusau

    That's called a 'focus rectangle' and is important for people who don't use a pointing device for navigation - this may be worth reading:

     

    http://groups.google.com/group/macromedia.dreamweaver/browse_thread/th read/859e310c1690389f/ec600d5306d43b4f?lnk=gst&q=dotted+lines+around+a +link#ec600d5306d43b4f

     
    |
    Mark as:
  • Currently Being Moderated
    May 19, 2009 9:55 PM   in reply to kiusau

    kiusau wrote:

     

    Unfortunately, Firefox, although not causing the page to move, does display a box with dotted lines indicating the portion of the text included in between the <a> tags.  Is there someway to remove this effect, as well?

     

    The focus rectangle (dotted lines) is required for keyboard navigation from button to button.

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2009 12:57 AM   in reply to kiusau

    The focus rectangle is still there for me in IE8.

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2009 9:16 AM   in reply to John Waller

    I believe you can remove it entirely (thereby sacrificing usability for cosmetics) by using the style "outline:none;".

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2009 10:10 AM   in reply to kiusau

    kiusau wrote:

    <a href="#" onclick="return false" title="橋本龍太郎" class="Text_Translation"><em>Hashimoto Ry&#363;taro</em></a>

    Why use a link for something that isn't a link?

    <dfn><span class="Text_Translation">橋本龍太郎</span>Hashimoto Ry&#363;taro</dfn>

    And the CSS:

    .Text_Translation {
      font-style:normal;
      display:none;
    }
    dfn {
      position:relative;
    }
    dfn:hover span {
      display:block;
      position:absolute;
      top:-20px;
      left:20px;
      background-color:#FF9;
      padding:2px;
    }
    

    This is supported in all modern browsers, except IE6.

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2009 10:20 AM   in reply to MurraySummers

    Murray *ACE* wrote:

     

    I believe you can remove it entirely (thereby sacrificing usability for cosmetics) by using the style "outline:none;".

    Projectseven has a free extension that 'scrubs' it... say it's for IE but may work... anyway, whatever scripty thingy Roddy is using is a disaster. The focus box remains and it minimizes my browser... (FF 3+)... i was quite zapped initially... had several windows open and it just pow! vanished... Thought i'd post it but didn't want a whole harangue....

     

    Added 'free' for obvious reasons :)

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2009 10:42 AM   in reply to JayJhabrix

    PVII's extension uses the same method as Roddy's script.  I'm sure that even they would agree the CSS method is a better approach.

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2009 12:10 PM   in reply to MurraySummers

    Murray *ACE* wrote:

     

    PVII's extension uses the same method as Roddy's script.  I'm sure that even they would agree the CSS method is a better approach.

    Well, it used to work for me... but Roddy's whatever doesn't seem to be working for him...

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2009 1:57 PM   in reply to kiusau

    You still have this -

     

    <img class="MojiFloat" src="../hashimori/iwa.gif" width="105px"

     

     

    I believe your variation may be coming from this -

     

    dfn:hover 

    Are you complete opposed to using something like this -

     

    <dfn><a href="#" onclick="return false"><span class="Text_Translation">カタカナ</span></a>katakana</dfn> names

     

    with the -

     

    dfn a:hover { outline:none; }

     

    rule? What inconsistencies are you seeing in the display, though?

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2009 5:57 PM   in reply to kiusau

    I am not opposed to anything -- completely or otherwise -- that works.  Does this arrangement validate?

     

    Definitely.

     

    Does it achieve anything besides the removal of the focus boxes.  I realize that this was my original goal, but Murray's suggestion tempted me.

    Surely you mean David?  But it achieves removal of the focus boxes (via the CSS), and it puts the :hover back onto an <a> tag which is the most widely supported location for it.

     

    Inconsistencies that I noted are the size, orientation, and position of the displayed boxes, the display of the highlighted word in the page itself, and visible overlap of a displayed box that obfuscates the text contained within upon hover.  Specifically,

     

    OPERA:  Only two of the twelve displays created by the pairing of the <dfn> and <span> tags appear.

    SAFARI:  There is are no italics in Safari -- none. The aforementioned obfuscation is visible with the words Showa and Hirohito.  (This is probably fixable with a tag-specific rule that changes the value of the zoom property.  I have not tried it yet, as the other problems are far more serious and need to be resolved first.)

    FIREFOX:  The position of the displays is highly inconsistent from tag to tag.

     

    I saw no inconsistency in Firefox.  Didn't check the others.

     
    |
    Mark as:
  • Currently Being Moderated
    May 21, 2009 1:55 AM   in reply to kiusau

    kiusau wrote:


    Unfortunately, you and David do share one common negative trait that sometimes demands much patience on the part of the Asker -- you both tend to respond initially without fully understanding the problem.

    Perhaps the problem lies in the original question. I think you underestimate the degree of patience Murray and I exhibit. This is a user-to-user forum, not a free consultancy service. I point people in the direction of a potential solution to their problem. After that, the implementation is up to the individual.

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2009 12:06 PM   in reply to kiusau

    kiusau wrote:


    [deleted]

     

    Please find below both the source and implementation of a jQuery plug-in that helped me to overcome the unfortunate and erratic behavior associated with the use of the <dfn> and <span> tags suggested by David Powers.

     

    IMPLEMENTATION:  http://www2.gol.com/users/hsmr/emblem/name.html

    SOURCE:  http://docs.jquery.com/Plugins/Tooltip

     

    Have a great Memorial Day weekend and don't forget our fallen soldiers!

     

    [deleted]

     

    Roddy

     

    [Personal insult removed by moderator] people try to help you then you castigate them because their help does not fit YOUR PARAMETERS. Please understand... this is not an Adobe Help Centre. This is a user-to-user forum. Which means, that as much as you are seeking help on a subject, David and Murray and all the rest could also be seeking help. The fact that they, or that anyone, tries to help you is something you should be grateful for. If you don't like the suggestion, shut up. Don't whine.

     

    If you have found a solution to your problem elsewhere, by all means post it here for the benefit of others. But trying to rubbish those who've been trying to help you [personal abuse deleted], is just not on.

     

    [deleted]

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points