geekery monday...

Hi there! I've got a little tutorial for you today but first...





the images above are of my camera strap modeling round with this new device (since my model now lives elsewhere, I had to regroup). It's surprisingly easy to use although getting the entire subject into your shot may take a bit of practice. :) The remote clicker is in my left hand.

Now for that tutorial. Roll your mouse over the image below...




Cool, huh? It's really quite easy to create a rollover effect. You can use black & white to color as shown above or two completely different images for your rollover!

Here's what you'll do:

1 - First, upload your two images to an FTP web server such as Photobucket.com

2 - Whether you're going to insert this rollover into a blog post like this or into your sidebar, click on the "HTML" tab to edit. Copy the code below and paste where you want the rollover to go.

<a href="#" ><img src=" URL_IMG-1 " onmouseover="this.src=' URL_IMG-2 '"
onmouseout="this.src=" URL_IMG-1 '" /></a>

3 - If you are going to link your images to a webpage, enter the URL of that linked page in place of the red # sign. Of you don't want to link, just leave as it is.

4 - The URL of the original image will go where you see URL_IMG-1 in purple. Add it to both places.

5 - The URL of the rollover (changed) image will go in place of the blue URL_IMG-2.

Here's what my finished code looks like for the image above:

<a href="https://www.etsy.com/listing/167794978/eco-leather-camera-strap-applique?ref=shop_home_active"><img onmouseout="this.src='http://i745.photobucket.com/albums/xx91/loriplyler/IMG_2958-2bampw_zps98eccf11.jpg'" onmouseover="this.src=' http://i745.photobucket.com/albums/xx91/loriplyler/IMG_2958-2_zps5ea81821.jpg'" src="http://i745.photobucket.com/albums/xx91/loriplyler/IMG_2958-2bampw_zps98eccf11.jpg" /></a>

6 - Click to preview your image and it you're happy, click save.

That's it! Take a bow and admire your handy work.