Topic awaiting preservation: Disable href

Is there a way to completely disable the 'a' tag without affecting whatever is between it's opener and closer? by this i mean:

tag gets disabled bu image stays fine

<a href="blah" onclick="blah()"> ----> <img src="blah.gif" /> <---- </a>

or is there a way to dynamically assign a link or onclick event to an object with javascript?

I don't want to lose the 'hand' cursor functionality tho, when a link is active I would ideally like it to have the hand cursor onmouseover to indicate this, however any solution must be cross browser.

Try using <a href="blah" onclick="blah()" id="ThisIsAnId"> ----> <img src="blah.gif" /> <---- </a>
and then
document.getElementById("ThisIsAnId").removeNode();
to remove the a-tag.
but when I think about it, maybe that's not what you mean by disabling the a-tag.

[This message has been edited by Archonian (edited 06-22-2003).]

If you simply change the onclick event to

onclick="blah(); return false;"

then the hyperlink won't be followed when the link is clicked. Returning false indicates that the normal clicking action (which happens to be following the hyperlink) should not be taken.

(If that doesn't work, try "true" instead of "false"; I'm not positive I remember it right.)

you're right false disables it.

also you could make the link like so

<a href="javascript: void(0)"> something </a> which makes a link that does nothing.

the cool thing about using the return to the onClick event handler is that you can make the link work sometimes and not work other times by calling it like so

<a href="blah" onClick="return someFunction()">

then your someFunction function can either return true or false (good for validating forms or something)



.:[ Never resist a perfect moment ]:.

Archonian had it right, but then how do i put the 'node' back when i want the link to become active?

**EDIT**

Ok i have had a little look into nodes and have discovered this thing called 'replaceNode' which sounds good to me.

Can one of you guys please explain how I would use this to replace the <img src="1"> node with different <a href><img src="2"></a> node via a function call?

[This message has been edited by smonkey (edited 06-22-2003).]

Archonian, you method leaves the trailing </a> tag tho, couldn't this cause problems?

To disable the href-function you could do:
document.getElementById("LinkID").setAttribute("href") = "javascript: void(0)";
And then to enable it again you could do:
document.getElementById("LinkID").setAttribute("href") = "http://link.to.site";

It won't remove the a-tag, but the link function of it will be disabled. Don't know of any way to completely remove the tag and then put it back again at the same place. If you also want the link to look like ordinary text while the href is disabled you have to create a class that makes the link look like ordinary text, and then switch back and fro between the class as you change the href attribute. This can be accomplished the same way that you change the href attribute, just change the class attribute instead of the href attribute.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"

[This message has been edited by Veneficuz (edited 06-22-2003).]

quote:

---

Archonian, you method leaves the trailing </a> tag tho, couldn't this cause problems?

---

Actually, his method doesn't leave the trailing </a> tag. It is impossible, when working with the DOM (Document Object Model), as his method does, to remove an opening tag without removing a closing tag. The entire "element" is removed at once, which includes the opening tag, the closing tag, and all of its contents. Try not to think of it in terms of HTML; think of it more abstractly: a theoretical "anchor" object, which has more objects inside of it (specifically, the hyperlink text), which is being removed.

Nonetheless, I wouldn't recommend using that method if you plan to put the link back later on. Once a node is removed, putting it back in the same place isn't an easy task. You will likely have better luck either doing what Veneficuz described, or by simply visibly removing the hyperlink like this:

To hide the link:
document.getElementById("LinkID").style.display = 'none';

To show the link:
document.getElementById("LinkID").style.display = 'inline';

This is actually setting CSS display properties on the fly to hide and show the link, without actually removing it from the page.

Since you said you don't want to lose the "hand" cursor functionality, though, I would still suggest either using Veneficuz's method, or setting the onclick function to "return false;" and "return true;", to toggle the functionality of the hyperlink.

thanks slime.

i think i have miscommunicated here a bit, let me explain,

i have a series of thumbnail images, i want them to display without links and without the hand cursor until the larger image that a particular thumbnail represents is fully preloaded into the cache, at which point i want them to become active links with the hand cursor.

does that make better sense now?

thanks guys

**edit**

check out my other post http://www.ozoneasylum.com/Forum2/HTML/002224.html it is relevant to the preloading images bit, cheers guys.

[This message has been edited by smonkey (edited 06-23-2003).]

Right, now I understand what this is all about.

Although, I must say, doing that will be extremely confusing. A thumbnail is a link to a larger image by nature, breaking that convention until it's loaded will confuse just about everyone, unless you're using a very intuitave visual clue to let the user know that's what you're doing, I suggest you find a different way of doing this.

That being said, the easiest way to do this is to slap an id on the anchor then just script the changes. Make two .class CSS rules, one for the non-hand/non-loaded state and one for the loaded state (use the cursor: property to set the cursor) and by default you'll have a "return false" in the onclick="" handler. Then, once it's loaded you can change the .class and remove the "return false".

Something like:

if (image loaded conditional) {
imageAnchorElement = document.getElementById("myImageAnchorId");
imageAnchorElement.className = "loadedClass";
imageAnchorElement.onclick = function() {return true;}
}

I have to agree, I think you are over thinking this page. Having elements of a page that are sometimes links and sometimes not is a bad user experience. Heaven forbid someone has a slow connection, how are they going to know that the thumbnails are links at all.



.:[ Never resist a perfect moment ]:.

i have thought about user experience, the thumbnails have a clever little indicator floating over the top of them which very clearly states (loading...) when the image loads I want this indicator to be removed and a link to the larger image become active. I didn't want the hand cursor while it was loading becasue people inherently think the hand cursor means button and hence click, however i didn't want to lose the hand cursor altogether only whilst the image is loading. I really didn't want to use the css cursor property tho because it is ie proprietry (at least at the moment) and cross browser issues apply.

thanks guys

You know, you could wait with writing the images to the page entirely until the images have been loaded into the cache. Although that creates a loading-time-issue.

You could have one div/layer with all the images without the a-tags and one div/layer with the images having a-tags. This would of course cause problems with positioning, I figure you're using tables. Then the layer with the a-tags could be hidden at first and when the images has been loaded it could be shown and the other one could be hidden or entirely removed with removeNode(true); True is used to remove all the content within the node that is being removed.

i think i might use innerHtml as older browsers aren't necessary. I will start with writing non-href images to the div then replace it with the linked ones as and when i get notification from the large images that they have loaded.

by the way, how do I do that? just say i want to preload 20 images (maybe from an array), and each time one of them loads it calls a function with an argument specific to that large image (maybe the array position/number of the image) - how do i do that?

[This message has been edited by smonkey (edited 06-30-2003).]