Window status bar message in JavaScript onMouseOver of a link

WE can use windows status bar to display messages by linking it with events. We will be using windows objects status property to display this message.

Status bar is at the bottom of your browser. If it is not visible then go to View menu of your browser and click the status bar option. One check or tick will appear before the status bar option and the bar at the bottom of your browser will be displayed.

We will use onMouseOver and onMouseOut events of a hyper link to display or manage the messages.

Here is the demo which is a hyper link pointing to home page of this site ( plus2net.com )

Visit Home page

Now let us see the code of the above demo.

<a href="../"  onMouseOver="window.status=''Welcome to Pluse2net.com Home page''; return true"  
onMouseOut="window.status=''Enjoy reading JavaScript tutorials ''; return true">Visit Home page</a>

As you can see in the above example we can display any message in our status bar while the mouse is over the hyper link. By default the status bar shows the URL of the link if no event is written. This way visitor comes to know about the address of the link when they place their mouse over it. Using the above code example we can change the displayed URL to a different location while the hyper link takes you to another location. For example the link below is telling you that your are going to google.com and the status bar is going to show you the google page URL, but once you click the link it will take you to plus2net.com home page. Here is the demo

Visit Google

See the code below and watch how the OnMouseOver event is written to display a different URL than the actual one.

<a href="https://www.plus2net.com"  onMouseOver="window.status=''https://www.google.com''; return true" 
onMouseOut="window.status='Enjoy reading JavaScript tutorials '; return true">Visit Google</a>

Enabling Status change in FireFox browser

If your FireFox browser is not showing the changes in the status bar then you have to change the settings.
Type about:config at address bar of FireFox
Search for dom.disable_window_status_change
It should be set to false, if it is true then click it to change ( toggle ) the value to False.
Window Object Bookmark a page Alert Window

Subscribe to our YouTube Channel here

Mark	01-03-2012
It does not work in my IE9 and Win7. The samples above show the real links in my status bar.

Managing Status bar message onMouseOver of a link

Enabling Status change in FireFox browser

Subscribe