Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #24622

Re: Displaying a pop-up thumbail for a list element

Cross-posted to 2 groups.

Followups directed to: comp.infosystems.www.authoring.stylesheets

Show all headers | View raw

[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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Displaying a pop-up thumbail for a list element Dr J R Stockton <J.R.Stockton@physics.org> - 2014-06-06 01:48 -0700
  Re: Displaying a pop-up thumbail for a list element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-06 16:27 +0200
    Re: Displaying a pop-up thumbail for a list element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-06 18:31 +0200
  Re: Displaying a pop-up thumbail for a list element Dr J R Stockton <J.R.Stockton@physics.org> - 2014-06-06 13:52 -0700
    Re: Displaying a pop-up thumbail for a list element "Mel Smith" <syntel@cox.net> - 2014-06-06 15:26 -0600
      Re: Displaying a pop-up thumbail for a list element dr.s.lartius@gmail.com - 2014-06-06 14:43 -0700
        Re: Displaying a pop-up thumbail for a list element "Mel Smith" <syntel@cox.net> - 2014-06-06 17:08 -0600
    Re: Displaying a pop-up thumbail for a list element Andrew Poulos <ap_prog@hotmail.com> - 2014-06-07 12:53 +1000
      Re: Displaying a pop-up thumbail for a list element Dr J R Stockton <J.R.Stockton@physics.org> - 2014-06-07 05:02 -0700
        Re: Displaying a pop-up thumbail for a list element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-07 15:33 +0200
  Re: Displaying a pop-up thumbail for a list element Christoph Michael Becker <cmbecker69@arcor.de> - 2014-06-07 18:24 +0200
    Re: Displaying a pop-up thumbail for a list element Dr J R Stockton <J.R.Stockton@physics.org> - 2014-06-07 11:01 -0700
      Re: Displaying a pop-up thumbail for a list element Christoph Michael Becker <cmbecker69@arcor.de> - 2014-06-07 20:22 +0200
        Re: Displaying a pop-up thumbail for a list element Dr J R Stockton <J.R.Stockton@physics.org> - 2014-06-08 08:41 -0700
      Re: Displaying a pop-up thumbail for a list element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-07 21:20 +0200
        Re: Displaying a pop-up thumbail for a list element Dr J R Stockton <J.R.Stockton@physics.org> - 2014-06-08 08:45 -0700

csiph-web