Friday, July 28, 2006

will try to figure this one out LATER when I have something they call TIME

Okay, let's see how it's done...

First, the HTML I used for my cheap trick -- you should be able to copy and paste this to your blog:

width="75"
height="100"
border="0"
src="http://nonaknits.typepad.com/image1.jpg"
onmouseover="this.src='http://nonaknits.typepad.com/image2.jpg' "
onmouseout="this.src='http://nonaknits.typepad.com/image1.jpg' " />

Want to give it a try? Here's how:

1. Write your blog entry. At the spot where you want to add your photo trick, simply type "Photo Trick Here".
2.

Decide what 2 photos you want to use, crop them to the same size, and upload them to your blog.
3.

Edit the HTML for your blog entry. In TypePad this is very easy to do, simply click the "Edit HTML" tab. Hopefully your blog authoring tool also has an easy way to edit your HTML.
4.

Find the "Photo Trick Here" text that you added in Step 1 and replace it with the HTML I've given you above -- good old copy and paste should do just fine.
5.

Tweak this copied HTML based on your photos. You'll need to change:

* width - replace my width, 75, with the width of your photos
*

height - replace my height, 100, with the height of your photos
*

src - replace my URL, http://nonaknits.typepad.com/image1.jpg, with the URL for your first photo. This is the photo you'll see when your entry is initially displayed.
*

onmouseover - replace my URL, http://nonaknits.typepad.com/image2.jpg, with the URL for your second photo. When your mouse moves over the image, the image will change to this photo. Important: be sure to keep the "this.src=' before the URL and ' " after the URL.
*

onmouseout - replace my URL, http://nonaknits.typepad.com/image1.jpg, with the URL for your original, first photo. When your mouse moves out of the image, the image will change back to this photo. Important: be sure to keep the "this.src=' before the URL and ' " after the URL.

That should do it! I look forward to seeing your photo tricks...

No comments: