Anchor without a Href?

anchor and images without an href?

[tesla]

I would like to have an image that when clicked upon runs an "onclick" handler. Easy enough. But I would also like it to change the mouse pointer like <a href="....> does when the mouse is passed over the image.

<a href=""><img src="image.gif" onclick="doit()"></a>

This works, but I believe the (href="") is not valid HTML. How can I make the above valid?

<a href="#"><img src="image.gif" onclick="doit()"></a>

I have seen this in places but I'm not clear this is any more valid

Thanks,

[Macguru]

Hi tesla,

<a href="#">

Not sure if it will validate but it should do the trick.

<added>You edit faster than I post! Now look at my post ;)</added>

[edited by: Macguru at 6:02 am (utc) on Aug. 25, 2002]

[pageoneresults]

Hello tesla, if you are working with css, try this...

span.hand{cursor:hand;}

<a href="#"><span class="hand"><img src="image.gif" onclick="doit()"></span></a>

<edit> I may have misinterpreted the original question, sorry. Its still a good tip for controlling the cursor on links. ;)

P.S. Macguru is correct, I believe this is referred to as an empty href...

<a href="#">

I use them all the time during development before assigning actual links.

[tesla]

pageoneresults,

I can't say that I am using CSS. You see, I'm just a caveman, and I'm not familiar with your strange new ways. I don't know what it is about CSS, but I have just avoided it as much as I can. I make my way with HTML and ASP. Once in a while when I get stuck I look for help here, and there is always some kind soul that will help me through it. I should really accept CSS since I hear so much about it here on WebmasterWorld. But in general I seem to be able to get by without it.

I tried the (href="#") but the validator hates it. But Netscape and IE both do not seem to mind.

Thanks,

[Macguru]

On the opposite tesla, I just tried the validator on this : (in a page of course)

<A HREF="#"><IMG SRC="foo.gif" WIDTH="80" HEIGHT="36" BORDER="0" ALT="FOO"></A>

And here is what I got :

Congratulations, this document validates as HTML 4.01 Transitional!

They even have and adress where you can upload local files that are not yet online.

[validator.w3.org...]

So I think <A HREF="#"> is valid loose HTML.

[jatar_k]

just so you know tesla, ASP keeps you out of the caveman category. ;)

Here is what my book says for HREF value (a la o'reilly):

Any valid URI, including complete and relative URL's, anchors on the same page (anchor names prefixed with the # symbol), and the javascript: pseudo-URL in scriptable browsers to trigger a script statement rather than navigate to a destination.

Have to admit I am not too sure. Try putting just javascript: in the href="" or even putting the onClick function call in there. Not really sure but if validation is necessary try those out.

[tesla]

Macguru,

I tried the on-line validator and your right, it seems fine with it. You would think it would check for the anchor in the doc to make sure it is a valid internal link. Perhaps "#" defaults to the top of the doc?

I'm using the CSE Validator Pro V5.03 and it reports:

[The "href" attribute specifies an invalid internal link. An internal link name should follow the # character.]

Since this seems to work for the major browsers, I guess I will go with it. I can always change it to jatar_k's suggestion if I run into trouble with future browsers.

Thanks,

[pageoneresults]

> To invoke a Bookmark either in a current document or in a remote document, the Bookmark NAME must be prefaced by a hash mark symbol ("#"). If no Bookmark is specified in the href statement, the browser will default to the top of the document (as stated above).

Not a whole lot of info immediately available on empty href's.

[pageoneresults]

Does this work...

[webmasterworld.com...]

[rewboss]

I never use href="#" because it a) causes the browser to jump to the top of the page and b) appends a new entry to the history list (messing up the Back button and potentially making people think it's broken completely).

All you need to do is to move the JavaScript from the onclick handler to the href with a javascript: pseudo-protocol:

<a href="javascript:doit();"><img src="image.gif" /></a>

Alternatively, drop the <a> tag altogether and use the CSS cursor property (not as cross-browser compatible as the previous solution):

<img src="image.gif" onclick="doit();" style="cursor: hand" />

[tedster]

Netscape 4 will require an anchor here, I believe. But you can do this:

1. Create a short error.html page - "Your browser has javascript turned off, and this function requires javascript - yada yada!"

2. Use this approach to include a valid url:
<a href="error.html" onclick="doit();return false;"><img src=image.gif></a>

This moves the onclick handler to the anchor, where it's more cross-browser compatible. The "return false;" keeps the link to the error page from working when javascript is available.