« What's Going On | Main | Under Control »

July 19, 2005

HTML Fun

Dear nona,

Sometimes, when I'm tired of reading all those words, I come over to your blog and play with your photos.  Are you willing to part with one of your photo trick recipes?

Sincerely,
HTMLless in Hermosa Beach

Dear HTMLless,

I do love to throw in a few cheap photo tricks now and then -- nona's a simple gal with simple pleasures.  My favorite "recipe" is the changing photo.  When you move your mouse over the photo it changes to a second photo and then changes back to the original photo when you move your mouse out of the photo.  Here's an example from an old post, "nona's been busted":

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:

<IMG
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 <IMG ... /> 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...

July 19, 2005 in Ask nona | Permalink

Comments

(rubs hands together, starts thinking of images to play with)

Thanks!

Posted by: Kathy | Jul 20, 2005 12:02:06 AM

Without MM_swapImgRestore() and all that usual javascript fuss ?!? Hats up, Nona !

Posted by: Knitchy | Jul 20, 2005 12:57:03 AM

That's really cool. Must try....

Posted by: Colleen | Jul 20, 2005 4:11:50 AM

Gee, nona, great knitting lessons and ideas, and now neat blogging lessons, too! Where will you go next? :) I finally switched from the very limited AOL journal format to Blogger, and have been eager to learn to do more with photos -- thanks much!!!

Posted by: Bernadette | Jul 20, 2005 4:53:26 AM

Oh I am so doing this. Watch for it later today...or tomorrow's post....unveiling orangina!

Posted by: Carolyn | Jul 20, 2005 6:08:50 AM

THanks Nona! As if I didn't spend enough time blogging... hehe

Posted by: Liz | Jul 20, 2005 6:36:35 AM

Thank you nona!

Posted by: Agnes | Jul 20, 2005 8:41:12 AM

That's cool! Thanks for the great blogging photo trick! I just have to magic up some extra time to play with it!
Thanks also for your archive of great knitting tips.
Last night I was trying to figure out how to knit my Isis Wrap in a yarn that knits up at a very different row & stitch gauge to the pattern. I can figure the stitch gauge OK (I think), but the row increases on the sleeves were really confusing me. Google "row gauge" and there is nona advising me how to do it! There was some tricky math(s) to work on, and it was getting way too late. I hope that I managed to work it out!

Posted by: Kira | Jul 20, 2005 9:59:03 AM

Thanks for posting this! I can't wait to try it out. Mmmmk, fun photo tricks.

Posted by: Purly Whites | Jul 20, 2005 10:01:19 AM

Thanks so much, Nona. I just stumbled over your blog and love it. I can't wait to try this to see if I, miss html loser herself, can get it to work.
Thanks again!
www(dot)thegivingflower(dot)de(dot)vu

Posted by: Kimberly | Jul 20, 2005 10:39:53 AM

Thanks for sharing this cool techy tip!

Posted by: erin | Jul 20, 2005 6:44:07 PM

Nona - that's extra generous of you! I can't wait to try it. Thanks!

Posted by: jillian neary | Jul 23, 2005 9:31:03 AM

How cool! I just tried this, and it worked great!
Thanks!

Posted by: Ruth | Jul 24, 2005 5:46:42 PM

I am totally going to have to do this!!!!! Thanks for the info!

Posted by: beth | Aug 2, 2005 6:36:08 AM

I tried it and it worked like a charm...after a few tries, but I think I've got it down now. Such fun.
http://knittingiris.typepad.com/knitting_iris/2005/08/summertime.html

Posted by: Siri | Aug 18, 2005 9:09:28 AM

i tried to follow your instructions, but certainly goofed somewhere because it did not work. so, i viewed your "source" and copied that html into mine. tah-dah! it worked!!!

Posted by: gray la gran | Aug 23, 2005 8:18:31 AM

Thank you for the time and generosity in sharing this. Even this late in the game for you, this is a new treat for me.

Posted by: jpknits | Mar 21, 2006 4:11:50 PM

wow, thanks!

Posted by: Strikkelise | Jun 2, 2006 2:28:26 AM

This is a fantastic trick, I am new to html but I am sure in the future I will be able to find a use for this.
Thanks
--Shawn

Posted by: Shawn Kraus | Feb 13, 2008 7:20:10 AM

The comments to this entry are closed.

All patterns, designs, content, and photographs Copyright 2004-2010 nonaKnits and Carolyn Quill Steele. All rights reserved. If you have any copyright questions or request, please ask -- nonaKnits at gmail dot com.