....loading.... 19 x 36

Example 1: Basic fading show

The view from Volcano Maderas.

text Rulesets * Printable View * Help YSlow Help YSlow FAQ YSlow Blog YSlow Community Send Feedback YSlow Home * Grade * Components * Statistics * Tools splash image Grade your web pages with YSlow YSlow gives you: * Grade based on the performance of the page (you can define your own ruleset) * Summary of the page components * Chart with statistics * Tools for analyzing performance, including Smush.it� and JSLint Autorun YSlow each time a web page is loaded Run Test �Learn more about YSlow and the Yahoo! Developer Network Copyright � 2009 Yahoo! Inc. All rights reserved. .slideshowCerts { display:block; position:relative; z-index:0; } .slideshowCerts-images { display:block; overflow:hidden; position:relative; } .slideshowCerts-images img { display:block; position:absolute; z-index:1; } .slideshowCerts-thumbnails { overflow:hidden; } .slideshowCerts-images { height:300px; width:400px; } .slideshowCerts-images-visible { opacity:1; } .slideshowCerts-images-prev { opacity:0; } .slideshowCerts-images-next { opacity:0; } .slideshowCerts-images img { float:left; left:0; top:0; } .slideshowCerts { height:300px; margin:0 auto; width:400px; } .slideshowCerts a img { border:0 none; } .slideshowCerts-captions { background:none repeat scroll 0 0 #000000; bottom:0; color:#FFFFFF; font:12px/22px Arial,sans-serif; left:0; overflow:hidden; position:absolute; text-indent:10px; width:100%; z-index:10000; } .slideshowCerts-captions-hidden { height:0; opacity:0; } .slideshowCerts-captions-visible { height:22px; opacity:0.7; } .slideshowCerts-controller { background:url("controller.png") no-repeat scroll 0 0 transparent; height:42px; left:50%; margin:-21px 0 0 -119px; overflow:hidden; position:absolute; top:50%; width:238px; z-index:10000; } .slideshowCerts-controller * { margin:0; padding:0; } .slideshowCerts-controller-hidden { opacity:0; } .slideshowCerts-controller-visible { opacity:1; } .slideshowCerts-controller a { cursor:pointer; display:block; height:18px; overflow:hidden; position:absolute; top:12px; } .slideshowCerts-controller a.active { background-position:0 18px; } .slideshowCerts-controller li { list-style:none outside none; } .slideshowCerts-controller li.first a { background-image:url("controller-first.gif"); left:33px; width:19px; } .slideshowCerts-controller li.last a { background-image:url("controller-last.gif"); left:186px; width:19px; } .slideshowCerts-controller li.next a { background-image:url("controller-next.gif"); left:145px; width:28px; } .slideshowCerts-controller li.pause a { background-image:url("controller-pause.gif"); left:109px; width:20px; } .slideshowCerts-controller li.play a { background-position:20px 0; } .slideshowCerts-controller li.play a.active { background-position:20px 18px; } .slideshowCerts-controller li.prev a { background-image:url("controller-prev.gif"); left:65px; width:28px; } .slideshowCerts-loader { height:28px; position:absolute; right:0; top:0; width:28px; z-index:10001; } .slideshowCerts-loader-hidden { opacity:0; } .slideshowCerts-loader-visible { opacity:1; } .slideshowCerts-thumbnails { bottom:-65px; height:65px; left:0; position:absolute; width:100%; } .slideshowCerts-thumbnails * { margin:0; padding:0; } .slideshowCerts-thumbnails ul { height:65px; left:0; position:absolute; top:0; width:10000px; } .slideshowCerts-thumbnails li { float:left; list-style:none outside none; margin:5px 5px 5px 0; position:relative; } .slideshowCerts-thumbnails a { display:block; float:left; padding:5px; position:relative; } .slideshowCerts-thumbnails a:hover { background-color:#FFFF99 !important; opacity:1 !important; } .slideshowCerts-thumbnails img { display:block; } .slideshowCerts-thumbnails-active { background-color:#99FFFF; opacity:1; } .slideshowCerts-thumbnails-inactive { background-color:#FFFFFF; opacity:0.5; }