Forum Moderators: open
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
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.
<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).