The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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

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.

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.

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.