Sunday, 16 December 2007

TIP - Mouseover Fun

email me

A comment left on David McMahon's Blog by the blogger david of David's "Images of Nature" Photography Gallery fame, asked how the 'Mouse-over' effect was done on the "Invitation" graphic used on David McMahon's page.

It is a simple Javascript function that anybody can use, so here are some quick instructions on how to achieve it. And since david asked, I trolled across to his site and stole one of his graphics to best illustrate what I am about to do!

 


 

1. It isn't necessary to backup your template as you aren't going to touch that side of things!

 


 

2. Choose the image you want to display as the permanent image. Do all the image editing you need to display it at its best. One good idea is to give the image a border, one that you will use again in the second image (see below), so that the mouseover transition appears seamless. Try and make it a reasonable size for the display space of your page, but in any event Blogger will give you the best fit when you upload the image.

2a. Now select the image you want to use as the alternative (or mouseover image) and make sure you crop it to exactly the same size as the previous one. If you used a 'frame' of any description make sure that that frame is also used for the second image.

Here are the two images I intend to use, cropped, edited and framed:

 

 


 

3. I have decided that the picture of the Purple tulips is the one that will appear as the 'static' image and that the Pink tulip will appear as the alternative, or 'rollover', image.

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.

 

 

 

 


 

4. Here is the code for the two images you uploaded. Make a note of the bits I have highlighted. That is what you will eventally copy to your actual post, totally ignoring the rest of the Blogger code. You don't want the displayed image to be 'clickable', and for it to open up in a new window. That would sure spoil the effect you are trying to achieve!

 

 

 


 

5. All that remains to do is to add the Javascript to 'envelope' the two images, or add the pic URL's to the Javascript, depends on how you see it. And here it is:

 

<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>

 

