I have searched through various sources on this subject, but none seem to directly address my specific requirements. My main objective is to replicate the Nike ID Flash-based customization using html5, css3, and javascript.
My initial thought was to cut an image into irregularly-shaped slices. Then, I planned to use image editing software like Photoshop to create different colored versions of each slice. Finally, I intended to arrange the slices in a way that would reconstruct the original image, similar to a jigsaw puzzle.
However, I encountered a problem at this stage. The irregular shape of each slice would result in transparent areas, some of which would overlap with active areas of other slices below them. This interfered with mouse hover and click actions. While there are methods available to make JavaScript ignore transparent areas, I haven't found a solution where these areas truly remain transparent, allowing interaction with the underlying image.
My question is whether there is a way to keep transparent areas completely transparent? Or am I approaching this issue incorrectly?
Any advice or suggestions would be greatly appreciated. Thank you.