<Glazblog/>

The fullsize attribute...

So there is a proposal floating around for a fullsize attribute in HTML5... I am not in favor of it, because the effect the author of that proposal is trying to achieve MUST be controlled from A to Z by the web designer. So not only the animations, but also the closing button, the legend and its position, everything. I certainly don't want HTML and CSS to dive into that level of details. But wait, I said HTML and CSS? Hey, guys, look at the following. It took me exactly ten seconds to write it....

CSS chunk:

#full {
  display: none;
  position: relative;
}

#full:target {
  display: inline;
}

#full > img {
  position: absolute;
  z-index: 10000;
}

HTML chunk:

<a href="#full">
  <a id="full" href="#thumbnail">
    <img src="foo_full.jpg"/>
  </a>
  <img id="thumbnail" src="foo.jpg"/>
</a>

I know, I know, an anchor is not supposed to contain another anchor. Now, please, forget one second you're a web standards freak and look at my solution above. It just works...

Update: ROFL !!! I left a post on the fullsize attr's google group with a link to my post and the owner of the group has deleted my post ! Wow. That guy is apparently open to discussion, standardization and consensus....

Comments

1. On Tuesday 7 April 2009, 20:18 by Anonymous

It doesn't work in Firefox 3.0 or 3.5: unless the thumbnail image is moved before the inner <a> tag, Firefox doesn't recognize it as part of a clickable target. You can "fix" it by either adding text to the outer <a> or by moving the thumbnail image. Second, it totally breaks with back/forwards history: if you open the fullsize and then close it, and then try going Back in history, both images will display inline.

2. On Tuesday 7 April 2009, 21:03 by Mardeg

http://tinyurl.com/resizeimgnotwork...

3. On Wednesday 8 April 2009, 08:37 by lockoom

I bet it is achievable via css but your solution doesn't seem to work.