Window Status

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.


Related Articles

  • onMouseover? What's This?
    Well, its time to try out your first javascript. This one is nice because we dont have to deal with adding the script tag. This little script will write something of your choice to the browsers status bar when you move your mouse over a link. Lets look at the example:
  • Customizing the Status Bar Message
    Place this script in the section of your web page code to add a scrolling marquee to your status bar.
  • PopUp Window
    This code allows your links to pop-up in a new window. Just copy the code below: .
  • Status Bar Shoot
    If youre bored with static text on your status bar, try this tutorial to set it flying.
  • Statusbar Message
    This is a quick, and quite simple tutorial. Now its not html, it uses Javascript. What it does is lets you customize what it says in the status bar usually at the bottom left of your browser. Right now in your browser it should say Infinite Designs.org ..... Heres how to make it do that...
  • Opening a New Window
    To open a new window, you will need to use yet another ready-made JavaScript function. Here is what it looks like:
  • Scrolling Status Bar Text
    Displays a scrolling message in the status bar, in the bottom left hand side of your browser. It is easy to change the message to be displayed, and its scroll speed as well. A good easy to use script, but can become annoying if over used so be careful.
  • Using Buttons for JavaScripts
    To write scripts using buttons, we will first need to know how to place a button on the page. To do this, you will need to use the
    tags around the button tag. Here is an example of the HTML that will place a button on the page:
  • Last Modified, Loading Time, Preload your Images
    Last Modified, Preload your Images, Loading Time. In this tutorial you will find scripts for this topics.
  • When Does an Expired Domain Name Become Available?
    In order to know exactly when an expiring domain name will become available for re-registration by a new owner, you must understand the

Contact Web Design Outsource and get started today

Need Website Designing, Development, Redesigning, Maintenance and SEO services or help growing your company's web presence? Request a free Quote Now.