April 2008 Archives

I just wasted an hour of my life figuring this out so I thought I'd share in case anyone else has the same problem. This happened to me using Adobe Dreamweaver CS3 but may be relevant to previous versions as well.

I was working on some CSS for a multi-tier dropdown menu when all of a sudden Dreamweaver just shut itself down. No warning. No error message. Just Poof! Gone. When I restarted, the splash screen came up and the program would start to load, get to the part where it said something about "Initializing Site Cache" and then just vanish. It turns out that I'd corrupted my cache file which rendered Dreamweaver inoperable.

By re-naming the folder I was working in, I got Dreamweaver to start loading again.  Since it could no longer find my site it didn't see the bad cache and the program would load.  When I tried to switch back to editing my site though, the problem would happen again, even after disabling and re-enabling the cache.  Something was causing my cache to go haywire.

I'd been debugging some IE6 issues (imagine that) and had been commenting and un-commenting various lines of my external stylesheet.  During one of these debug sessions I'd apparently left a rogue */ at the end of a CSS block.  Having the comment close marker but not the comment open marker was enough to send Dreamweaver into a frenzy.

So if you run into a similar issue with Dreamweaver crashing and burning, check the latest edits you made to your files.  If there's invalid markup it can apparently cause Dreamweaver's cache to explode and ruin your day.

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.