SEARCH
  Web Programming JavaScript Window Status

Window Status

Will JavaScript Mar 19, 2007

Window StatusWhat're we doing?

Ok, today we're going to be utilizing HTML's shared attributes with Javascript; onmouseover="" and onmouseout="" and then using the window.status() Javascript function to change the window status.

What's an example?

Ever put your mouse over something and the little bar at the bottom of your browser changed? There's your example. It's most commonly used with links and images.

Let's start off!

Part one: window.status()

Ok this is the actual bit that changes the window, remember it. Its syntax is this:

window.status='The message that is displayed in the status bar'

It is used in Javascript only and you'll never find it in HTML or PHP. Ever. I tell you.

Part two: incorporating this into HTML

How is this done? Simple. You use onMouseover and then add window.status in. This is because onMouseover acts as a embedded Javascript style HTML tag, which allows you do execute Javascript statements on a certain event, i.e. when a user places their mouse over the element.

Shut up, just give me the code..

So I did.

First of all, we take a link such as this one here: www.google.com

Mouse over it. It should say "http://www.google.com" in the status bar, or something along those lines. We can change this so when someone puts their mouse over it, it says this: "Go to Google.com, the search engine belonging to the company that will pwn Micro$oft!"

When you can do something, why not do it? Here's your code..

<a href="http://www.google.com" onMouseOver="window.status='Go to Google.com, the search engine belonging to the company that will pwn Micro$oft!'">www.google.com</a>

Try putting your mouse on that. Then take your mouse off the link and in most browsers you might notice that you have the slight problem that the message doesn't go away after you put your mouse on the link until you put it on a different link. To fix this minor, but slightly annoying problem, we add this:

onMouseOut="window.status=''"

Alternatively, you could do this:

onMouseOut="window.status='Done'"

But hey, it doesn't matter. You should end up with this:

<a href="http://www.google.com" onMouseOver="window.status='Go to Google.com, the search engine belonging to the company that will pwn Micro$oft!'" onMouseout="window.status='Done'">www.google.com</a>

And that's it. You can apply it to most things in HTML, <td>, <tr>, <body> and remember you can use onLoad and many other on* tags with window.status.

However, it's not always good if you keep masking the link status bars, as it's normally to the users and your advantage if they know where they're going instead of having status bar messages.

subscribe to newsletter