Zooming images on page load

Question

I would like to get the effect of a zooming image when someone opens a new page. So each page should have it's own image that zooms in every time the page is opened. I have an example in this website: http://www.fashionclub70.be/ (Click the "light version").

If a user clicks on a menuitem the corresponding page is opened and the image zooms in. on this website it is done with Flash, but I would like to use only Javascript for this. I don't really have a working knowledge of Flash. Do you have some pointers for me so I can successfully implement this?

Thanks

Maarten

Answer 1

You could use a canvas and put a picture on it. Evertything you would need for this can be found here: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/

Edit: If you want to use CSS3 you could use

#pix{width:200px;height:300px;transition: all 2s;}

#pic:hover{transform:scale(4) translate(100px,100px)}

This would make the div tagged with this id move to the right and become 4 times as large during a period of 2 seconds. The :hover part is just an event that would make the transition tick. Guess you want to use :active instead.

Answer 2

I guess the easiest solution would be to use something like this : http://sliderjs.org/ . Basically, you would put an empty place holder and load your image to some invisible div element. Then, kick off a transition effect with a callback bound to your image's onload event.