A friend asked whether it would be possible to have an image that can be dragged behind a mask, with a transparent navigation in the upper part of the page. The images are too large to fit on the page, so you need to be able to move it. Yes, they could be resized, but it’s a wanted effect.

Making things transparent in the top part is easy. A little extra treatment for Internet Explorer, and a transparent PNG will do. Making the image draggable was a single line of JavaScript with prototype/scriptaculous. Below is an example in an iframe (i know, i know, but it’s so easy this way). I have added a Fade/Appear for the navigation while the image is dragged, but it leaves the navigation hidden if the drag ends while the navigation is still fading. There certainly are ways around this, but this is enough for a proof of concept.

here is the whole thing out of the iframe

This entry was posted on Thursday, March 16th, 2006 at 5:21 am and is filed under CSS, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.