mwrouse / dom-elements-as-links

A Little JavaScript library that allows you to turn any element, not just anchor tags, into links.

DOM Elements as Links

This little JavaScript library allows you to have any element on a page act as a link, even if it is not an anchor tag.

Syntax

The syntax for using any DOM Element as a link is extremely simple, all you do is add an href attribute to the element, and an option target attribute, just like you do on <a> tags.

<span href="http://example.com">This is a link!</span>
<span href="http://example.com" target="_blank">This is a link that opens in a new tab!</span>
<img src="http://example.com/user/profile/avatar.png" href="http://example.com/user/profile">

Styling

If you're interested in styling your non-anchor tag links the same way as your anchor tag links, this is also simple, add CSS similar to the following:

a,
[href]
{
  /* CSS Styling Here */
}
a:hover,
[href]:hover
{
  /* Styling for Hover */
}

Yes, this is a bit redundant, seeing as all you need is the [href] selector, but oh well.

Please, however, at least have this CSS somewhere:

[href]:not(a)
{
  cursor: pointer;
}

Usage

To use this library, simply include the source code in your program, or copy and paste it into an existing JavaScript file you have, then run

window.DOMElementsAsLinks()

when the page is done loading. It is important that it is ran when the page has finished loading, because all DOM elements need to be ready for it to read them.

You can do this by one of the following ways:

window.onload = function(){
  window.DOMElementsAsLinks();
};

window.addEventListener('load', function(){
  window.DOMElementsAsLinks();
});

You should know how to do that though.

Example

View a CodePen Example

Known Issues

The only known issue is that this won't work on browsers that have JavaScript disabled...

License

Distributed under the MIT license.