aetherworld.org

Joen of Noscope has just suggested, what I’ve been trying to tell people for nearly a year. With the advent of pages commonly referred to as “Web 2.0” sites, the styling of inline or AJAX links became an issue. Usually links have to be indicated to the user, since clicking them slowly loads a whole different page and the user is unable to interact with the current page. The common indicator we use for links is the hand cursor.

AJAX or JavaScript links, however, immediately change a part of the page you’re looking at, without reloading the whole page and without disturbing the user experience. The user can still interact with the page. For example on Pageflakes - the personalized start page I’m using - you can find both types of links: normal ones that take you to another page and AJAX links that allow you to edit settings or reload embedded RSS feeds. The cursor for both types of links is the same, a hand. For the Web-savvy, this might not pose much of a problem, we intuitively know most of the time what type of link we deal with but for other users, this can be increasingly difficult to discern.

The solution Joen proposes, and what I have previously used in these cases, is simply not changing the cursor at all. In reality, it’s not a link, it’s more of a pushbutton that looks different, so why not use the same cursor we use for buttons?

The implementation is rather easy as it only requires a simple cursor: default; rule. To allow for fallback (if the user has no JavaScript, the AJAX link becomes a normal link), I just embedd the stylesheet with JavaScript so I get a hand cursor for people without JavaScript, where the link actually reloads the page and a default cursor (pointer) for people where the link only affects the current page.

Adding a stylesheet via Javascript is rather easy too:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
 	if( document.getElementById && document.createElementNS && document.getElementsByTagName ) {
		var javacss = document.createElementNS( "http://www.w3.org/1999/xhtml", "link" );
		if( javacss ) {
			javacss.setAttribute( "rel", "stylesheet" );
			javacss.setAttribute( "type", "text/css" );
			javacss.setAttribute( "href", "/_css/java.css" );
			javacss.setAttribute( "media", "all" );
			document.getElementsByTagName( "head" )[0].appendChild( javacss );
		}
	} else {	

		document.write( '<link rel="stylesheet" href="/_css/java.css" type="text/css" media="all" />' );
	}

//--><!]]>

</script>

So, what do you think?