Displaying Status Bar Text with Javascript
Okay, you've got your page up now. It looks good and all, but you want something cooler. A neat little effect to add. You're a professional though, so you don't want anything flashy and unprofessional.
JavaScript is perfect for this.
Ever notice that bar on the bottom of your browser? The one where you can see the URL a link points to by putting your mouse over it? Well, how would you like to display a message there for a visitor who puts his or her mouse over a link?
Easy:
Simple, huh? If the user's browser supports JavaScript, their status bar will display the text "Read My Article!" when they place their mouse over the link. If their browser does not support it, they will see the usual URL - so degrading is not a problem.
The code should be fairly self-explanatory. Obviously the "onMouseOver" text simply means "if someone puts their mouse over this link, then do this" - and "this" is the window.status command - which obviously allows you to specify what text is displayed in the status bar.
However, the above code does have one small problem.
If you try it out (go ahead!), you'll notice that the text "Read My Article!" remains in the status bar even after the mouse is moved away from the link. Not a big deal, but let's fix it anyway:
Similar to the earlier code, only this time we've added another attribute to the link - onMouseOut! This is obviously the opposite of sorts to onMouseOver - it says "when the mouse is moved off of this link, do this."
As you'll notice, there is NO text between the single quotes - so obviously when the mouse is moved off of the link, the status bar is replaced with the new non-existent text.
The resulting effect? You see the "Read My Article!" text when your mouse is over the link, but things go "back to normal" when you remove your cursor from the link.
It's professional, simple, and easy. Best of all - it's a great way to provide more information about a link without taking up valuable screen real-estate.
Site Categories
Recent Blog Posts
