Since this is going to be image-mapped, you can just use the Compass to get to other pages for now.

I think for here I want it to be the HTML5 responsive image-mapping with JavaScript. I do want there to be a vertical version and a wide-screen version, though. I know phones can turn to become wide, but I'd rather not force someone to have to do that if they don't want to, and just have a version available for them that's vertical favored. So, I'm thinking I can finesse my treehouse page to have 2 angles and at the very top there will be a memo stating "Mobile-friendly version" if they are on desktop (as it will default to wide if the viewport is wide) and it will say Wide-screen version if they are on a vertical/narrow screen. If they desire to check the other one out they can and it should work, if they have the ability to turn their screen to become wide. And of course mobile will work on desktop fine. So the wide angle will have its own image mapping set up and will be it's own version that is triggered either by default based on device width or it will be triggered by the person clicking the link to it. And there will be the Vertical/mobile-friendly version that functions the same way, but since it is so different, the entire image angle and composition will differ.

What exactly the image content is will be the treehouse that my character/self lives in here. It will show within this image clickable areas that are these items: Journal, Ephemera Album, Cassette Player, and the Guestbook. How they are all represented will probably be what they sound like, although ephemera album could be both a storage chest and a book-like item. There may be some items included in this image map that are links but are not listed in the main navigation system, as they may be either secret discoveries or simply too specific/niche to warrant being in the main nav. Or, they may very well be in the main nav, but may just be an extra pathway to a different page from a different area in the site, like being able to get to devlog from here by clicking an illustrated computer item. Being able to go to vlogs by clicking a camcorder. Etc. Depends on how detailed I want to make the picture from the get go. But just make sure it includes at least this page's subpages.

This is the treehouse! I can't wait to get my journal page going. It also houses the ephemera album, the cassette player, and the guestbook as subpages of this page. This page is the main page so it is going to showcase some treehouse/nature art of the area in the world side of the website and also contain some extra little story elements about the characters who live in treehouses (technically including me!).

At the bottom of the page, there should be an illustration of the area from a bird's eye view or even map view (depending on the style you go with) and a little message near it that says "If you're looking to snoop through the neighborhoods... you have to come this way." And "the neighborhoods" will be a link but it may or may not be obvious that it's a link (one of those secret passages). For example, instead of it acting like a link when "the neighborhoods" is hovered over or "this way" if you want to create 2 clickable areas, it may cause a cursor effect when the cursor comes into contact with those words, hinting that they are clickable in an untraditional way.

Like, sparkles or butterflies may fall from the cursor, but only when they happen to be hovering over those words (it won't change into the typical pointer finger). If clicked, these two disguised clickable areas will take them to the same page: The Neighborhoods, where they can look around 2 or 3 neighborhoods in the making, although at first, it will probably just be 1 neighborhood haha. Each neighborhood will have its own page and may lead to more pages, although only if necesary for the story.