onMouseover? What's This?

onMouseover? What's This?Well, its time to try out your first javascript. This one is nice because we don't have to deal with adding the script tag. This little script will write something of your choice to the browser's status bar when you move your mouse over a link. Let's look at the example:

<A HREF="jmouse.htm" onMouseover="window.status='Hi there!'; return true">Place your mouse here!</A>

Okay, here's what is happening with the onMouseover command:

  1. onMouseover=" "
    This is the form of the onMouseover command. The browser expects another command or function inside the quote marks.

  2. window.status='Hi there!'
    This command instructs the browser to write to the status bar. You place what you want the browser to write inside the single quote marks.

  3. return true
    Returns the statement as true so the browser will display the text.

The reason for the single quote marks is because in this case, the window.status command is used inside the onMouseover command, which was already using double quotes. If we had used another set of double quotes, the browser would have gotten confused about what it should do because it would think the onMouseover command had ended when we began the window.status command:   onMouseover=""window.....

Well, one thing that could be bugging you is the fact that the "Hi There!" is now in your status bar and won't leave. There are two ways to fix this problem. One way is to use the onMouseout command, and another is to call a function that will erase the text after a specified amount of time. The second way requires using functions and the script tags, so for now I will show you the easiest way to do it: the onMouseout command. Here it is:

<A HREF="jmouse.htm" onMouseover="window.status='Hi there!'; return true"
onMouseout="window.status=' '; return true">Place your mouse here!</A>

Keep all of the code above on one line, the line breaks above for the ease of reading the code. This will make the text disappear from the status bar when you move your mouse off of the link.

We did the same thing as before, except inside the onMouseout command we used a space inside the window.status command rather than text. This script is pretty fun, and can be helpful for your visitors if you use your text to describe where a link will take them.

Well, now that you have this, let's see about using buttons and the "onClick" command to make some things happen. Let's go on to Using Buttons for JavaScripts.


Close    To Top
  • Prev Article-Web Design:
  • Next Article-Web Design:
  • Now: Tutorial for Web and Software Design > Web Design > JavaScript > Web Design Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction