I almost quit on this early on, as I just can’t seem to draw a smooth line on my Wacom tablet to save my life. In fact, some of the lines on his coat were actually done with the pen tool. I just had to give in.

All said and done, I think I’m pretty happy with this, being my first real artwork since I did our Christmas Card.

Below is the first entry, Hellboy. Just pencil and my sketchpad, nothing fancy. Had to actually photograph it, as my scanner isn’t cooperating. Hope to get that rectified soon.

Since then, I’ve honed the script even more, and wanted to share some of the improvements.

As with the first tutorial, this method makes a couple assumptions. First, it assumes your navigation buttons are within a container div identified by a unique id (ie, “nav”). It also assumes that your images follow a consistent naming scheme, such as nav_homeON.gif and nav_homeOFF.gif.

This tutorial is written as a standalone tutorial, so some code may be the same, or similar, to the original post. So here we go.

First, make sure your navigation is contained within an identifiable container:

1
2
3
4

<div id="nav">
	<a><img></a>
	<a><img></a>
</div>

Then, in your javascript, make sure your jQuery code is surrounded by the usual:

1
2
3

$(document).ready(function() {
	// jquery code goes here
});

Now set up the mouseover event:

1
2

$("#nav a").mouseover(function(){
});

Next, set the source (src) of the image file. This is done by finding the child of the link that was moused over, in this case, an image.

imgsrc = $(this).children("img").attr("src");

My original script then checked to see if the moused-over button was already “on”:

matches = imgsrc.match(/_over/);

This isn’t necessary with the revised method. Now all you need to check for was whether a valid image src was actually found. If so, then replace the word ‘OFF’ in the filename with ‘ON’.

1
2
3
4
5
6
7

// Fail if no image found
if (typeof(imgsrc) != 'undefined') {
	// Replace OFF with ON
	imgsrcON = imgsrc.replace('OFF', 'ON');
	// Now change the src to the 'ON' value
	$(this).children("img").attr("src", imgsrcON);
}

This method is better than the previous one as it doesn’t use regex or have to check for previously selected links. Plus, it includes better error checking to eliminate those pesky “undefined” javascript errors.

Handling the mouseout is the same as before. All you need to do is reset the image source to the value that was initially set on the mouseover, checking for the existence of a valid image src as before:

1
2
3
4
5
6

$("#nav a").mouseout(function(){
	// trap for 'undefined' errors again
	if (typeof(imgsrc) != 'undefined') {
		$(this).children("img").attr("src", imgsrc);
	}
});

I’ve also implemented a better preloading mechanism. This goes above the rollover code:

1
2
3
4
5
6
7
8
9

// Loop over each image within the navigation container
$("#nav img").each(function() {
	// Set the original src
	rollsrc = $(this).attr("src");
	// Replace OFF with ON
	rollON = rollsrc.replace('OFF', 'ON');
	newImg = new Image(); // create new image object
	$(newImg).attr("src", rollON); // set new obj's src
});

Line 2 creates a loop to run the following function for every image within the #nav div. Line 4 sets the image’s file source, and line 3 replaces ‘OFF’ with ‘ON’. Note that this version of the rollover script doesn’t care whether your buttons are gif’s or jpg’s. And the last line creates a new image element with the ON state of the image.

You can see the script in action here.
Download the .js file here.

Thanks for checking out this tutorial. I’ve got some other things up my sleeve that I’ll be posting soon

So for now, here is an encoded Flash video, hosted on my Dreamhost account. Let’s hope it holds up. As soon as I can, I’ll swap this out for something hosted elsewhere (ie, not on my dime). Enjoy, and feel free to let me know if this has been helpful.

Code samples and PDF slides of this talk are available here.

Code samples and slides online here. Video (with slides) can be found here.

For accommodations, the university paid for a night’s stay at the Ohio University Inn. It’s pretty much Athens’ only “hotel”, but it was quite nice. Some last-minute slide rehearsal and tweaks, and it was up again at 6am to get ready for the big day.

The opening session dealt with how the linguistics department was doing English-language training for students all over the world using Adobe Connect. I’d frankly never really thought much about Connect, but their demo, while sort of clunky at times, really made me want to check it out.

Next, I decided to sit in on another session to kill time before my talk. This one was entitled “Get Into an AIR Application Using ActionScript 3″. I was hoping this would be more of an entry-level Adobe Air presentation, but it was incredibly complex, at least to me. Even though I’ve dabbled a bit in Air and even Actionscript, I only recognized fragments of what he was talking about. I think the guy is totally sharp and knows his stuff. I just feel he was talking at a WAY higher level than the typical Spring Break audience. Thankfully, I had an excuse to duck out early to get ready for my talk.

