December 4th, 2005 | 2 Comments
More Cursor Choices
The old debate as to whether web designers should be able to force links to open in new windows was raised in a recent post by Roger Johansson, No more chromeless popup windows.
One of the points raised in the comments was that it is difficult for the user to tell whether a link opens a new window or not. This is probably something we all have encountered. How many times have we got to the end of a form, to find that we must agree to some terms and conditions for which we have to click a link to view - Does that link open a new window? Will I lose all the data I’ve entered if I press it? These days, most of these sorts of links do open some sort of pop-up or a new window, but for novice web users this might not be obvious, and even experienced web users can be left in some doubt.
In Roger’s comments I suggested that there could be a change in the cursor when you hover a link that opens a new window. As he rightly points out in response, this would only be a visual clue to those using a mouse to browse the site in question - any indication of this sort should be device independent. Although I whole hartedly agree that we should strive for device independence wherever possible, is there much harm in trying to improve the browsing experience for some visitors?
When I suggested changing the mouse icon for new window links I was thinking that it could be something that browser makes could build in themselves, although there are many ways to open new windows, so it might be best left up to website designers to choose - the CSS2 specification allows for various types of cursor, including site specific cursors which are called through a URI. With the recent release of Firefox 1.5, support has been added for custom cursors, and although caution should be urged that designers do not go over-the-top and confuse visitors even more, this may mean we see more and more feedback given to the visitor via the mouse cursor.
If you’re viewing this post in Firefox 1.5, this link should have a slightly different cursor. OK, so if you were actually doing this for real you’d spend smore more time designing your cursor than I did.
The syntax for specifying a custom cursor like this is:
a.classname {
cursor: url("new-window.gif"), pointer;
}
A .gif file seems to work fine, although the CSS2 spec seems to suggest you should use the proper cursor file type (.csr). You should also specify a default pointer in case the browser in question can’t cope with the URL. Obviously you could use javascript to run through all the links to new windows on the page an to attach the appropriate class name on the fly.
Only tested in Firefox 1.5 on Windows so far, I’m afraid.
WV4 is the online home of Rob Lewis, featuring a blog covering a variety of subjects, mainly web design, CSS and PHP, as well as featuring useful links to other websites.
Try this for an image: http://en.wikipedia.org/skins-1.5/monobook/external.png
The only downside is applying a class to each of the links, I belive there is a slice of CSS3 that lets you set the target of a link, so you can send things to a new tab or a window.
Perhaps there is a also a fancy CSS3 selector that would pick up on external links and then apply the new-window thing and also change the cursor.
Works for me. Very nice. :)