Javascript's best kept secret: Objects...

Javascript, being an object-oriented scripting language, is very widely used on the 'net. Granted, most of its applications are simple image swapping, or text highlighting of some sort, but an often overlooked aspect of Javascript is its ability to create custom, or user-defined objects.

Let's take an example image swapping piece of HTML:

Code:

---

<a href="/index.html" onmouseover="image1.src='/images/image1-on.jpg';" onmouseout="image1.src='/images/image1-off.jpg';">
  [img]/images/image1-off.jpg[/img]
</a>

---

Now this is simply fantastic, however that's an awful lot of code to write in order to do a simple image swap, especially if you want to do something like that a few dozen times on a page.

The following is a documented script I wrote for myself recently that takes advantage of objects to do just the image swapping job I wanted, with a minimal of arguments passed to the function.

Code:

---

<script language="Javascript">
<!--

/* Image rotation Script -- by Chris Shepherd 2002-06-07 */

/* function to create image objects */
function FlipImage(Name, Base, Hover) {
    this.ImageName = Name;
    this.HoverImage = Hover;
    this.BaseImage = Base;
}

/* Swap Image function */

function swap(img) {
  if (document.images[img.ImageName].src.indexOf(img.HoverImage) > 0) {
      document.images[img.ImageName].src = img.BaseImage;
  } else {
      document.images[img.ImageName].src = img.HoverImage;
  }
}

/* Create image defs
    In format: Var = new FlipImage(Name, Base Image, Hover Image)
    Var is the object name you wish to use. This is the item you must call inside the swap function in the
        onMouseOut and onMouseOver methods in your anchor tag.
    Name is the value from the name="name" in your <img> tag. I recommend i<Var>.
    Base Image is the path to the image when it is not hovered over by the mouse.
    Hover Image is the path to the second image that appears when the image is hovered over by the mouse.

    Example Object definition:
        Main = new FlipImage("iMain","/images/Main.jpg","/images/Main-Highlight.jpg");

    Example HTML link:
        [img]/images/Main.jpg[/img]
                                                  ^-----------|-----------^                  ^
                                                Object Name -/                          Image Name

*/

/* Define your images here */
Main = new FlipImage("iMain", "images/Main.gif", "images/Main-ON.gif");
Email = new FlipImage("iEmail", "images/Email.gif", "images/Email-ON.gif");
//-->
</script>

---

As the comments describe, the link itself is built in the following fashion:

Code:

---

<a href="/index.html" onmouseOver="swap(Main);" onMouseOut="swap(Main);">
    [img]/images/Main.gif[/img]
</a>

<a href="/email.html" onmouseOver="swap(Email);" onMouseOut="swap(Email);">
    [img]/images/Email.gif[/img]
</a>

---

And voila, you have a much shorter way of swapping your images. It may not seem like much, after all, you've added all that javascript. But that additional javascript actually translates into saving you a lot of typing (especially considering you could plunk it into a .js file and call it with <script src="filename.js"></script>) in the long run.

Objects are often terribly overlooked for doing things in Javascript, which is really bad, because they are very very powerful under the right circumstances. Keep in mind the above is one very simplistic example. You can do a lot with objects.