Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Tech Tip: Clicking through a layer

jungle scene

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 !

aztech splash screen



This post first appeared on 7GenGames – 7 Generation Games, please read the originial post: here

Share the post

Tech Tip: Clicking through a layer

×

Subscribe to 7gengames – 7 Generation Games

Get updates delivered right to your inbox!

Thank you for your subscription

×