Let's make a "mouse-over"!
Friday, April 10th 2009 @ 11:10 PM (not yet rated)
This is a great way to show before-and-afters, or to show a screen-shot of a software technique used to modify an image such as a tone curve or exposure changes. It's pretty easy too, so let's get at it.
First, I'd suggest uploading both images into a gallery (if they aren't already). Navigate to each image and click on it to make it a solo or full-size image, and copy the URL for it from your browser's navigation bar. Paste them into Wordpad or some other quickly accessible word-processor or text program.
Next, go on your page to where you want to place the images, and click. If you haven't written past that spot yet, hit your return two or three times and then up-arrow back to where you want to place your images. This way you can easily start writing past them when you've got them in place.
Now, click on the icon of a tree next to the camera. Up pops a dialog box with three tabs: General, Apearance, and Advanced.
In the general tab, paste in the URL of the image that is your "normal" or primary image in that spot. You can fill in the other lines if you wish, but they do not seem necessary.
Click the "Appearance" tab, and set your text-wrap choices, noting the example box on the upper right of that tab. Your text can wrap around the image, and if both images are not the same size or proportion, the text will automatically re-format for each image, just like it does for these two. Slick!
(You had noticed this is an example image, or more properly, PAIR of images, right? 
Then set the width of your primary image and to keep it's proportions intact, I'd recommend leaving the height blank and clicking "Constrain Proportions".
The "Vertical" and "Horizontal" space boxes set the respective blank spaces around the image ... and note, they will apear on both appropriate sides. If you set say, 5 pixels in horizontal space, your image will slide over 5 pixels and there will be a 5 pixel space on the text side also. I like about the "5" setting.
"Border" sets a dark border around all four sides of the image. I used a setting of 3 on my image on my webpage.
Now to the "Advanced" tab. Click in the "Alternative Image" box, and in the "for mouse-over" area paste the URL for the second image, the one that appears when the cursor hovers over the image. If you stop right here, once the image is moused-over, the second image would stay as "the" image. You probably want people to be able to go back and forth, or as some would insist it be phrased, forth and back. So paste in the URL of the primary image in the "for mouse-out" box.
(You could even paste in the URL for a third image that would "stick" once they've passed the cursor over the image once. Would you want to? Hmmmm.)
Click "Insert" on the bottom left of the dialog box, and you are done!
This can be use for many educational purposes or simply for fun. Have at it!
