Best HTML Link Method

Kemp

I recently came across a site that wouldn't allow me to middle click a link to open it in a new tab, and a right-click didn't present any link-based options (save link as, open in new window/tab, etc etc). I decided to view the source to see what magic they were using and came across this method:

This is really dumb. They're basically forcing the user to navigate away from their site, providing no method of open the target in another tab or window, all for the sake of (no doubt) being different and "cool". I guess it's kinda like those sites that use java and flash for things that can be done in basic html or html with a tiny piece of javascript.

For reference, there was no "protected" content on the source or target sites, and there was no problem with referrer urls.

vt_mruhlin

I've seen stuff like this from people who didn't want the classic "finger" cursor over their links, but the normal pointer instead. But if the "dlink" style is defining the cursor too....well, i dont know.

....now time for my similar WTF, many many years ago. Created a span that said "click here". Attached an onClick listener to entire document. onClick compares the position of the mouse against the span.
Since I had multiple links, I had two string arrays: aID, which stored the id attribute of the span, and aURL which stored the URL to go to for that span.
List wasn't sorted or anything, so for every click I did a linear search of aID and compared the mouse coordinates to each span contained therein.

KattMan

We actually use this method but with a DIV rather than a span.

Essentially we use CSS to make the dive look like a button by using a background image and use the onclick onmouseover and onmouseout to change the look of the "button". Needless to say that is a disabled state so we do need to use Javascript to determine if the button is disabled or not and only navigate when enabled.

The key here though is that it is on a frame inside the rest of the site so you are not navigating away and always have access to the top level menues and such to be able to do what you want. It is only on content pages this happens.

Kemp

There were no frames, it was just a flat page. And yes, the cursor changed when hovering, and it was just rendered to look like a normal link.

Cap_n_Steve

@KattMan said:

We actually use this method but with a DIV rather than a span.
Essentially we use CSS to make the dive look like a button by using a background image and use the onclick onmouseover and onmouseout to change the look of the "button". Needless to say that is a disabled state so we do need to use Javascript to determine if the button is disabled or not and only navigate when enabled.
The key here though is that it is on a frame inside the rest of the site so you are not navigating away and always have access to the top level menues and such to be able to do what you want. It is only on content pages this happens.

So why not use a button?

This kind of thing is my main annoyance with Gmail.

Daniel15

We actually use this method but with a DIV rather than a span.

Maybe I'm not thinking correctly, but why don't you just style the <a>?

rjnewton

@Kemp said:

I recently came across a site that wouldn't allow me to middle click a link to open it in a new tab, and a right-click didn't present any link-based options (save link as, open in new window/tab, etc etc). I decided to view the source to see what magic they were using and came across this method:
<span class="dlink" onClick="window.location.href='http://www.example.com'">Link</span>
This is really dumb. They're basically forcing the user to navigate away from their site, providing no method of open the target in another tab or window, all for the sake of (no doubt) being different and "cool". I guess it's kinda like those sites that use java and flash for things that can be done in basic html or html with a tiny piece of javascript.
For reference, there was no "protected" content on the source or target sites, and there was no problem with referrer urls.

I'd agree that this is a WTF, but having distinctly different tastes in browsing, I find it much less irritating than the converse: sites that insist that evry link must open in a new window or tab. If I really want t new window to open a link in, I can bloody well [and often do] open a window and paste the URL into the address bar. Having automatic window-spawn just grates on my nerves.

I guess we could both have our wishes if web-authors would just use straightforward HTML for basic navigation.

Faxmachinen

@KattMan said:

Essentially we use CSS to make the dive look like a button by using a background image and use the onclick onmouseover and onmouseout to change the look of the "button". Needless to say that is a disabled state so we do need to use Javascript to determine if the button is disabled or not and only navigate when enabled.

It's very easy to swap images within an anchor in Javascript though. As for disabling the button, button_anchor.href="$" should do the trick.

But then again, if your website relies so heavily on Javascript anyway, it might be pointless.

Edit: What the eff... pretend the $ above is actually a #