I have a multi-layered image in Photoshop that I would like to use on the web. The aim is to have a number of buttons to show/hide the various layers.
My initial thought was to export each layer as a transparent GIF PNG, stack the images using CSS and use Javascript to toggle the visibility of each layer.
Is there a better way to achieve this? I am particularly interested to hear of any software or Javascript libraries to simplify this process.
Many thanks.
Edit:
To clarify, the image in question is a map with various outlines and shaded areas to overlay, so I will only need basic control of layer opacity.
I would stack each layer into one large image. In your front-end code create a frame the size of the layer with your stacked image as the background.
Create the buttons and use jquery to trigger a background shift relative to the button that is pushed. It will appear the image is changing, but it is just shifting the background. This will save on consecutive image loads, making the UI appear quick and seamless.