I’m trying to figure out the best way to make layered images appear on top of one another when a selection is chosen from a drop down options menu. I’m not sure whether this can be done with pure HTML/CSS or if I need to add Javascript? The goal is this:
I want to have a div which contains a background image. Beneath this will be a series of selection menus where you would choose one item from each menu and as each item is chosen it would overlay on top of the background image in the div.
For example:
Div shows a picture of a cartoon person
First menu gives the choices of skin color: fair, medium, or dark
User clicks medium and an image containing the medium skin color appears on top of the base person image.
Next menu gives a choice of hair color: blonde, brown, red, or black.
User clicks blonde and an image containing the blonde hair appears on top of the base and skin color images.
The images will all be static, exactly the same size, and will just need to be layered directly on top of one another in the same position on the page as each option is chosen. I have the images and menus all set up but am not sure of the best way to make them appear on top of each other in the same div as the options are selected.
Sorry if this is a dumb question..I am self taught, just figuring out things as I need them for my web site and am muddling my way through but there a lot of holes in my HTML/CSS knowledge! I can research how to do it if I know what I’m looking for but I’m not exactly sure what to call this! Thanks in advance.
