I am trying to build a configurator which will allow me to change different elements (colors) of an object (like a car). In order to do this cleanly and properly, I’d need to use images with transparency, like a PNG/GIF file.
Is it possible to use tranparent files for this purpose?
Will I be able to overlap images? For example, if I want the wheels a different color than the body, the images will need to overlap even though they’re rectangle shaped essentially (which is why I’d need to use transparency).
Yes, you can use transparent images for this (24-bit PNG would probably be the best, for various reasons), and yes, you will be able to overlap images.
(Something to keep in mind is that IE6 doesn’t support alpha transparency. There are workarounds, but you’ll have to mess with it to get something you like.)
What do you mean by “is it possible to do this using all CSS”? You can use PNGs as background-images, and you can position elements using CSS, but I don’t know how you’ll avoid using JavaScript if the user is supposed to be able to interact with and change the car’s appearance.
That demo is OLD school CSS slight of hand, still pretty neat tho.
You “could” make this effect work creating a list with ALL possible permutation… but it would require a puzzle mind. As i said earlier, this is CSS slight of hand, there is really THE SAME element being hovered that contains all the images you see in the demo. so mixing and matching cannot actually be done dynamically ( this is what imean that you would have to create sets of linked lists with every combination possible. I doesn’t really sound practical)