W
wibni
Hi,
I'm trying to get a working example of the Yahoo! Imageloader.
I've done everything as explained here - http://developer.yahoo.com/yui/imageloader/
- but can not get it to work.
The aim is to have 2 separate images loading together at the same
time.
What it does though is just showing me my background images as defined
in the CSS code.
I need it to overwrite these settings with the images defined in the
javascript code.
Posted the same question here: http://www.tek-tips.com/viewthread.cfm?qid=1553312&page=1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/
build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/
build/imageloader/imageloader-min.js"></script>
<script>
var duoGroup = new YAHOO.util.ImageLoader.group('content_start',
'load', 5);
duoGroup.registerBgImage('content_start', 'http://www.hima.de/images/
rotation_startseite_links/01_safety_nonstop.gif');
duoGroup.registerBgImage('toolbox_pic', 'http://www.hima.de/images/
rotation_startseite_rechts/01_safety_nonstop_re.gif');
duoGroup.addTrigger('toolbox_pic', 'load');
duoGroup.name = 'group 2';
</script>
<style type="text/css">
<!--
#left {
background-image: url(http://www.hima.de/images/
01_safety_nonstop_2410.gif);
background-position: left top;
background-repeat: no-repeat;
float: left;
height: 196px;
width: 754px;
/*position: absolute;*/
}
#right {
background-image: url(http://www.hima.de/images/
01_safety_nonstop_re_2411.gif);
background-repeat: no-repeat;
height: 109px;
width: 215px;
margin: 0 0 0 754px;
/*position: absolute;*/
}
-->
</style>
</head>
<body>
<div id="left">
<div id="content_start"> </div>
</div>
<div id="right">
<div id="toolbox_pic"></div>
</div>
</body>
</html>
I'm trying to get a working example of the Yahoo! Imageloader.
I've done everything as explained here - http://developer.yahoo.com/yui/imageloader/
- but can not get it to work.
The aim is to have 2 separate images loading together at the same
time.
What it does though is just showing me my background images as defined
in the CSS code.
I need it to overwrite these settings with the images defined in the
javascript code.
Posted the same question here: http://www.tek-tips.com/viewthread.cfm?qid=1553312&page=1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/
build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/
build/imageloader/imageloader-min.js"></script>
<script>
var duoGroup = new YAHOO.util.ImageLoader.group('content_start',
'load', 5);
duoGroup.registerBgImage('content_start', 'http://www.hima.de/images/
rotation_startseite_links/01_safety_nonstop.gif');
duoGroup.registerBgImage('toolbox_pic', 'http://www.hima.de/images/
rotation_startseite_rechts/01_safety_nonstop_re.gif');
duoGroup.addTrigger('toolbox_pic', 'load');
duoGroup.name = 'group 2';
</script>
<style type="text/css">
<!--
#left {
background-image: url(http://www.hima.de/images/
01_safety_nonstop_2410.gif);
background-position: left top;
background-repeat: no-repeat;
float: left;
height: 196px;
width: 754px;
/*position: absolute;*/
}
#right {
background-image: url(http://www.hima.de/images/
01_safety_nonstop_re_2411.gif);
background-repeat: no-repeat;
height: 109px;
width: 215px;
margin: 0 0 0 754px;
/*position: absolute;*/
}
-->
</style>
</head>
<body>
<div id="left">
<div id="content_start"> </div>
</div>
<div id="right">
<div id="toolbox_pic"></div>
</div>
</body>
</html>