Some things to draw to your attention:

  • You can actually copy/paste the code from the box and save it somewhere, preferably in the [ Settings | Formatting | Post Template ] area of your Admin page (see this previous 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.

 


 

So, did I manage to successfully tip-toe through david's tulips? Let's have a look:

 

 


 

Looks okay to me. I guess it's your turn now ...

back to the top

 

54 comments:

Chertiozhnik said...

Thank you for this, I'll give it a try. I really must advance my tech skills beyond 1980s 3GLs and putting italics into comments!

Fletch said...

Hi chertiozhnik,

No 'thanks' expected, or necessary. I do it for fun, and the warm fuzzy feeling when somebody else finds it useful.

I guess the choices seem to fall between 'Content' or 'Presentation', although I am of the opinion that the second complements the other, making it more appealing.

Enjoy whatever takes your fancy!

David said...

Thanks for this tip. Your blog is very interesting, as I like to play around with web programming and hacks myself. I'll have to drop round again later. Thanks for mentioning me in the post too!

See you later,

David Webb

Evan said...

Hi from San Francisco. Your webpage is great and very easy to follow. I have been looking all over the web for a post about mouse-over in Blogger and I found yours. It seems very easy enough but I am having trouble getting it to work. I have the code and JAVA script but I am not sure where I add the text to ? What HTML do I add to my post to enable the mouseover? and where do I add it? Do I add it to the template or just the new post I want to create?

Evan

Fletch said...

Evan,

I've emailed you.

If my 'advice' in the email works, come back and tell everybody the 'why', 'how' and the 'what' so that anybody following this thread who has similar problems can sort it out.

In the meantime, ENJOY!

Evan said...

Terry.

Thank you for not only answering my question quickly, but also corresponding with me over email in the wee hours of the night to help me figure this out.

I copied and edited your directions exactly as you described but was still getting errors. After you took the time to inspect my actual code I wrote, you figured out my error. I edited the HTML in Word which, what I know now, is public enemy number one. It added extra Paragraph marks into the text. When I cut and pasted it into blogger, it was infected. I edited out the extraneous marks and now, you can see - http://evanpilchik.blogspot.com/2008/02/test2.html - it works great.

Thank you again for your time, your patience and your excellent pictures and diagrams explaining the directions you sent.

Evan
San Francisco, CA

Fletch said...

Evan,

Thanks for reinforcing my advice about NOT using Word to edit HTML code. There's nothing like a real-life example for others to sit up and take note!

Enjoy your blogging, and don't hesitate to use the other bits from this site. It occurs to me that 'Thickbox' is probably an excellent vehicle to display your photography.

Indrani said...

Hi,
I am Indrani Ghose from Bangalore.
I am extremely happy to tell you that I followed your instructions and enveloped two pictures of mine.
I got your link from David McMohan.
Whenever you are free do drop in at my photoblog http://indisnapshots.blogspot.com/2008/03/blog-post.html

Fletch said...

Hi Indrani,

I stopped off at your site and was delighted to see how effectively you used the script to display the 'Lily'.

Congratulations, and I would recommend using the 'Thickbox' display for your photography. Your raw images are terrific, but they take an age to open. Users with DUN don't have the patience to hang around for a large picture to download to their computer.

Happy Blogging!

RAJI MUTHUKRISHNAN said...

I know you said 'No thanks expected' - but I have to say it. The mouseover effect is terrific. Indrani from Bangalore, who tried it out, guided me with mine. I will be flattered if you look at it at http://rajirules.blogspot.com/

And I am looking forward to reading the other tips from your blog

Fletch said...

Hi Raji,

I obediently trotted across to your site to take a look ('flattery' will get you everywhere), and I was pleasantly surprised.

The effect you've achieved is exactly how I envisaged the JavaScript should be used.

Congratulations!

Ina said...

Hi!

I googled how to put a mouse over in blogger, and found my way here.
Wonderful and easy instructions, but I just can not get the code to work. I don't know why my static image won't show. I only manage to get the mouse over image to show. I wonder if I've pasted the code wrong or if it's the pictures fault.
I haven't posted it on my blog yet since I can't get it to work.

Fletch said...

Hi Ina.

I hope you come back to read this comment because you haven't left any contact details.

I can only guess that there is a SMALL error somewhere in the code, so unless I can take a look at it I'm at a loss.

If you wish, please copy/paste the code you're trying to use into an email and send it to my email addy direct.

Waiting to hear from you.

Ina said...

Hi again!

I finally got it working!
The problem was that I pasted the "link location" instead of "image location" in the code in one of the pictures.

I discovered that the easiest way to copy the right code was to wiew the two images in "prewiew" mode where they both are shown, and then right click and choose "copy image location" and paste it in to the code.

http://inasinsikter.blogspot.com/2008/07/plastic-fantastic-featuring-terse.html

Jonette said...

Hi Fletch! I'll say this (along with the rest of the commenters) -- thank you for posting this! you've helped so many other bloggers out there inject a bit more interest (and silliness) to the world wibe web. Thanks to you, here's my bit of silly. :)

At first I was quite confused as to why I couldn't get the code to work. Another thank you goes to ina for the tip. :)

More power! ... and cookies! :D

Fletch said...

I took a look at your 'mutating-silly', Jonette, and had a deep chuckle. It was the whole idea for posting the mouseover idea - bit of fun for a blog pic!

It was also good to see that another blogger was able to help through commenting on things that went wrong for her.

Congrats!

vk said...

Thanks a lot fletch!

This was just the thing i was looking for. Twas the niftiest thing around!

You can check out my post

Fletch said...

Hey VK,

Glad you found the tip useful. I've visited the post you used it on, and it works just as I thought it should.

Have fun.

Mobile Video Clipz said...

hi fletch,

I found your mouseover effect code useful in my blog. Thank you for the technique that you shared to us.

By the way, How would you change the javascript code to accomodate 3,4,5 images/pictures in a blog. Wish you could enlighten me.

Fletch said...

Hi MVC,

Glad you found the 'mouseover' thingy useful.

Not sure what you mean by "3,4,5 images", but it can be acieved in JavaScript by defining the functionality, i.e. "onMouseOver=dosmething", "onMouseOut=dosomethingelse" ... etc. etc. etc.

However, if you're referring to many individual pics then Thickbox is what you should be looking at.

I have a tute somewhere on this site ...

Morgan said...

I tried this but it just would not work.

Fletch said...

Hi Morgan,

Sorry to hear it didn't work for you. Tried visiting your site, but it wasn't anywhere to be found.

Drop me a mail (fletch@netcabo,pt) and I'll take a look at the code you're putting in and see if I can spot something ...

Maithri said...

Congrats on a great blog...

I'm fascinated by this stuff. I'll add you to favourites.

Happy holidays,

Cheers, Maithri

Fletch said...

Hi Maithri,

Take whatever you find useful, and enjoy!

Daniel said...

How DO I Add A url to it so that when ppl click it it takes them to the link i want?

Fletch said...

Hey Daniel,

No Problemo!

Have a look at this screencap image and you'll see what needs to be inserted, and where.

My example takes the user to an image already displayed in the mouseover, but the link can take the user to ANY page you wish.

Be warned! If you don't tell people that that is your intention, they can get highly p****d off and may never come back to your site again!

Enjoy!

Webmaster said...

Hello - I found your site while researching mouseover in Blogger. What I want to do is allow the user to click on a part of my header and then either have a popup message or be shown a post (preferably the latter).

This same question was asked in a Blogger forum two years ago and the writer made reference to http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
which allows one to fiddle with the code and see the result. I was able to play with the code and get the result I wanted on w3school's test screen, but my problem (and that of the Blogger poster, who never got an answer) is that I don't have any idea where to put this code in the template.

Specifically - I have a blog that lists online novels available on the internet and, until recently, had a drawing of books in my header. I found that people were clicking on the books which, of course, did nothing. In the future, if someone, clicks on a drawing of a romance novel, I'd like this person to see the romance novel post, and so forth.

Maybe this is impossible, or way beyond my level of competence. Many thanks.
Susan Crealock

Fletch said...

Hi Susan.

I've emailed you direct to see if we can work this one out to your satisfaction.

If we can, a further comment here, offering the 'solution', would probably be helpful to others following this thread.

Sphairon said...

Thank you very much for posting these precise and accurate instructions. I'd still be in despair if it weren't for you!

Great job, keep up the good work, man. :)

