pen rainbow

Tuesday, December 4, 2012

Friday: The Photo Gallery_PEACE

Mouse over the photo below to see a before and after assignment from my Beyond Layers class. The original photo was taken by Kim Klassen.  The second photo "PEACE" is the same photo processed by me in Photoshop.  Pretty cool, huh?

Here's how I did it on a Mac.  I have it on good authority that this script will also run on a PC!  

How To Do Mouseovers in Blogger

1.  Start with 2 photos that are exactly the same size (around 500 px max is the size that worked with the blogger template that I am using).  I had to reduce the size of the photos in Photoshop from 1000w x 666h to 500w x 333h so that the pix wouldn't bleed into the sidebar gadgets.  An image with the largest pixel size of 700px is a good place to start, but you'll just have to experiment with what fits into your chosen template layout.  

2.  Upload them to an album in Picasa >I have an album called, "Beyond Layers_Mouseovers."

Picasa is Google's main image storage system, and all of your blogger pix get stored there automatically.  If you don't know how to get to your Picasa web albums, google search "Picasa" > click "Picasa Web Albums."  It should take you right to your Picasa pix.

If you don't know much about Picasa, have never used it, and just don't want to bother with Picasa, there's an alternate way of putting your pix into a google format that will work with this script:

Picasa Alternative

Open up a new post in blogger & upload your 2 (same-size) photos.  This is just for storing your pix and converting them to a format that is compatible with blogger.  You're not going to ever use this as a post, and you will delete it later.  This is simply a way to assign blogger compatible image addresses to your photos.  

3.  Copy the image addresses for each photo and paste them onto a stickie note.  If you don't know how to find the image address of a photo > ctrl + click on the photo > choose "copy image address."

If you don't see the icon for Stickies in your dock (3 little yellow Post-It notes), go to your Finder > Click Applications > Scroll down to find Stickies > double click to open

Don't worry if the image address looks like a link when you paste it onto your stickie note.  The whole HTML code is embedded in the link.  What you're actually seeing is a blogger link representing the complete code.  Just go ahead and click the link, then copy the entire HTML code from the url window.  That is what you will paste into the mouseover script.

4.  Open a new post in blogger_switch to HTML format (if you used the Picasa alternative, you will now have 2 blogger windows open)

5.  Paste this code into the content window:

<br />
<table align="center"><tbody>
<tr><td align="center"><img alt="" onmouseout="Javascript: this.setAttribute
('src',this.firstsrc);" onmouseover="Javascript: this.firstsrc=
this.getAttribute('src'); this.secondsrc=
''; this.setAttribute('src',this.secondsrc);" src="" />

6.  From your stickie note, copy the image address of the first photo that you want to start with.  Paste it between the double quotes at the bottom of the script, starting with "https...jpg".  In other words, replace the image address that I inserted into the script with the image address of your photo.

7.  Copy the image address of the second photo from your stickie note & paste it between the single quotes at the beginning of the script starting with 'https...jpg'.  Again, replace mine with yours.

8.  Post it!  (The mouseover script will not work in Preview_You have to post it to activate the script)

★  If you used the Picasa alternative, don't forget to delete your pix and close the window.

Delete the stickie by clicking in the upper left corner of the note.  I did not see any reason to save the stickie note because the images are stored in my Picasa library in case I ever need to go back and grab the image addresses.  Plus, you can always go back and take a look at the HTML in your blogger post to find the image addresses embedded in the mouseover script.

9.  If it doesn't work...

Fix #1:  check to make sure that you pasted in the correct image address.  Go back and grab the image addresses again and repaste them into the code.  

Fix #2:  Check the permissions on the pix.  Wherever you have them stored when you grabbed the image addresses (e.g. on Picasa, or wherever), you might have your perms set for private view only.  Make sure that they are set for public view/share.  

Okay, have fun!