The room for my talk was somewhat of a mini-theater, in that it had two rows of seats with an aisle down the middle, a podium and screen at the far end. I think it probably seated maybe 75. As usual, I had a bit of trouble initially getting my Macbook set up the way I wanted with the projector, but not too bad.

To be honest, I didn’t feel super nervous. I was nervous, yes, but oddly not as much as I was to give the talk to my co-workers. I think it may be because I don’t really know the audience at a conference. So if I bomb, I never have to see those people again. If I blow it at work, I have to see those people every day

Actually, my nervousness jumped up to eleven when I looked up and sitting in the audience was none other than Eric Meyer himself. Holy crap. Hopefully this realization did not affect my performance much.

Overall I think the talk went well and I’m satisfied with my performance, especially this being my first talk at my first conference. The head count was somewhere around 58, which isn’t too shabby, given the overall attendance of the conference.

Once my session let out, we had lunch and attended Eric Meyer’s keynote “The Emerging Craftsman”. Overall, a pretty good talk. Never heard Eric speak before, but it’s clear he’s been doing it for a while.

Next, we attended the MooTools session. Figured it was always good to see what the non-jQuery world is up to. Unfortunately, the talk was pretty-high level, with little beginner-digestible information. And it was clear the presenter was super nervous, which didn’t help. It was still a good effort, and I’m sure a couple people got something out of it. Didn’t make me want to switch to MooTools, though.

The rest of the day, just kinda hung around waiting for the end-of-day session with Eric. Actually skipped the next-to-last session to go out foraging for coffee on the streets of Athens. Got totally drenched in the rain, but the iced latte was totally worth it.

Eric’s last session was a combination tutorial and Q&A session. He presented a table-based browser timeline that was actually executed in a really interesting, clever way. Hoping he makes it available on the web. I also finally learned what the hell microformats were, and how cool they could be for our clients.

Thankfully, I had a chance to speak with Eric a couple times. I knew I was setting myself up for a smackdown, but I had to know what he thought of my talk. He said he was only in it for maybe the middle third, but what he thought what he saw of it was pretty good. We also talked a bit about things like jQuery, CSS3 and microformats. Was really glad to get the chance to meet him, albeit briefly.

Would’ve liked to have hung around for the post-conference mixer, but had another engagement and it was starting to get nasty outside. My thoughts on the conference? Overall I think it went well. It wasn’t without flaws and room for improvement. Baker Center is a fabulous venue and I’d be happy to see it held there next year. The parking is kind of bad, though, which is partially because of some nearby construction. Hopefully that can be coordinated better next year.

I think if I had what could be considered an actual “complaint”, it would be ensuring the subject matter and level of complexity fit more within the average audience member. I can only speak to the two sessions I sat in on that were really not geared towards beginners at all. True, the conference should not be all-newbie, either. But there needs to be a better mix and some indication to the guest what they’re getting themselves into. I’d even suggest going so far as to “pre-screen” presenters’ outlines and/or slides, if for no other reason than to classify them by how advanced they are.

Didn’t get a chance to see me there? I’ve put the slides and code examples online, which you can find here. The university videotaped each session and they’ll have those available in podcast form, although I’m not sure of the timeline. Luckily I was fortunate enough to have a buddy make the trip to Athens to videotape it as well. This way, I have a copy I can edit myself and mix in my slide screens. I hope to have this online within the next few days.

Once the video is online, I’d appreciate any comments, questions or other feedback anyone might have. Spring Break 2009 is March 25th!

Update: Video is now online.

I’ll be giving a talk entitled “The Future Today: CSS3 and JavaScript”. It will introduce CSS3 and many of the new cool methods it will bring us. Unfortunately, we won’t be able to safely use many of its features until browsers become compliant (we’re talking years, people). So I’ll be showing how to achieve CSS3 features with today’s javascript libraries, specifically jQuery.

Also, this year’s keynote speaker will be none other than Eric Meyer, Mr. CSS himself. It’s going to be a little surreal giving a talk on CSS when the dude who literally wrote the book on it is in the building. So yeah, no pressure whatsoever.

So if you’ll be in southeast Ohio on June 3rd, it’ll totally be worth going to. And if not, I’ll be posting slides and video online.

I cannot even express how excited I am about this.

My First strip, originally uploaded by Thundermutt.

I’ve been considering starting up a new web-based comic, and thought I’d test the waters by doing some strips featuring my wife, myself and our pets. Exciting, no?.

This first one was pretty fun, and I definitely will keep doing some more. Once I get a better technique down and settle on a theme, I’ll start the “real” comic.