How to do the Mouse Over Technique

On my previous post I used a technique where one photo is visible, but by placing your mouse over that photo a different photo appears. Some people who commented wondered how it was done. Here are the instructions that told me how to do it. I did not write these instructions, though I did change a couple words to try to make it more clear, and I would happily give credit to whoever did but I just copied them and put them in a document so I would have them and did not keep track of where I got them. If any of you know who wrote them please let me know so I can give them credit. These instructions are for blogger or "blogspot" posts.

-----Tutorial begins here-----
Upload 2 images, edit in HTML mode and cut away everything except the file names/URL's from the first image reference (the smaller image with s320, s400 will give poor results). Use the s1600 size if possible. The image URL you want to keep looks something like this: http://4.bp.blogspot.com/_yYnydmbc6Ss/TAXh6xN1yzI/AAAAAAAAZwY/TsAC2pwqG-I/s1600/imagename.jpg

Paste the first image URL in both URL locations indicated below (IMAGE #1) and the second image URL in the center (IMAGE #2) spot. Insert YOUR blog URL at the beginning of the line of code and editing is complete. Image #1 is the image that is shown by default and image #2 is the mouseover image.

<a href="BLOG URL HERE"><img src="IMAGE #1 HERE" onmouseover="this.src='IMAGE #2 HERE'" onmouseout="this.src='IMAGE #1 HERE'" width="400"/></a>

With all pasting complete, it should look something like this:

<a href="yourblogname.blogspot.com"><img src="http://4.bp.blogspot.com/_yYnydmbc6Ss/TAXh6xN1yzI/AAAAAAAAZwY/TsAC2pwqG-I/s1600/firstimage.jpg" onmouseover="this.src='http://4.bp.blogspot.com/_yYnydmbc6Ss/TAXh6xN1yzI/AAAAAAAAZwY/TsAC2pwqG-I/s1600/secondimage.jpg'" onmouseout="this.src='http://4.bp.blogspot.com/_yYnydmbc6Ss/TAXh6xN1yzI/AAAAAAAAZwY/TsAC2pwqG-I/s1600/firstimage.jpg'" width="400" /></a>


Paste the above code with all the edits into your blog entry (edit in HTML mode), publish and you are done! Mouse over the image and you should have a nice surprise in store. The width tag at the end can be changed to suit your needs. For me 400 wide works well on a verticle shot and 500 wide works for a horizontal shot. If you don't keep the width tag your image will not correctly display, showing only about half its width.
-----End of tutorial-----
NOTE:  When I previewed this, it looks like there are spots where there are several spaces "like        this" between words when there should only be one.  If you see several spaces between words above ignore them and use only one space.

One thing you have to watch out for is all the quotation marks.  There are singles and doubles and sometimes they are next to each other so it looks like this '" and if you miss any then nothing works right.  This works as you can see by my post yesterday, so good luck and enjoy.

Don't be shy - leave a comment or email me.  I look forward to hearing from you!

Share