Script Help - Can you identify this?

[KrazyEnglishman]

Hi, i ran across this site - http://cutephp.com/

 

And liked the idea of being able to zoom into the screenshots and click them back again, love the animation.

can anyone tell me what script it uses? as i would love to implement it into my site.

 

thanks.

[AndyB]

If you view the source of that page, you'll see the 'zoom' is handled by javascript

[monk.e.boy]

http://mootools.net/

 

monk.e.boy

[rcorlew]

It is using a form of css and javascript.

 

Here is a sample of what it can look like and you can play around with it.

 

<div id="MENU"

 style="position:relative; width:480px; text-align:center;

 background-color:#c9cfcb; color:#333633; cursor:hand"

   onclick="document.getElementById('ITEMS').style.visibility='visible'"

   ondblclick="document.getElementById('ITEMS').style.visibility='hidden'">

     <b>Click Here For Picture Zoom</b>

</div>



<div id="ITEMS" 

style="position:absolute; visibility:hidden; width:480px; text-align:center;

background-color:#DEB887; color:#FFFFFF"

 onmouseover="this.style.visibility='visible'"

 onmouseout="this.style.visibility='hidden'">



 <div style="background-color:#f6ebd7; color:#333633;" mouseover="this.style.backgroundColor='#f6ebd7'">

This is the layer that would be visible on click. You would put a img src= here and make the layer the <div> the same size as the pic. You would also have to change cursor to whatever clever item you would like

 </div>

</div>

[KrazyEnglishman]

thank you, i'll have a mess around with it