Schau mal bei http://www.cross-browser.com vorbei.
Mit folgendem Code kannst du jede Box "lay1" beliebig festlegen:
var lay1;
function windowOnload() {
with (lay1 = cbeGetElementById('lay1').cbe) {
resizeTo(document.cbe.width()/3,document.cbe.height()-100); //*****Größe
moveTo(document.cbe.width()/3+300,50); //****Position
show(); }
Ein Code zu Image resize
<html >
<head>
<style type='text/css'><!--
html { margin:0; padding:0; }
body {
color:#000;
background:#fff;
margin:0; padding:0;
font-family:verdana,arial,sans-serif; font-size:12px;
}
.clsCBE {
position:absolute; visibility:hidden;
color:#000000; background:#ffffff;
margin:0; padding:0;
}
--></style>
<script type='text/javascript' src='../cbe/cbe_core.js'></script>
<script type='text/javascript'><!--
function windowOnload() {
with (cbeGetElementById('id1').cbe) {
background('#ffffff');
moveTo('center');
show();
}
}
function doSubmit() {
var w = document.forms['f1'].w.value;
var h = document.forms['f1'].h.value;
var u = document.forms['f1'].u.value;
var e = cbeGetElementById('id1').cbe;
e.innerHtml("<img src='"+u+"' width='"+w+"' height='"+h+"'>");
return false;
}
//--></script>
</head>
<body>
<form name='f1' onsubmit='return doSubmit()'>
<table>
<tr><td>img Width</td><td><input type='text' name='w' value='75'></td></tr>
<tr><td>img Height</td><td><input type='text' name='h' value='40'></td></tr>
<tr><td>img URL</td><td><input type='text' name='u' size='60' value='flag.gif'></td></tr>
<tr><td colspan='2' align='center'><input type='submit' value='Change Image'></td></tr>
</table>
</form>
<div id='id1' class='clsCBE'>id1</div>
</body>
</html>
Or this one
<html>
<head>
<title>Dynamic Image Resize</title>
<style type='text/css'><!--
.clsCBE {
position:absolute; visibility:hidden;
width:100%; height:100%; clip:rect(0,100%,100%,0);
color:#000000; margin:0px; padding:0px;
}
--></style>
******** type='text/javascript' src='cbe_core.js'> </script>
******** type='text/javascript' src='cbe_clip.js'> </script>
******** type='text/javascript' src='cbe_slide.js'> </script>
******** type='text/javascript' src='cbe_slide2.js'> </script>
******** type='text/javascript' src='cbe_event.js'> </script>
******** type='text/javascript' src='cbe_util.js'> </script>
******** type='text/javascript' src='cbe_debug.js'> </script>
******** type='text/javascript'><!--
var e1,ee,innen;
function windowOnload() {
with (ee = cbeGetElementById('ee').cbe) {
resizeTo(800,300);
moveTo(100,50);
show();
zIndex(2);
}
with (e1 = cbeGetElementById('e1').cbe) {
background('0000FF');
resizeTo(500,500);
moveTo(0,0);
show();
zIndex(20);
}
document.cbe.addEventListener("mousemove", resizeImage);
}
function resizeImage(e){
e1 = cbeGetElementById('e1').cbe
e1.resizeTo(e.pageY,e.pageY);
e1.slideTo(e.pageX,0,4000);
pic1=document.images.myImage1;
pic1.width = e1.width()/4+20;
pic1.height = e1.height()/4+20;
}
//--></script>
</head>
<body marginwidth='0' marginheight='0'>
<div id='ee' class='clsCBE'>
<div id='e1' class='clsCBE'>
<img name="myImage1" src="bus.jpg" width="100" height="100" border="0">
</div>
</div>
</body>
</html>