homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

HTML Link Help - changing the status bar text onmouseover

 2:00 pm on Oct 22, 2006 (gmt 0)

Hello Big Brothers

On my website when I mouse over on my link it shows link path at status bar , I dont want to display full path i want to display that page name

Like on my homepage i have link of contact then when I mouse over on contact it shows 'www.example.com/contact.html' instade of this I want to show only 'Contact' on status bar so is it possible to do this?

also suggest one more thing like when I mouse over on any link on home page it shows single word like "My WebSite" so its easy to put single line of code on <Head> area of my page

Thanks in Advance



 2:46 pm on Oct 22, 2006 (gmt 0)

Hi a1domain, you can can change the text in the status bar by assigning a value to
window.status (using JavaScript). This you can do in the onmouseover and onmouseout events of your link to overwrite the default text (URL).

<a href="/www.example.com/contact.html" onmouseover="window.status='Contact'" onmouseout="window.status=''">

Will show "Contact" in the status bar instead of the URL, and it will clear the text when you move out of the link.

Further enhancements... You could assign these events when the page is loaded, so you don't have to add it to every link manually - you could also extract the filename and capitalise the first letter for example, so you don't have to set it for each link ('contact.html' becomes 'Contact' etc.)

This should work OK in IE. It will work OK in Firefox if the user has not disabled this feature (it is disabled by default though I think). In Opera, you can't seem to change the text in the onmouseover event - it always displays the URL - although it works OK in the onmouseout event. So, in short, you cannot rely on it.

Hope that helps.


 8:04 pm on Oct 22, 2006 (gmt 0)

Thanks penders for your reply

can you tell me how can i add one line of code when page is loading?

On my page when user mouse over on any link i want to show "My Website Name" in statusbar so how to do this?

Thanks in advance


 6:37 pm on Oct 23, 2006 (gmt 0)


I Want to Display Same Name in all link's mouseover event
for Exapmple "Home Page" for every link's mouse over event so how can I set that.

plz help me because i dont know javascript at all

Thanks in Advance


 12:54 am on Oct 25, 2006 (gmt 0)

Hi a1domain, I accidentally missed off an important bit in the example above, here it is again, with a bit added...

<a href="contact.html" onmouseover="window.status='Contact'; return true;" onmouseout="window.status=''; return true;">

To display the same status bar message (eg. 'My Website Name') for all links on your page (although I cannot recommend doing this for useability/accessibility reasons!)....

Save the following JavaScript in a separate file called "link_msg.js"

window.onload = addLinkMsg;

// Adds a status bar message to all links on the page
function addLinkMsg() {
if (!document.getElementsByTagName) return;

// Get all the anchors/links in the document
// and step through them all, assigning events as we go...
var anchors = document.getElementsByTagName('a');
for (var i=0; i < anchors.length; i++) {
anchors[i].onmouseover = function() {window.status = 'My Website Name'; return true;}
anchors[i].onmouseout = function() {window.status = ''; return true;}

Then, in the <head>...</head> section of the page you want to change the link messages for, just include your JavaScript file:

<script src="link_msg.js" type="text/javascript"></script>

This assumes your JS and HTML files are in the same directory. The links are modified immediately after the page has loaded (the onload event).

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved