Welcome to WebmasterWorld Guest from 54.196.238.210

Forum Moderators: incrediBILL

Message Too Old, No Replies

HTML Link Help - changing the status bar text onmouseover

     

a1domain

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

5+ Year Member




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

penders

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

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.

a1domain

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

5+ Year Member




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

a1domain

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

5+ Year Member



Hello

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

penders

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

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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).

 

Featured Threads

Hot Threads This Week

Hot Threads This Month