SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a link on mouseover

    I would like to create a link when a user moves their mouse over a specific item of text (there will be several on a page), the text being delimited by <span class= ></span> and the text itself will form part of the link. eg
    HTML Code:
    <span class="lparef">abc123</span>
    would become
    HTML Code:
    <span class="lparef"><a href="http://example.com?id=abc123">abc123</a></span>
    Is this feasible? Can anyone give me a pointer where to start?

    Thanks G
    blessed are the cracked for they let in the light

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use css, not javascript.

    Just change the style to whatever you want a link to look like on :hover, and style it as something else when not :hover
    And, of course use real links.

    Unless there's something preventing you from doing this?

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I think my rationale for proposing to use JS was that I wanted to create the link "on the fly" in order to make maintenance of the page simpler.
    blessed are the cracked for they let in the light

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    What is the purpose behind wanting to use this technique? I if's just so that the link do not normally show an underline, and only show one when it's hovered over, that is a very simple CSS technique instead.

    Code css:
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I say I didn't want to put the a link in the HTML but create it on the fly. The URL it links to is fairly complex and there are 3 or 4 dozen on the page. My reasoning - possibly flawed - was that it would make maintenance of the page easier and the page would be smaller in size to load.
    blessed are the cracked for they let in the light

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Here are some pointers on how to start with this.

    First, the conversion itself. You will need to script the creation of a new anchor link, along with the href attribute and the text for the link. Then you will need to use the DOM manupulation method replaceChild to replace the span with the anchor link itself.

    You haven't mentioned if you want on mouse out for the link to be reversed back to a span, or if you are okay with those without javascript having no access to the links. Search engines won't be able to follow the links, and the 5&#37; to 10% who deliberately browse with scripting turned off will be affected as well.

    So far as the mouseover itself, you do not want to attach an individual event on to each span. Instead you will want a document-wide event that monitors when the mouse is over each page element, so that when it is over a valid element the link replacement can occur.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Spiders not following the links would be a bonus.

    I confess I've not thought about what happens on mouse out. How do I do a document-wide event?
    blessed are the cracked for they let in the light

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Typically document-wide events are done as:

    Code javascript:
    var onmouseoverHandler = function (evt) {
        evt = evt || window.event;
        targ = evt.target || evt.srcElement;
        if (targ.nodeName === 'SPAN') {
            ...
        }
    }
    document.onmouseover = onmouseoverHandler;

    However, only use that technique if you know that it is going to be the only onmouseover event that the document will be handling.

    If you suspect that you will be wanting to add multiple handlers to the same event on an element, you will be wanting to attach the event itself using a smarter technique:

    Code javascript:
    function addEvent(obj,type,fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type,fn,false);
        } else if (obj.attachEvent) {
            obj["e" + type + fn] = fn;
            obj[type + fn] = function () {
                obj["e" + type + fn](window.event);
            }
            obj.attachEvent("on" + type, obj[type + fn]);
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks PMW!

    G
    blessed are the cracked for they let in the light


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
  •