mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-17 06:53:15 +00:00
249 lines
20 KiB
HTML
249 lines
20 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>YUI Library Examples: ImageLoader Utility: Using ImageLoader with CSS Class Names</title>
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
|
|
|
|
<style>
|
|
/*Supplemental CSS for the YUI distribution*/
|
|
#custom-doc { width: 95%; min-width: 950px; }
|
|
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
|
|
<!--Script and CSS includes for YUI dependencies on this page-->
|
|
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/skins/sam/logger.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
|
<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
|
|
<script type="text/javascript" src="../../build/event/event-min.js"></script>
|
|
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
|
|
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
|
|
<script type="text/javascript" src="../../build/imageloader/imageloader-debug.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
|
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
|
|
|
<!--there is no custom header content for this example-->
|
|
|
|
|
|
<script type="text/javascript">
|
|
//enable passthrough of errors from YUI Event:
|
|
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
|
|
YAHOO.util.Event.throwErrors = true;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body id="yahoo-com" class="yui-skin-sam">
|
|
<div id="custom-doc" class="yui-t2">
|
|
<div id="hd">
|
|
<div id="ygunav">
|
|
<p><em><a href="http://developer.yahoo.com/yui/">YUI Library Home</a></em></p>
|
|
<form action="http://search.yahoo.com/search" id="sitesearchform">
|
|
<input name="vs" type="hidden" value="developer.yahoo.com">
|
|
<input name="vs" type="hidden" value="yuiblog.com">
|
|
<div id="sitesearch">
|
|
<label for="searchinput">Site Search (YDN & YUIBlog): </label>
|
|
<input type="text" id="searchinput" name="p">
|
|
<input type="submit" value="Search" id="searchsubmit" class="ygbt">
|
|
</div>
|
|
</form> </div>
|
|
<div id="ygma"><a href="../../"><img src="../../assets/yui.gif" border="0" height="38"></a></div>
|
|
<div id="pagetitle"><h1>YUI Library Examples: ImageLoader Utility: Using ImageLoader with CSS Class Names</h1></div>
|
|
</div>
|
|
<div id="bd">
|
|
|
|
<div id="yui-main">
|
|
<div class="yui-b">
|
|
<div class="yui-ge">
|
|
<div class="yui-u first example">
|
|
|
|
|
|
<div class="promo">
|
|
<h1>ImageLoader Utility: Using ImageLoader with CSS Class Names</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>The <a href="http://developer.yahoo.com/yui/imageloader/">ImageLoader Utility</a> allows you an alternate method of using CSS class names to load images.</p>
|
|
|
|
<p>Hover over each image to show its triggers and limit. Try tripping the triggers to see the load reactions. Refresh the page to reset the images.</p>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="example-container module ">
|
|
<div class="hd exampleHd">
|
|
<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="imgloadclass_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->
|
|
</div> <div id="example-canvas" class="bd">
|
|
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<style>
|
|
|
|
.everything { position:relative; height:420px; }
|
|
.everything div { border:1px solid #888; }
|
|
.topmain { position:absolute; top:10px; left:120px; height:75px; width:100px; }
|
|
.duo1 { position:absolute; top:130px; left:20px; height:67px; width:100px; }
|
|
.duo2 { position:absolute; top:130px; left:220px; height:53px; width:100px; }
|
|
.scroll { position:absolute; top:320px; left:120px; height:72px; width:100px; }
|
|
|
|
.yui-imgload-maingroup,
|
|
.yui-imgload-duogroup,
|
|
.yui-imgload-scrollgroup
|
|
{ background:none !important; }
|
|
|
|
</style>
|
|
|
|
|
|
<div class='everything' id='everything'>
|
|
<div class='topmain yui-imgload-maingroup' id='topmain' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg");' title='group 1; mouseover image; 2 sec limit'></div>
|
|
<div class='duo1 yui-imgload-duogroup' id='duo1' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg");' title='group 2; mouseover left image, or click on right image; 4 sec limit'></div>
|
|
<div class='duo2 yui-imgload-duogroup' id='duo2' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg");' title='group 2; mouseover left image, or click on right image; 4 sec limit'></div>
|
|
<div class='scroll' title='group 3; scroll; no time limit'>
|
|
<img id='scrollImg' class='yui-imgload-scrollgroup' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg");' src='http://l.yimg.com/a/i/us/tr/b/1px_trans.gif' width='100' height='72' />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
var mainGroup = new YAHOO.util.ImageLoader.group('topmain', 'mouseover', 2);
|
|
mainGroup.className = 'yui-imgload-maingroup';
|
|
mainGroup.name = 'group 1';
|
|
|
|
var duoGroup = new YAHOO.util.ImageLoader.group('duo1', 'mouseover', 4);
|
|
duoGroup.className = 'yui-imgload-duogroup';
|
|
duoGroup.addTrigger('duo2', 'click');
|
|
duoGroup.name = 'group 2';
|
|
|
|
var scrollGroup = new YAHOO.util.ImageLoader.group(window, 'scroll');
|
|
scrollGroup.className = 'yui-imgload-scrollgroup';
|
|
scrollGroup.name = 'group 3';
|
|
|
|
</script>
|
|
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class='first'>Using CSS Class Names to Load Images</h2>
|
|
|
|
<p>Look familiar? These are the same images and triggers as the Basic Features example (with the weather image omitted). The only difference is the manner in which we're loading the images on the back end.</p>
|
|
|
|
<p>Insead of registering specific image ids/URLs with a group, you can simply tag the group with a CSS class. The group will later use this class name to identify which DOM elements belong to the group. Each group should have one corresponding class. Each class must have a <code>background:none</code> CSS definition at the top of the page, as in this example:</p>
|
|
|
|
<textarea name='code' class='HTML' cols='60' rows='1'>
|
|
.yui-imgload-maingroup,
|
|
.yui-imgload-duogroup,
|
|
.yui-imgload-scrollgroup
|
|
{ background:none !important; }
|
|
</textarea>
|
|
|
|
<p>Here is the HTML for the images:</p>
|
|
|
|
<textarea name='code' class='HTML' cols='60' rows='1'>
|
|
<div class='topmain yui-imgload-maingroup' id='topmain' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg");'></div>
|
|
<div class='duo1 yui-imgload-duogroup' id='duo1' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg");'></div>
|
|
<div class='duo2 yui-imgload-duogroup' id='duo2' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg");'></div>
|
|
<div class='scroll'>
|
|
<img id='scrollImg' class='yui-imgload-scrollgroup' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg");' src='http://l.yimg.com/a/i/us/tr/b/1px_trans.gif' width='100' height='72' />
|
|
</div>
|
|
</textarea>
|
|
|
|
<p>A few things to note. First, the images have class names matching those in the style definitions above.</p>
|
|
|
|
<p>Second, the image URL is set in the <code>background-image</code> of the elements. The <code>background:none</code> defined earlier in the CSS will be removed by the ImageLoader Utility JavaScript when the images are eventually loaded.</p>
|
|
|
|
<p>Third, since the <code><img></code> element displays its images through the <code>background-image</code>, its size won't change when the image is loaded. Therefore the <code>width</code>/<code>height</code> needs to be set in the HTML. And since that gives the image a substantial size, the browsers would show a missing-image icon if the <code>src</code> attribute were not specified. Therefore we need to set one; a transparent one so that the background image will show through.</p>
|
|
|
|
<p>This brings up an important limitation with this approach: you cannot alter the natural size of the image. Because the image is displayed as a background image, the browser will not resize the image according to the <code>width</code>/<code>height</code> of the <code><img></code> element.</p>
|
|
|
|
<p>Now let's turn to the JavaScript. Since the image URLs are already specified in the HTML, we don't need them in the JS. All each group needs to know is the CSS class name that will identify the images.</p>
|
|
|
|
<textarea name='code' class='JScript' cols='60' rows='1'>
|
|
var mainGroup = new YAHOO.util.ImageLoader.group('topmain', 'mouseover', 2);
|
|
mainGroup.className = 'yui-imgload-maingroup';
|
|
|
|
var duoGroup = new YAHOO.util.ImageLoader.group('duo1', 'mouseover', 4);
|
|
duoGroup.className = 'yui-imgload-duogroup';
|
|
duoGroup.addTrigger('duo2', 'click');
|
|
|
|
var scrollGroup = new YAHOO.util.ImageLoader.group(window, 'scroll');
|
|
scrollGroup.className = 'yui-imgload-scrollgroup';
|
|
</textarea>
|
|
|
|
<p>Note that you are free to combine this class-name approach with the other. The same group can have some images identified by class name and others by registering ids/URLs.</p>
|
|
|
|
<h2>Configuration for This Example</h2>
|
|
|
|
<p>You can load the necessary JavaScript and CSS for this example from Yahoo's servers. <a href="http://developer.yahoo.com/yui/articles/hosting/?imageloader&MIN#configure">Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured</a>.</p>
|
|
|
|
</div>
|
|
<div class="yui-u">
|
|
<div id="loggerModule" class="yui-skin-sam">
|
|
<h3 class="firstContent">YUI Logger Output:</h3>
|
|
<div id="loggerDiv"></div>
|
|
</div>
|
|
|
|
|
|
<div id="examples">
|
|
<h3>ImageLoader Utility Examples:</h3>
|
|
|
|
<div id="exampleToc">
|
|
<ul>
|
|
<li><a href='../imageloader/imgloadbasics.html'>Basic Features of the ImageLoader Utility</a></li><li><a href='../imageloader/imgloadfold.html'>Loading Images Below the Fold</a></li><li class='selected'><a href='../imageloader/imgloadclass.html'>Using ImageLoader with CSS Class Names</a></li><li><a href='../imageloader/imgloadtabs.html'>ImageLoader with TabView</a></li> </ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="module">
|
|
<h3>More ImageLoader Utility Resources:</h3>
|
|
<ul>
|
|
<li><a href="http://developer.yahoo.com/yui/imageloader/">User's Guide</a> (external)</li>
|
|
<li><a href="../../docs/module_imageloader.html">API Documentation</a></li>
|
|
|
|
|
|
<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/imageloader.pdf">Cheat Sheet PDF</a> (external)</li></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="yui-b" id="tocWrapper">
|
|
<!-- TABLE OF CONTENTS -->
|
|
<div id="toc">
|
|
|
|
<ul>
|
|
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="YUILibrary.com hosts the YUI community forums" href="http://yuilibrary.com/forum/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library source can be checked out from GitHub" href="http://github.com/yui/">YUI on GitHub</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Carousel Control - Functional Examples" href="../../examples/carousel/index.html">Carousel</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag & Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag & Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper</a></li><li class="selected "><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Paginator - Functional Examples" href="../../examples/paginator/index.html">Paginator</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer</a></li><li class="item"><a title="The YUI ProgressBar Control - Functional Examples" href="../../examples/progressbar/index.html">ProgressBar</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI Storage Utility - Functional Examples" href="../../examples/storage/index.html">Storage</a></li><li class="item"><a title="The YUI SWF Utility - Functional Examples" href="../../examples/swf/index.html">SWF</a></li><li class="item"><a title="The YUI SWFStore Utility - Functional Examples" href="../../examples/swfstore/index.html">SWFStore</a></li><li class="item"><a title="The YUI Stylesheet Utility - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
|
|
</div>
|
|
</div>
|
|
</div><!--closes bd-->
|
|
|
|
<div id="ft">
|
|
<p class="first">Copyright © 2010 Yahoo! Inc. All rights reserved.</p>
|
|
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
|
|
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
|
|
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
|
|
<a href="http://careers.yahoo.com/">Job Openings</a></p>
|
|
</div>
|
|
</div>
|
|
<script src="../../assets/syntax.js"></script>
|
|
<script src="../../assets/dpSyntaxHighlighter.js"></script>
|
|
<script language="javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
<script src='../../assets/YUIexamples.js'></script>
|
|
|
|
|
|
</body>
|
|
</html>
|