This isn't up on any server at the moment, so sadly I don't have anything to show anyone right now. Anyhow, just for fun for some friends and some kids, I've been tinkering with a single page layout involving a segmented map. Basically it uses bookmarks (<a href="#example">) in the page to scroll from on div to another, and little N S E W pointers to indicate travel. Additionally I can put little pixelart characters in place that have little a:hover over speech bubbles. Anyhow, that part works fine, it's the next part I am wanting aide in, but the tricky part is that javascript is not allowed in this design, and nothing scripted on the server side, so it all has to be css/html driven. Nothing embedded like flash either. Basically I am wanting to be able to turn on/off several item's visibility individually based on whether other bookmark links have been followed. For example, someone clicks a picture of a tree, and from that point on the tree will be a stump, even if they travel to a different area of the map and travel back to that zone. I've already considered linking them to a new total world map with the change, but every event results in another whole map being created and the page size grows near exponentially, so I'd rather not do that. My next thought was to see it the visited and active attributes would work, but they don't seem to see bookmarks as separate pages. The following code test did NOT work:
Both the on and off classes were always visible, and the now class never became visible. Ideally, the on class would only become visible after the bookmark was followed, the off class would vanish after the bookmark was followed, and the now class would only be visible while the bookmark was current. I knew it was a shot in the dark when I tried it, and I'm not surprised it didn't work. Does anyone here have any alternate ideas of how I might accomplish the desired results, keeping in mind it can't be scripted and it all has to stay on one web page?
EDIT:
I can do some of it, in some browsers anyhow, but the code above was bad. In my effort to shorten the code, I neglected that the order in which it was declared matters. This following code worked in firefox, and I will test it in other browsers:
If both Firefox and IE support it, I will consider it a success. I'd like to get opera and safari to work too, but they are less common, so maybe it won't matter since not many people will see the game anyhow.
Code:
<style>
.on, .off:visited, .now
{
visibility: hidden;
display: none;
}
.off:visited, .on, .now:active
{
visibility: visible;
display: block;
}
</style>
<a href="#turnon">Turn on/off now</a><br><br>
<a href="#turnon" class="on">class is on</a><br>
<a href="#turnon" class="off">class is off</a><br>
<a href="#turnon" class="now">class is now</a>
EDIT:
I can do some of it, in some browsers anyhow, but the code above was bad. In my effort to shorten the code, I neglected that the order in which it was declared matters. This following code worked in firefox, and I will test it in other browsers:
Code:
<style>
a.off
{
visibility: visible;
display: block;
}
a.off:visited, a.on
{
visibility: hidden;
display: none;
}
a.on:visited
{
visibility: visible;
display: block;
}
</style>
<a href="#toggle">Turn on/off now</a><br><br>
<a href="#toggle" class="on">class on</a><br>
<a href="#toggle" class="off">class off</a>