Thanks to our wonderful Kickstarter backers, I am in the middle of adding an Easter egg to Aztech Games. It’s a simple “find the hidden objects” type of game where you have a minute to find everything.
Here is the problem:
I want the images to be layered. As you can see, the pineapple is underneath the layer with the leafy plants. Normally, if you click on the pineapple, even if you have a function on click, like this:
$("#pineapple").on("click",function () {
$("#youknowI").text("Pineapples originated in South America.");
$("#youknow").show();
$(".pineapple").remove();
});
Nothing happens, because even if part of the pineapple shows through, it is still UNDER the top layer with the leaves, that layer just happens to be transparent in parts.
You can solve your problem by adding one line to your CSS. Say your second forest layer with the leaves is has an ID of layer2, add this line.
#layer2 { pointer-events:none; }
Hurray! You can now click through the layer.
Check out Aztech and our other iPad apps in the app store !
