How can I dump the HREF and still have the cursor turn to a hand?

[Bill H]

I used a bit of JS on a page that is fairly long and didn't like the
way that

<A HREF='#' ONCLICK=\"...

refreshed the page to the top. Removing the HREF (<A ONCLICK=\"...)
solved my "problem" however the cursor no longer changes into the
little hand when rolling over the link. Can I have both? No HREF and
the little hand?

Thanks in advance for a push in the right direction!

 

[Martin Honnen]

I used a bit of JS on a page that is fairly long and didn't like the
way that

<A HREF='#' ONCLICK=\"...

refreshed the page to the top.

You could use

Removing the HREF (<A ONCLICK=\"...)
solved my "problem" however the cursor no longer changes into the
little hand when rolling over the link. Can I have both? No HREF and
the little hand?

Use CSS
<style type="text/css">
a.whatever {
cursor: pointer;
}
</style>

<a class="whatever">
Should do with Netscape 7, IE 6, Opera 7, Mozilla

 

[Lee]

Bill H said:

I used a bit of JS on a page that is fairly long and didn't like the
way that

<A HREF='#' ONCLICK=\"...

refreshed the page to the top.

If you don't want a link to be followed, have your onclick handler
return false. The null anchor, "#", is a link to the top of the
current page.

<a href="#" onclick="...;return false"

will do what you want.

In modern browsers, you can use CSS to set the cursor for any
span of text, and can also assign an onclick handler for such
text, but using the link as above is simpler.

 

[Blue Raja]

I used a bit of JS on a page that is fairly long and didn't like the
way that

<A HREF='#' ONCLICK=\"...

refreshed the page to the top. Removing the HREF (<A ONCLICK=\"...)
solved my "problem" however the cursor no longer changes into the
little hand when rolling over the link. Can I have both? No HREF and
the little hand?

This can be done with CSS rather than Javascript. Add "cursor: hand;" to
your style tag, eg:
<a style="cursor: hand;" onclick="doStuff();">A former link</a>

Some other useful values for cursor include:
arrow : the standard pointer
crosshair : the crosshair cursor
help : the "?" cursor
move : the "move window" cursor
text : text selection cursor
wait : hourglass cursor

Also, you can recreate the "resize" cursors (eg those display when resizing
a window from its corner) with the following:
n-resize, s-resize : up/down arrows
e-resize, w-resize : left/right arrows
ne-resize, sw-resize : bottom-left/top-right arrows
nw-resize, se-resize : top-left/bottom-right arrows

Hope that helps.

--

The Blue Raja
"Besides, true evil never shows itself by trying to legitimizing itself.
Take 'Raja, for example. He's an EVIL little bastard and doesn't have to
announce it to the world. He decimates the millions with polite,
conversation and leaves a wake of devastation in his path." - Butch
RGMW FAQ - By order of Yoda Bob
http://www.rgmw.org

 

[Lee]

Blue Raja said:

This can be done with CSS rather than Javascript. Add "cursor: hand;" to
your style tag

Unfortunately, the cursor names aren't that well standardized.
IE uses "hand".
Others use "pointer"

 

[Lasse Reichstein Nielsen]

Unfortunately, the cursor names aren't that well standardized.

Yes they are

IE uses "hand".
Others use "pointer"

.... and IE is wrong. The solution is to do:
---
cursorointer; cursor:hand;
---
All browsers except IE will ignore "cursor:hand" because it's not a
recognized value. (IE compounds its problems by not ignoring
"cursorointer", but instead recognize it and misinterpret it)

/L

 

[Richard Cornford]

Blue Raja wrote:

This can be done with CSS rather than Javascript. Add "cursor:
hand;" to your style tag, eg:
<a style="cursor: hand;" onclick="doStuff();">A former link</a>

<snip>

cursor:hand; is an IE only formulation, the official CSS version is -
cursorointer; - but as it is unrecognised by older IE versions a rule
such as:-

..usePointer {
cursor:hand;
cursorointer;
}

- can be use. Modern browsers will use the second rule and old IE
versions will ignore the second rules as they will not recognise it.
(Non-IE, standards compliant browsers will not recognise the first so
they will ignore it, only later IE versions would understand both).

An A element without an HREF, NAME or ID is not really an A element
(neither a link nor an anchor) so it would probably make more sense to
be using some other mark-up. In the absence of any context information a
SPAN would be sufficient for the task. A major difference between those
two elements is how thy function with keyboard navigation. But an A
element without an HREF attribute is going to be outside keyboard
navigation anyway (just like a SPAN).

Setting the cursor CSS property in a STYLE attribute means that it would
be used whenever CSS was supported on the browser, but CSS support is
independent from javascript support (except on Netscape 4). The user of
a javascript incapable/disabled browsers that supports CSS would be left
with the impression that the element was supposed to do something
(because of the cursor) but clicking on the element will do nothing. To
avoid the confusion it is generally better to have javascript apply the
CSS so that it is only used when there is a chance that using the
element will actually do something:-

<style onclick="doStuff();"
onmouseover="this.className='usePointer';this.onmouseover=null;">
Not a Link</span>

Though it is difficult to see the resulting element as being a
contribution to a web page when it is not capable of doing anything
(even without the cursor style). As a result it makes most sense to have
the UI widgets that relate to javascript dependent functionality created
with javascript, using - document.write -, - innerHTML - or with W3C DOM
Node creation and insertion techniques (accompanied by appropriate
feature detection to verify that the browser supports the related
functionality). So that the user is never presented with a UI component
that is incapable of delivering whatever it promises to do.

<input type="button"> elements also make good candidate as devices for
triggering javascript dependent functionality where no viable
alternative can be provided, and can be substantially styled on more
recent and co-operative browsers.

Ultimately the simplest approach has go to be using the A element with
an HREF attribute, cancelling the default action associated with the
onclick handler (the navigation) and providing a URL for the HREF that
either re-produces the functionality remotely (using server-side
scripting) or explains, and apologises for, the javascript dependency in
the UI design.

That way you have the desired cursor as a matter of course, viable
keyboard access and an item on the page that makes sense to the user
however it is allowed to work.

Richard.

 

[Bill H]

Yes they are


... and IE is wrong. The solution is to do:
---
cursorointer; cursor:hand;
---
All browsers except IE will ignore "cursor:hand" because it's not a
recognized value. (IE compounds its problems by not ignoring
"cursorointer", but instead recognize it and misinterpret it)

/L

Thanks everyone, you rock!

 

[Lasse Reichstein Nielsen]

.usePointer {
cursor:hand;
cursorointer;
}

- can be use. Modern browsers will use the second rule and old IE
versions will ignore the second rules as they will not recognise it.

Would be great, but IE has a bad habit of not ignoring unrecognized
values. Just as for "position:fixed", IE 5.5 (maybe also other
versions) will *not* ignore "cursorointer", but will treat it as
"cursor:default". To work, the rules must be swapped.

/L

 

[Richard Cornford]

... . To work, the rules must be swapped.

Yes, you are right. I should have looked up an example instead of
relying on my memory (it is not always that good

Richard.

 

[Thomas 'PointedEars' Lahn]

Yes they are

Which is why ...

... and IE is wrong. The solution is to do:

.... this is a solution, but not Valid CSS.


PointedEars