Hi All:
I have a html tag , in that initially I want tooltip name as mentioned in the "title" attribute. After I click on the link, I want different tooltip name. I have used the below code but it is not working. Can anyone please help me?
<html>
<head>
<script>
function tool(){
document.getElementsByName(link).title = "after click";
}
</script>
</head>
<body>
<a href="javascript:tool()" name ="link" title="before click">click here</a>
</body>
</html>
Using jquery, you can write the following command :
$("a#link").attr("title","after click");
You can use setAttribute(attributeName, value) on the element that you want to change.
document.getElementById('link').setAttribute('title', 'after click');
This also works for custom attributes
Get rid of the BR tag inside your SCRIPT element, and rewrite the tool function to:
function tool(){
document.getElementsByName("link")[0].title = "after click";
}
and it will work. However, it is not the optimal way. If you assign an id parameter to the field you can at least use document.getElementById(..), or even better, use a library like jQuery.
I would use http://jquery.com/ download it and add a script reference to it
Give your a tag an id such as myLink
Then using JQuery you can write
$(document).ready(function () {
$("#myLink").click(function(){
$("#myLink").attr("title","after click");
});
});
Two things are wrong with your supplied code:
As the name implies, documentent.getElementById looks things up by ID, not name. You'll need to supply an ID in that anchor tag. Change your link to <a href="javascript:tool()" id="link" name="link" title="before click">click here</a>
You're feeding documentent.getElementById the contents of a variable called "link", which presumably doesn't exist. You actually wanted to pass a literal string, which needs quotes. Change that call to document.getElementById("link").title = "after click";
Putting it all together, here's what your code would look like:
<html>
<head>
<script>
function tool(){
document.getElementById("link").title = "after click";
}
</script>
</head>
<body>
<a href="javascript:tool()" id="link" name="link" title="before click">
click here
</a>
</body>
</html>
Correcting to Jason code:
write document.getElementById("link").title insteadof document.getElementsByName("link").title.
I have tested it on IE7 and Firefox 3.
<html>
<head>
<script>
function tool(){
document.getElementById("link").title = "after click";
}
</script>
</head>
<body>
<a href="javascript:tool()" id="link" title="before click">
click here
</a>
</body>
</html>
You can also explore this article for creating nice tooltip using javascript: http ://devirtu.com/2008/08/14/how-to-make-tooltip-with-javascript/
I am assuming this is just a simplified example of what you want to do, since changing the link onclick can be done inline:
<a href="#" onclick="this.title='after click'" title="before click">...</a>
Either way, the best way is to avoid doing any lookups altogether. Simply pass in the reference to your link as a parameter to your function:
<script>
function tool(link) {
link.title = 'after click';
}
</script>
<a href="#" onclick="tool(this)" title="before click">...</a>
Naturally, as Grant suggests, you can pass the title value to the function as well, but then you're really better off just doing the inline version all the way and skipping the function.
<html>
<head>
<script>
window.onload = function () {
window.document.getElementById("link").onclick = function () {
this.title = "after click";
return false;
};
};
</script>
</head>
<body>
<a href="http://www.example.com" id="link" title="before click">Click Here</a>
</body>
</html>
Hello people,
I am tackling 2 issues here:
Title is changed when mouse over, but not in the code:
...
< a class="a" href="#" name="home" title="Home">Home
...
document.getElementsByName("home")[0].title = "Title changed"; // working
How to change the class of the link:
FROM: < a class="a" href="#" name="home" title="Home">Home
TO: < a class="current" href="#" name="home" title="Home">Home
document.getElementsByName("home")[0].class = "current"; // not working
Thanks!