Rollover Code for Inked and Colored Pages

Just in the past week alone I've had two inquiries about how I do the rollover on my preview posts for comics I color. Hopefully this post will explain. It does assume you are using Blogger. If you're not it won't help. It isn't too tough. Just takes a bit of time. This process may sound long but once you're used to it it's all assembly line easy. I do the follow for the entire post all at once in each step so I'm not going back and forth constantly.

In Blogger you'll post up the initial images, JPGs most likely, like normal. Making sure you're looking at the "Edit Html" tab when creating your new blog post, scroll to the <img> tags for each JPG you just added. Copy and paste the following code into the <img> tag. You'll notice my notes in the code. Replace those notes with the appropriate image URLs. For the "onmouseout" it'll be simply a matter of copy and pasting the original src URL in the <img> tag that already exists. Once that is replaced go to the next paragraph below.

onmouseover="this.src='THE-CODE-YOU-COPY-FROM-PICASA'"
onmouseout="this.src='THE-ORIGINAL-IMAGE-URL'"

You'll need to save out a JPG of the image that will become the rollover to the exact same size as the JPG you have already added to your new post. Then upload those JPGs independently using Picasa. Picasa, if you're not familiar with it, is Google's free image hosting site it uses in conjunction with Blogger. You're already using it! Login here with your Google account you use for Blogger:
http://picasaweb.google.com

You'll more than likely find a couple of folders full of images in Picasa you've already posted up on your blog and anything from Google+ if you're using that too. Use the upload button and follow the directions to upload the JPGs that will become your rollover images. Once they are uploaded browse the folder you uploaded them into and find the individual images.

When you are viewing an image full size you should see a column on the right with "Link to this Photo" in blue. Click on that and it'll open some new fields. Check both "Hide album link" and "Image only (no link)" then copy the code found in the "Embed image" field. That code is what you'll then paste into the "onmouseover" src in your Blogger post.

The last step is just a precaution. You'll notice in each <img> tag there is mention of "s144" or "s400" or "s640" or "s800" or whatever. That's Google's way of telling itself how big the version of your file you want to post. The number represents the max height in pixels. Now look at your code for the JPGs you initially added. If they say "s640" then make sure in the "onmouseover" and "onmouseout" code the "sVALUE" is the same.

That's it. You can view any of my posts with rollovers, most of them are tagged "inksANDcolor", to see my code and how it looks once completed. Hope that helps everyone!

NEW DESIGN!

Obviously, it's live! I know this site isn't as "designer" as the last (no white space?! oh no!) but it felt really bland to me. I needed something that worked for me better. You'll welcome the fact my face will no longer be on the site. It's going to be science fiction based from now on. This change also mirrors my transition from illustrator to comic artist. It doesn't mean I won't be doing illustrations but that my focus has shifted to where my heart really is. That's what's most important.

There is one bug on the blog (can you find it?) that I'll iron out when I get the time but the site is 100% go. The links from my site have been moved to the blog for easier updating and tracking. I'm also planning on making more use of the blog showing process and WIP.

Now I'm going to get back to that Star Wars series for HEROES. If anyone would like a print you'll find me at the SCAD table this year. I may also be hanging out from time to time to see how my students (Pat Bollin, Allen Spetnagel, Doug Dabbs, and Cara McGee) are doing at the Temple of Cartoon Mojo table in artist alley.

*insert '50s space sounds, beeps, and whines here*

Re-Branding Preview

Going full-geek with this one. May have to pull it back. We'll see once I have a completed site design. Here's a small preview.

Site Design and Business Card

While the code is more or less unchanged, I've updated the design of my website. Now you can see other places beyond my résumé I am finding to use my new letterhead. It's alot more of "me" than even I am really comfortable with but I think it works nicely. Minus the contact info, since I won't post that online, the business card looks like this :

The hand kinda bothers me. I may remove it and crop my head a different way. I've got time to play with it so no rush. This is a good draft. Once completed, most likely I'll just get these printed at Kinkos to start. I don't need that many so a small run is fine.

Testing

Here we are. Testing out Blogger on my website. The XML syntax is just different enough from HTML to cause me problems but I'm getting it.