Path: csiph.com!newsfeed.hal-mli.net!feeder3.hal-mli.net!weretis.net!feeder4.news.weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.infosystems.www.authoring.stylesheets,comp.lang.javascript
Subject: Re: Displaying a pop-up thumbail for a list element
Followup-To: comp.infosystems.www.authoring.stylesheets
Date: Fri, 06 Jun 2014 18:31:27 +0200
Organization: PointedEars Software (PES)
Lines: 55
Message-ID: <1571393.ZFMPoLArO6@PointedEars.de>
References: <f9b546ee-5875-4411-b83e-292726b5b3f8@googlegroups.com> <2885526.4atoRGsWlH@PointedEars.de>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
X-Trace: solani.org 1402072290 6206 eJwFwYERAEEEA8CWGJGcdvD6L+F3M+gcgUnk5SF8QqoSZnopoLSavC5rmIXcGVW+fInvBwSnD/s= (6 Jun 2014 16:31:30 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Fri, 6 Jun 2014 16:31:30 +0000 (UTC)
User-Agent: KNode/4.12.4
X-User-ID: eJwNy8EBwEAEBMCWONkV5eDov4Rk/gOjsv0h+GCxrcFXlX6y1A/dLDE7My1eaYwqrEzcS/7tROc1USBtBfwAR28VMg==
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg==
X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px|[=M@7=Ik[_w<%n1Up"LPQNu2m8|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v
Cancel-Lock: sha1:nvZf4LrhiunwB9TeINJ8nKZnVEI=
X-NNTP-Posting-Host: eJwFwQkBwDAIA0BLsPDKGbTxL6F3jtDYtPAwpzN3h6llSLkr0n9NKU6u935kaTdO31EKiPMAHiIRQA==
Xref: csiph.com comp.infosystems.www.authoring.stylesheets:5296 comp.lang.javascript:24622

[X-Post & F'up2 comp.infosystems.www.authoring.stylesheets]

Thomas 'PointedEars' Lahn wrote in comp.lang.javascript:

> […]
> This code is untested, but the scripted stylesheet approach works in 
> Chromium 34 (I have tested it with a paragraph and an image in the CSS
> 2.1 Specification there).  It should also work everywhere else.
> 
> An advantage of only showing and hiding the “img” element with scripting
> is that this solution can be made more accessible if the “img” element is
> generated always, and only hidden/shown with scripting (by constructor and
> on event).  In that case the pre-existing “img” element could be accessed
> by a name or ID whose prefix or suffix corresponds with that of the ID of
> the event target.

Actually, given a recent enough layout engine, there is the possibility of 
not requiring client-side scripting here at all.  You can have transitions 
(and animations), too.

HTML¹:

  <div class="thumbnail-container">
    <div class="trigger">…</div>
    <img src="…" alt="…" class="thumbnail">
  </div>

CSS:

  .thumbnail-container {
    position: relative;
  }

  .trigger + img {
    position: absolute;
    top: 0;
    opacity: 0;
    transition-duration: 0.5s;
    z-index: -1;
  }

  .trigger:hover + img,
  .trigger:focus + img
  {
    opacity: 1;
    z-index: auto;
  }

________
¹  use semantic markup instead of “div” elements where possible
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.