Image link rollovers for dynamic (user-uploaded) graphics with Drupal and CSS
Key words and phrases
rollover with dynamic graphics jquery rollover drupal User-uploaded images for rollover links "css rollovers without background" drupal add css from a theme Drupal user-uploaded graphics for rollover user-provided rollover graphics rollover link for Drupal uploaded image filesTags
Description
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.c...
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;
}