^{Welcome to HTML Week here on the Layar blog where we’ll be taking a look at some of the great ways you can bring print alive with HTML widgets in the Layar Creator. We’ll provide a closer look at how each example was built, and provide you with some resources to add similar techniques to your own projects. Each example we feature can be found in the completely refreshed and updated LAYARED Magazine! Get yours today and see how interactive print is creating more engaging reader experiences!}

Next up for HTML Week we share a really great way to get readers interacting with your print products: maps! Whether you’re providing travel information about far off locales or just trying to help people find your local business, a map does the trick best, and a little interactivity can go a long way!

The interactive map that we added to the “Lonely Planet’s Travel Guides Just Got Better” article on page 12 of LAYARED Magazine is a perfect example of using interactive print to provide extra detailed information to readers.

Just scan the page and up pops a map with different locations throughout the world highlighted. The cities are from Lonely Planet’s annual list of top destinations. Tap one of the icons and photos and links for more information slide out of the bottom of the map. Each city features a YouTube video, links to airline and hotel services, additional country information and a link to download the Lonely Planet app.

Like the Superhero Puzzle from yesterday’s post, this example uses jQuery to produce the animation, namely the “.animate” function. Here’s how we did it.

The points on the map were placed “by hand” with CSS on their corresponding positions on the map. It’s a little time consuming to get right, but easy in the end. The smooth drop effect for the info pane was made using only simple jQuery code. After the map fades in, the info pane fades in behind it, remaining out of view.

When a user taps on one of the map points, three things happen. First the map point becomes white, which is accomplished simply by switching the image with an alternate white version. Second, the pane is dropped by using the jQuery “.animate” code function to increase the top margin. And lastly, all of the elements in the info pane, corresponding to the country map point that was clicked on, are loaded into the pane. When a user taps “View More,” the preliminary content fades out and the new slideshow content fades in.

The slideshow is also very easy to build using a trick with the “overflow:hidden” option for HTML “<div>” tags. Essentially, we created a smaller window ”<div>” through which a larger ”<div>” with the content passes through. That’s just how we did it, but there are lots of ways to create slideshows with basic HTML. Check out this resource for tips.

Attention travelers and adventure seekers!

As of today, the massively popular Lonely Planet travel guides will be able to help you with your travels even more! Just open the Layar app on your smartphone, hold it over the cover of one of the guides and you’ll be able to see tons of practical and up-to-date information to help you on your way.

The print guides now feature live weather, updated event listings and even hotel prices and availability. What other print guide can provide that? But that’s not all. Editorial and Product Development Director Matt Swaine says exclusive content awaits those who view the guides with Layar.

“We’re offering travelers access to hundreds of additional points of interest reviews, video content that they can only get through Lonely Planet’s Layar service and easy ways to book hotels and activities,” says Swaine.

So far, Lonely Planet has enhanced 42 guides from its European city titles. Paris, Rome, London, and (of course) Amsterdam are just a few of the popular tourist destinations with augmented guides.

For Swaine, the opportunity to add digital content to the printed Lonely Planet guides opened up new channels of communication and interaction with customers.

“We very quickly saw the potential for Layar to enhance our books by giving travelers access to content we couldn’t put in the books and by linking to other Lonely Planet services, products and online content,” he says. “There are lots of opportunities out there to chase with print, but clearly digital is going to play an increasing role in people’s lives, and this is where we are focusing the larger part of our product thinking.”

Lonely Planet is looking for your feedback! The first 50 people to email online.editor@lonelyplanet.com will receive a free copy of a Lonely Planet European City Guide, Pocket City Guide or Discover City Guide of their choice. To qualify you must own an Apple iOS or Android device, provide a valid shipping address and agree to provide feedback on the using Layar in conjunction with Lonely Planet books. Use “Layar Trial” as your subject line, and let them know which European city guidebook you’d like them to send you.

Check out the guides today and view them with Layar!