Image link rollovers for dynamic (user-uploaded) graphics with Drupal and CSS

The goal: a CSS-only rollover graphic that can also be a link that is uploaded by users.

Eliminating other options:

This could be done with JavaScript, but we and the W3C and everyone's sanity would much prefer a pure CSS solution.

Can you have inline styles with pseudo classes (namely, :hover?)

No: http://www.frontpagewebmaster.com/m-351101/tm.htm

From http://www.christianmontoya.com/2006/02/01/pure-css-image-rollover/

a { display:block; height:50px; width:100px; overflow:hidden; }

a:hover { display:block; text-indent:-100px; }

drupal get image size
PHP get image size

http://us3.php.net/getimagesize

http://api.freestylesystems.co.uk/api/function/theme_imagecache/5

See below - update of this with code of final answer based on Christian Montoya's technique above (with warning about PNG in IE6).

Some bumps on the road to CSS-only rollovers

Sending style.css
Sending views-list-promo_badges_main.tpl.php

With junk test code-- doesn't work in ie6 (and the test code actually broke it in ie7)

a.promo-badge-hover {
  display:block;
  height: 120px;
  width: 480px;
  overflow:hidden;
  border: 1px solid black;
}

a.promo-badge-hover:hover {
  height: 120px;
  width: 480px;
  display:block;
  text-indent: -240px;
}

a.promo-badge-hover img {
  height: 120px;
  width: 480px;
  display: block;
  border: 2px solid red;
}

a { display:block; height:50px; width:100px; overflow:hidden; }

a:hover { display:block; text-indent:-100px; }

http://64.233.169.104/search?q=cache:nZqtXuHqFRkJ:www.christianmontoya.com/2006/02/01/pure-css-image-rollover/+r...

Resolution

This is more or less the final touches on the Agaric Design's sidebar promotional graphics uploaded by the user views and cck and nodequeue technique.

/* begin Agaric era */

a.promo-badge-hover {
  display:block;
  height: 120px;
  width: 240px;
  overflow:hidden;
/*  border: 1px solid blue; */
}

a.promo-badge-hover:hover {
  height: 120px;
  width: 240px;
  display:block;
  text-indent: -240px;
}