Effect.Morph to enlarge images

32 views
Skip to first unread message

ph...@ryangibbons.net

unread,
Nov 3, 2009, 9:19:35 AM11/3/09
to Prototype & script.aculo.us
Hey all,

I was trying to come up with a simple way to enlarge images on mouse
over and set them back to their normal size on mouse out. I figured
why not try Effect.Morph with two sets of css for the images.

Implementation can be seen here:
http://rgvisuals.com/ie/ (Click on Stories link)

Problem I am running into is that it seems to be quite "jittery."

I know that this is doable in Flash but I am just not much of a Flash
fan. I am taking it by my simple exploration that Effect.Morph may
not be the most stable or correct ways of going about this.

Can anyone point me in the right direction?

Thanks,
Ryan

Richard Quadling

unread,
Nov 3, 2009, 9:45:32 AM11/3/09
to prototype-s...@googlegroups.com
2009/11/3 ph...@ryangibbons.net <ph...@ryangibbons.net>:
I think you have to know if you are scaling an image and if so, not
perform any other scaling on that image.

--
-----
Richard Quadling
"Standing on the shoulders of some very clever giants!"
EE : http://www.experts-exchange.com/M_248814.html
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
ZOPA : http://uk.zopa.com/member/RQuadling

ph...@ryangibbons.net

unread,
Nov 3, 2009, 12:55:13 PM11/3/09
to Prototype & script.aculo.us
Richard,

Thanks for the response. Question though, I am not quit sure what you
mean. I would like the image the enlarge upon mouse over and go back
original size on mouse out...hopefully as a smooth transition. I have
seen some very heavy JS scripts that do this but I was looking for a
lighter alternative using script.aculo.us

Thanks,
RG

On Nov 3, 9:45 am, Richard Quadling <rquadl...@googlemail.com> wrote:
> 2009/11/3 ph...@ryangibbons.net <ph...@ryangibbons.net>:
>
>
>
>
>
> > Hey all,
>
> > I was trying to come up with a simple way to enlarge images on mouse
> > over and set them back to their normal size on mouse out.  I figured
> > why not try Effect.Morph with two sets of css for the images.
>
> > Implementation can be seen here:
> >http://rgvisuals.com/ie/(Click on Stories link)

Matt Foster

unread,
Nov 5, 2009, 3:00:28 PM11/5/09
to Prototype & script.aculo.us
You could use a fisheye...

http://positionabsolute.net/blog/2007/08/prototype-fisheye.php



On Nov 3, 12:55 pm, "ph...@ryangibbons.net" <ph...@ryangibbons.net>
wrote:
> Richard,
>
> Thanks for the response.  Question though, I am not quit sure what you
> mean.  I would like the image  the enlarge upon mouse over and go back
> original size on mouse out...hopefully as a smooth transition.  I have
> seen some very heavy JS scripts that do this but I was looking for a
> lighter alternative using script.aculo.us
>
> Thanks,
> RG
>
> On Nov 3, 9:45 am, Richard Quadling <rquadl...@googlemail.com> wrote:
>
> > 2009/11/3 ph...@ryangibbons.net <ph...@ryangibbons.net>:
>
> > > Hey all,
>
> > > I was trying to come up with a simple way to enlarge images on mouse
> > > over and set them back to their normal size on mouse out.  I figured
> > > why not try Effect.Morph with two sets of css for the images.
>
> > > Implementation can be seen here:
> > >http://rgvisuals.com/ie/(Clickon Stories link)
Reply all
Reply to author
Forward
0 new messages