Tuesday, 9 August 2011

how to do a mouseover effect...

* submission for Tara's Live Every Moment and Beth's You Capture *
* mouse over to see the before *

this week theme at Kim's Texture Tuesday is 'it's the little things' and here is my interpretation, a mother and daughter apple :) and the recipe: magic2 twice ('screen' 100 percent) and kknutmeg ('multiply' 70 percent). and I'm going to share with you how I learned to do the mouseover effect that give us the before and after photo. is pretty easy!

it's a simple javascript function that anybody can use, so here are some quick instructions on how to achieve it. choose the picture you want to display as the permanent image. do all the editing you wish and save for web. then select the original picture you want to use as the mouseover image, make sure you crop it to exactly the same size as the previous one and save for web as well. (if you used a 'frame' of any description make sure that that frame is also used for the original image). upload both images to your blog and get the url code that is returned. add the pictures url's to this javascript:



disclaimer: change the 'http original image jpg' and the 'http edited image jpg' by your own url codes. it is important 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. and that is it! have fun :)

27 comments:

Nadege, said...

I love your still life, where's Daddy apple!!!

Cedar said...

Great angle on the apples! Cute Mommy and Daughter!

Ana Eugenio said...

@Nadege, that is a good question. I guess he was taking the family photo ;)

Hi and thanks @Cedar :)

kimB said...

Great take on the challenge - love the difference between the before & after images :) Thnak for sharing the B&A technique and java script!

Ana Eugenio said...

welcome Kim :) love your photo and quote! simple and divine :)

Kia said...

Awww, what a cute "Mommy and Daughter" shot! So creative, Ana! :)
Great tutorial too. Brava! :D
Have a lovely day!

Ana Eugenio said...

thank you dear Kia :) I'm very proud of myself, lol!

em said...

Love the texture! Thanks for that little tutorial...I was wondering how people did that, now I might have to give that a try!

Ana Eugenio said...

Hi dear Em :) is easier than I thought. took me about one hour searching online but it was so worth it! I love to have the before and after all in one, looks so cool. he he he :)

Teresa said...

Love this , beautiful work

Pat said...

I knew the minute I saw your thumbnail I would love this piece! Well done!

Ana Eugenio said...

welcome @Teresa :) your photo of the swallowtail butterfly is so beautiful!

awww... @Pat, thanks! amazing job what you did with your buttons jars :)

Barb said...

Hi Ana Eugenio! Thanks for stopping by my blog and for your lovely comment! (I'm not sure how to convince yourself that you have no limits - I just thought it might somehow inspire me . . . :)

I love your mom and daughter apple and the texture and the tutorial! Is the mom the little wizened apple?

Kathleen said...

Such a clever interpretation of the theme! I love your work -- and thanks for the mouseover tutorial. I've been meaning to look it up myself for some time now, so I really appreciate your post.

Ana Eugenio said...

Hi @Barb :) I like the thought of having no limits but don't know how to get there too, he he. when I wrote it, the mother was the big apple but your question is pertinent. I guess they're both a little wizened and the mother could be a little old lady. always colourful :)

Hi @Kathleen :) your daughter was adorable! she must grown into a beautiful young lady. her doing theatre must be awesome! I'm glad the tutorial is helpful. love to share what I learn :)

Carola Bartz said...

What a beautiful transformation - and thank you for explaining the mouseover technique.

Ana Eugenio said...

thank you Carola :) I'm truly in love with your cow nose. love that shot! glad this tutorial can be useful :)

Dyche Designs said...

Beautiful image and use of texture.

Ana Eugenio said...

Hi Kathryn, welcome :) thank you. love your photo too. fragile and beautiful.

deb duty said...

Great tip! Thanks for explaining how to do the mouseover!

Ana Eugenio said...

you're welcome dear Deb :) I think it's such a cool thing! lol

Susan said...

How neat!! Love the texture.

We both had apples on our minds!

Ana Eugenio said...

welcome Susan :) your shots are amazing! the sprinkles of water make such a neat effect. my two apples look so insignificant after seeing your gorgeous Argentina's ones, lol.

Susan said...

Nicely done. I love what a different look the texture makes.

Ana Eugenio said...

:) thank you dear. I've pretty much fun with textures.

nat said...

Thanks so much for this code, Ana!! I seriously searched the net for WAY too long and couldn't get any one of them to work "right". I just used your code in today's post, so thanks again!!!

Ana Eugenio said...

:) I'm happy I could help. thanks for letting me know. xoxo