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=
'http://bp0.blogger.com/_fV9I2C_dAUY/R2Wrh1GGLRI/  
AAAAAAAAASM/pn8sq1dh8vc/s400/tulip_pink_round_blu.
gif'; this.setAttribute('src',this.
secondsrc);" onmouseout="Javascript: this.setAttribute
('src',this.firstsrc);" alt="" src='http://bp2.blogger
.com/_fV9I2C_dAUY/R2WrhVGGLQI/AAAAAAAAASE/    
gPIt_Eq88zw/s400/tulip_purple_round_blu.gif' />   
</td></tr></table>

...........................................................
(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
executed.


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!


20 comments:

Bonnie said...

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.

Jerry Jones said...

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.

CraftCrave said...

Just a quick note to let you know that a link to this post will be placed on CraftCrave today [10 Jul 12:00pm GMT]. Thanks, Maria

lissa said...

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

great tutorial!

Jerry Jones said...

Lissa;
It's you! LOL!

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

Caroline said...

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

Deja said...

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

Sylvia Cook Photography said...

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!

Ann said...

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.

Kayshine said...

Nice tutorial. You make everything seem so easy.

the7msn said...

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

Maureen @ Cottage 960 said...

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

the7msn said...

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:
http://www.the7msnranch.com/2010/07/touch-it-up-tuesday-episode-3.html

simplyred said...

Thanks so much for posting this. I've wanted to know how to do this for some time. I really appreciate the effort you put into writing this tutorial.

Ernie
Gypsy Gold Studio

je pense que said...

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.

blog author said...

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:
http://oberkanteunterlippe.blogspot.com/2010/08/rollover-images-with-links-in-blogger.html

LNicole said...

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

Felix said...

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

Rose Petal Hollow said...

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

Anonymous said...

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

Thank you very, very much!

Christin from Sweden (again) :))

Donation