I've had time lately to do a lot more reading and Jeremy Keith's DOM Scripting book is another one that belongs on your shelf if you're trying to learn any amount of JavaScript.  I've hated and avoided JavaScript for years, mostly because I started my career during the browser wars and quickly grew tired of having to write different code for different browsers.  Thankfully, those days are now mostly over and this book has made me love JavaScript again.

The Document Object Model (DOM) is a standard for conceptualizing and representing the contents of an HTML or XML type document.  Mr. Keith's book teaches how to use JavaScript to manipulate the DOM so that you can dynamically add or remove content from a page, change the way things look, or move things around.  Similar to how CSS allows you to control the presentation of your content, DOM scripting allows you to control behaviors and events.

There are lots of great JavaScript frameworks available like jQuery, Script.aculo.us, or Dojo which allow you to easily enhance your websites.  In order to fully take advantage of them though, you need to have a fundamental understanding of how things like the DOM and JavaScript event handling work.  That's where this book really excels.  It's written primarily for web standards developers fluent in XHTML/CSS who're looking to branch into more client-side scripting.

This book is full of useful lessons and real world examples on how to make JavaScript and the DOM work in your applications. It also places a heavy focus on fundamentals and best practices such as graceful degradation which will help you make sure that your sites still function well even without the fancy JavaScript enhancements.  JavaScript has long been thought to make things inaccessible but it doesn't have to be.  This book stresses how to use these technologies in an efficient, unobtrusive way.

What I liked most about this book was the voice in which it was written.  I've read dozens of boring hard-to-follow tech manuals over the years but this book felt more like a friend standing over your shoulder and walking you through the process.  That does somewhat limit the amount of information the book can cover and it definitely doesn't go very far into advanced techniques.  If you've been doing standards development and basic JavaScript for a while though, and you really want to get started on increasing your scripting skills, this book makes an excellent primer.  For me it turned my impression of JavaScript from an overly-complex annoyance to an easy-to-use yet incredibly powerful tool for improving my websites.

Permalink | Posted On May 9, 2008 Comments (0) | TrackBacks (0)

There are about a million different scripts out there for doing JavaScript rollover images. Most of them however, aren't very good. They often require multiple functions... one to preload the images, one to swap them on rollover, and another to swap them back. Worse still, they usually involve inserting JavaScript event handlers into your HTML code.

Just look at the HTML code inserted by Adobe Dreamweaver's rollover function:

This code is obtrusive and difficult to manage. Wouldn't it be great if you could just do something simple, like adding a CSS class, to make the rollovers work automatically? By using some scripting with the Document Object Model you can do that quite easily.

Here's a great rollover script written by Daniel Nolan that will allow us to greatly simplify our code. Take a look the HTML code needed to do the rollovers using this method.

This is definitely much cleaner and easier. All we need to do is add the class="imgover" to our img tag and the script does the rest. When the page loads, the JavaScript looks through all of the img tags on the page. For each img tag it finds with the "imgover" class, it will dynamically add the onmouseover and onmouseout events to replace the images. It automatically looks for an image of the same name with "_o" at the end for the rollover. So if your main image were named myimage.jpg, you'd name the rollover image myimage_o.jpg.

That's all there is to it. Quick, easy, standards-compliant rollover images.

Download the rollover.js file.

Permalink | Posted On April 12, 2008 Comments (0) | TrackBacks (0)