Blogger Tip: Mouseover

Run your mouse over the image.

I've had a few people ask about how to do the mouseover, so I thought I
would show you how to achieve it.

1. It's not necessary to back up your template as you aren't going to
touch any part of the template HTML.

2. You need to find two images you want to use and they MUST be the same
size in measurements. You also want to keep the kilobytes as low as possible
so it doesn't slow down when loading.

3. You need to upload them somewhere for storage, I uploaded mine to Picasa.
You will need the location of the images, meaning the URL information of both
images, so you need to make note of them and save.

4. Open a NEW post. You will not be publishing this one, and will eventually
delete it after first saving it as a draft.  It is only to help you upload your
images and get the code that is returned.

5. All that remains to do is add the javascript to"envelope" the two images,
or add the pictures URLs to the Javascript, depends on how you see it.
Here's the script.


<table align="center"><tr><td align="center">

<img onmouseover="Javascript: this.firstsrc=
this.getAttribute('src'); this.secondsrc=
gif'; this.setAttribute('src',this.
secondsrc);" onmouseout="Javascript: this.setAttribute
('src',this.firstsrc);" alt="" src='https://bp2.blogger
gPIt_Eq88zw/s400/tulip_purple_round_blu.gif' />   

(Post 2nd image URL first)
( Post 1st image URL second)

6. You can copy and paste the code into the post.
* The SECOND (rollover, mouseover, whatever) picture link is the first one to appear
in the script; the FIRST (static) picture link is included as the second link reference -
(hey, it's not me being difficult - it's the way the script works!).

*You must (duhhh, obviously!) change the pic URL links in the script to the ones returned by Blogger when you upload your own pics.

* It is IMPORTANT that you make sure that the quotation marks that surround the URL links are single ( ' ) and not double quotes ( " ), as this has a relevance on how the script is

NOTE: Do not copy and paste/edit in Microsoft "WORD" for it will add extra code.
I did mine in NOTEPAD.
I can honestly say, putting this one together was a chore and sucked all life out of me. I will rest now!


  1. If it is a chore for you - can't imagine the level of concentration and energy it would take for me to do it!

    Thanks for all the interesting resources you offer here.

  2. Bonnie:

    Actually what I was referring to, was putting the post together, and getting all the code and posting as text and not code.

    To do a mouseover is rather simple to achieve, a lot easier than posting how to.

  3. AnonymousJuly 10, 2010

    This comment has been removed by a blog administrator.

  4. is it just me or do you always looked a bit frighten in your photos?

    great tutorial!

  5. Lissa;
    It's you! LOL!

    Actually I hate having my picture taken, and normally I shy away from looking straight into the lens.

  6. It's cool, but does seem like a lot of work!!!

  7. I will have to try it..I love such things. Thanks so much for the time you give to teaching & sharing. Hugz

  8. Thank you for doing all that. It does sound rather complicated, but one day when I have nothing better to do (ha ha) I'll give it a try!

  9. How nice of you to do all the hard part for us. I like it when I can accomplish something the no brainer way. I'm bookmarking this so I can give it a try.

  10. Nice tutorial. You make everything seem so easy.

  11. I can't wait to try this - I'll be sure to link back when I do.

  12. Thanks for putting this together, I'm glad your head didn't explode from it, mine would have. Actually, mine almost did in trying to make it work for me. I didn't understand your post at first, so I looked around the internet, and tried it a few different ways to no avail. Came back to your tutorial, and success! I linked back to you on my first ever mouse over post
    thank you for all that you share with us

  13. Whoohoo! I got this to work and my readers love it. Thank you so very much for posting the tutorial. Here's a link to the post where I've used it:

  14. This comment has been removed by a blog administrator.

  15. That is so cool. Thank you for taking time to make such clear and complete directions. A lot of work on your part makes it easier for me do this awesome technique.

  16. thanks a lot for this post!
    I added 2 features to your solution:

    1. A link (check the gecko)
    2. relative width (for less hassle with the exact image width and when changing the blog layout).

    instructions and example:

  17. This is great. I've been wondering how to do this! I'll have to give it a try. Thanks for sharing.

  18. Hi Jerry, I just stumbled upon your site. Thank you very much for explaining mouseovers. Now to go try it :-)

  19. Thank you..... I was looking for info on how to do this. Thanks for saving me the work!

  20. I read and read and read :) Since I discovered your blog havent had time for sleep! So much to learn and you are a terrific teacher!

    Thank you very, very much!

    Christin from Sweden (again) :))


Thanks for stopping in and commenting.