Disable Link with Javscript and CSS
September 1st, 2010I was using a Bubble Tool Tips script on a project to display description info when the mouse rolled over the title of an item pulled from the database. The problem is that the Bubble Tool Tip I was using only worked when used in links (a tag with href=”something” and title=”something”). So to get around this, I need to do two things A) Style the link to look like text, and B) Disable the link from doing anything when you click it.
So here is how you can do it yourself:
For the css I decided to use a class of bubble in the link (See Below). The CSS I included in my default style.css as follows:
.bubble{
text-decoration:none;
color:#000000;
cursor:default;
}
I’m not really a JavaScript coder, I just started learning about it in any kind of detail last week or so. I do remember reading something along the lines of onclick=”someFunction(); return false;” though. Sure enough, just having the “return false;” is enough to start the link from even reloading the page when clicked.
So my link looks like this:
<ahref="#"title="Description of Item For Tool Tip" class="bubble" onclick="return false;">Link Text</a>
This in effect makes the text between an <a> & </a>tag appear normal. Ultimately, no matter how you dress it up the browse is always going to see it as a link. When you mouse over it, you may still see a url in your browsers status bar, but clicking it will do nothing and it will appear just like all your other text.
Good luck with your programming endeavor!