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!