Fletch said...

You are most welcome, Sphairon.

Take what you want, and enjoy!

Vincent Bucciachio said...

Awesome, you are so the man!

Fletch said...

Thanks Vincent.

Coming from you, that is indeed a compliment!

Station 85 said...

Thanks for the help with this. I was trying to do this the normal way, by putting the script in the header of my blog, but it was causing problems with the xml. I used your technique and it works perfectly. Thanks again!

Fletch said...

Thanks Station85,

I visited but couldn't see where you've used it.

Must have been hidden by all those handbags ...

Maarten Jalink said...
This comment has been removed by the author.
Fletch said...

Glad you enjoyed finding and using the trick, Maarten.

Two hours isn't that long 'trying' out different techniques ...

acornbrain said...

Fletch,

I am doing some research into getting a blog started. I will link you when I's up, but long story short, I want it to be a series of "before/after" pictures, and I really wanted the rollover effect. I have not had a chance to try out your trick yet, but it yours look great, and from your description, this should work exactly like I want it to.

My question is, what happens to your img links when you delete the draft post? are they still lurking in the blogger server somewhere, or will you get broken img icons?

-brian.

Fletch said...

Brian,

The short answer:

They stay in your 'Picasa' upload space for eternity - or until you exceed your disk space ...

Viktor said...

Thank u very much, i had been lookin 4 this all over the internet cause none of tha ways i had tried worked.

I wanted to do also a mouseover sound but now i achieved (thanks to u) to make the image work i think I´ll be able to do it with the sound too.

Really, thank u man

My blog: http://publig17.blogspot.com/

Fletch said...

You're welcome, Viktor.

Enjoy.

Chloe & Co. said...

Thank you so much for this tip! It worked like a charm. I can't wait to publish my post tomorrow that has this mouseover feature. THANKS!

Cynthia's Cottage Design said...

I found you after I was searching the internet trying to find an easy tutorial on how to do this, your's looks great because it showed me exactly what to do in blogger.

I tried the steps , but once I had seen where the picture code was and what to put it into ( the script you provided ) I became lost as to what to do then. Do I add the re-done code to my "edit html" box and hit save post? I did try that, but nothing was there. Do I keep any part of the original html from when I uploaded my 2 pics? I'm trying to do a post today with this feature and would appreciate any help! Thank you in advance!

Cynthia

Cynthia's Cottage Design said...

ps: If you need my email it's crsy0782@aim.com. Thanks!

Fletch said...

@Chloe

Visited your page and was impressed with how you used the mouseover effect.

Congrats!

Fletch said...

@Cynthia (update)

Exchanged emails with Cynthia and after a couple of false starts we got it cracked. She still hasn't published, but I tried out the pics on one of my test sites and the effect looks good.

A note to anybody else that wants to use this bit of JavaScript:

1. Please remember that JavaScript is very 'fussy' about how you insert the code.
2. Please remember NOT to use 'Word' as the editor for your code.

Enjoy!

Theo van Mourik said...

Hallo Terry,

Thanks for the mouse over post, but there is a little problem.
I loaded 2 images on my blog, 1 in BW and 1 in collor. The second collor image works, but i dont wont to see the first image, Can you help me?

Theo

Fletch said...

Theo,

e-mailed you direct.

Come back and tell the folks here what needed to be done when 'we' fix it ...

Tracy said...

Thank you! I love this technic and you showed me just what I needed!!

Fletch said...

I'm glad it worked for you, Tracy.

Amber said...

This is exactly what I was looking for, I think, but I can't get it to work. :( I really only know enough about blogger to post pics and stories for my family, so I'm sure I'm missing something. Can I copy the javascript and paste it directly into the "Edit Html" option of my post? I did that, and replaced the URLs with those of the pics I loaded in a different post draft, but all I see is the first picture - it doesn't change on mouseover. I know this is an old post of yours - are you still around to help? Thanks!

Amber said...

Ok, you can ignore my previous comment. I pasted the javascript into that box in my formatting menu, then changed the links, and it works great! I don't know what the difference was, but I'm happy it works. Thanks for the code!

Fletch said...

Congratulations on your persistence, Amber.

I can't get to your blog to see how you've used it (you haven't left a link), but I'm sure it is stunning.

Anonymous said...

Thank You So Much for this!! It worked the first time for me!

Anonymous said...

The Golden Path
Ha detto: Bel Blog
Qlxchange : Ha detto: interessante