Here is the code I'm using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about
:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">td img {display: block;}body {
background-image: url(PaperProzacBG8.jpg);
background-color: #FFFFFF;
}
html, body {
margin-top: 0;
padding-top: 0;
}
</style>
<!--Fireworks 8 Generic target. Created Tue Feb 16 11:56:28 GMT-0500 ( ) 2010-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/index_r1_c9_f2.jpg','images/index_r2_c9_f2.jpg','images/index_r3_c9_f2.jpg','images/index_r4_c1_f2.jpg','images/index_r4_c3_f2.jpg','images/index_r4_c6_f2.jpg','images/index_r4_c9_f2.jpg','images/index_r11_c1_f2.jpg');">
<div align="center">
<table width="900" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<!-- fwtable fwsrc="HomePage2.png" fwbase="index.jpg" fwstyle="Generic" fwdocid = "2006517954" fwnested="0" -->
<tr>
<td><img src="images/spacer.gif" width="27" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="197" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="25" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="13" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="187" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="195" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="28" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="2" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="197" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="28" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3" colspan="8"><img name="index_r1_c1" src="images/index_r1_c1.jpg" width="674" height="150" border="0" id="index_r1_c1" alt="" /></td>
<td colspan="3"><a href="javascript
:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r1_c9','','images/index_r1_c9_f2.jpg',1);"><img name="index_r1_c9" src="images/index_r1_c9.jpg" width="226" height="29" border="0" id="index_r1_c9" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="29" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3"><a href="javascript
:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r2_c9','','images/index_r2_c9_f2.jpg',1);"><img name="index_r2_c9" src="images/index_r2_c9.jpg" width="226" height="92" border="0" id="index_r2_c9" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="92" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3"><a href="javascript
:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r3_c9','','images/index_r3_c9_f2.jpg',1);"><img name="index_r3_c9" src="images/index_r3_c9.jpg" width="226" height="29" border="0" id="index_r3_c9" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="29" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><a href="javascript
:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r4_c1','','images/index_r4_c1_f2.jpg',1);"><img name="index_r4_c1" src="images/index_r4_c1.jpg" width="224" height="29" border="0" id="index_r4_c1" alt="" /></a></td>
<td colspan="3"><a href="javascript
:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r4_c3','','images/index_r4_c3_f2.jpg',1);"><img name="index_r4_c3" src="images/index_r4_c3.jpg" width="225" height="29" border="0" id="index_r4_c3" alt="" /></a></td>
<td colspan="3"><a href="javascript
:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r4_c6','','images/index_r4_c6_f2.jpg',1);"><img name="index_r4_c6" src="images/index_r4_c6.jpg" width="225" height="29" border="0" id="index_r4_c6" alt="" /></a></td>
<td colspan="3"><a href="javascript
:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r4_c9','','images/index_r4_c9_f2.jpg',1);"><img name="index_r4_c9" src="images/index_r4_c9.jpg" width="226" height="29" border="0" id="index_r4_c9" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="29" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="index_r5_c1" src="images/index_r5_c1.jpg" width="900" height="33" border="0" id="index_r5_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="33" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="index_r6_c1" src="images/index_r6_c1.jpg" width="900" height="1" border="0" id="index_r6_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="9"><img name="index_r7_c1" src="images/index_r7_c1.jpg" width="871" height="1" border="0" id="index_r7_c1" alt="" /></td>
<td rowspan="2"><img name="index_r7_c10" src="images/index_r7_c10.jpg" width="28" height="386" border="0" id="index_r7_c10" alt="" /></td>
<td rowspan="3"><img name="index_r7_c11" src="images/index_r7_c11.jpg" width="1" height="387" border="0" id="index_r7_c11" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img name="index_r8_c1" src="images/index_r8_c1.jpg" width="27" height="386" border="0" id="index_r8_c1" alt="" /></td>
<td rowspan="2" colspan="2"><html>
<style rel="stylesheet" type="text/css" media="screen, projection">
/*********************** SCROLLERS ***********************/
.root {
position:relative;
height: 200px;
width: 200px;
margin: 0px 0px 8px 7px;
}
.root p {
margin: 10px 10px 5px 10px;
}
.thumb {
position: absolute;
height: 200px;
width: 15px;
left: 10px;
}
.up, .dn {
position: absolute;
left: 10px;
}
.up a, .up a img, .dn a, .dn a img, .thumb a , .thumb a img{
border: 0;
}
.scrollContainer {
position:relative;
left: 2px;
top: 19px;
width: 232px;
height: 200px;
clip: rect(0 467 200 0);
overflow: auto;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid#FFFFFF;
border-bottom: 1px solid #FFFFFF;
background: #FFFFFF;
background-color: ##FFFFFF;
}
.scrollContent {
position: absolute;
left: 0px;
top: 0px;
width: 100px;
}
</style>
</head>
<body>
<!-- dom-drag.js -->
<script type="text/javascript">
/**************************************************
* dom-drag.js
* 09.25.2001
*
www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != 'undefined' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.maxX = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == 'undefined') e = window.event;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
return e;
}
};
</script>
<!-- ypSimpleScrollC.js -->
<script type="text/javascript" >
/* ================================================== =====
* ypSimpleScroll
* 3/11/2001
*
*
http://www.youngpup.net/
* ================================================== ===== */
// Modified by Sergi Meseguer (
www.zigotica.com) 04/2004
// Now it works with dragger and can use multiple instances in a page
ypSimpleScroll.prototype.scrollNorth = function(count) { this.startScroll(90, count) }
ypSimpleScroll.prototype.scrollSouth = function(count) { this.startScroll(270, count) }
ypSimpleScroll.prototype.scrollWest = function(count) { this.startScroll(180, count) }
ypSimpleScroll.prototype.scrollEast = function(count) { this.startScroll(0, count) }
ypSimpleScroll.prototype.startScroll = function(deg, count) {
if (this.loaded){
if (this.aniTimer) window.clearTimeout(this.aniTimer)
this.overrideScrollAngle(deg)
this.speed = this.origSpeed
this.lastTime = (new Date()).getTime() - this.y.minRes
this.aniTimer = window.setTimeout(this.gRef + ".scroll('"+deg+"','"+count+"')", this.y.minRes)
}
}
ypSimpleScroll.prototype.endScroll = function() {
if (this.loaded){
window.clearTimeout(this.aniTimer)
this.aniTimer = 0;
this.speed = this.origSpeed
}
}
ypSimpleScroll.prototype.overrideScrollAngle = function(deg) {
if (this.loaded){
deg = deg % 360
if (deg % 90 == 0) {
var cos = deg == 0 ? 1 : deg == 180 ? -1 : 0
var sin = deg == 90 ? -1 : deg == 270 ? 1 : 0
}
else {
var angle = deg * Math.PI / 180
var cos = Math.cos(angle)
var sin = Math.sin(angle)
sin = -sin
}
this.fx = cos / (Math.abs(cos) + Math.abs(sin))
this.fy = sin / (Math.abs(cos) + Math.abs(sin))
this.stopH = deg == 90 || deg == 270 ? this.scrollLeft : deg < 90 || deg > 270 ? this.scrollW : 0
this.stopV = deg == 0 || deg == 180 ? this.scrollTop : deg < 180 ? 0 : this.scrollH
}
}
ypSimpleScroll.prototype.overrideScrollSpeed = function(speed) {
if (this.loaded) this.speed = speed
}
ypSimpleScroll.prototype.scrollTo = function(stopH, stopV, aniLen) {
if (this.loaded){
if (stopH != this.scrollLeft || stopV != this.scrollTop) {
if (this.aniTimer) window.clearTimeout(this.aniTimer)
this.lastTime = (new Date()).getTime()
var dx = Math.abs(stopH - this.scrollLeft)
var dy = Math.abs(stopV - this.scrollTop)
var d = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2))
this.fx = (stopH - this.scrollLeft) / (dx + dy)
this.fy = (stopV - this.scrollTop) / (dx + dy)
this.stopH = stopH
this.stopV = stopV
this.speed = d / aniLen * 1000
window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
}
}
}
ypSimpleScroll.prototype.jumpTo = function(nx, ny) {
if (this.loaded){
nx = Math.min(Math.max(nx, 0), this.scrollW)
ny = Math.min(Math.max(ny, 0), this.scrollH)
this.scrollLeft = nx
this.scrollTop = ny
if (this.y.ns4)this.content.moveTo(-nx, -ny)
else {
this.content.style.left = -nx + "px"
this.content.style.top = -ny + "px"
}
}
}
ypSimpleScroll.minRes = 10
ypSimpleScroll.ie = document.all ? 1 : 0
ypSimpleScroll.ns4 = document.layers ? 1 : 0
ypSimpleScroll.dom = document.getElementById ? 1 : 0
ypSimpleScroll.mac = navigator.platform == "MacPPC"
ypSimpleScroll.mo5 = document.getElementById && !document.all ? 1 : 0
ypSimpleScroll.prototype.scroll = function(deg,count) {
this.aniTimer = window.setTimeout(this.gRef + ".scroll('"+deg+"','"+count+"')", this.y.minRes)
var nt = (new Date()).getTime()
var d = Math.round((nt - this.lastTime) / 1000 * this.speed)
if (d > 0){
var nx = d * this.fx + this.scrollLeft
var ny = d * this.fy + this.scrollTop
var xOut = (nx >= this.scrollLeft && nx >= this.stopH) || (nx <= this.scrollLeft && nx <= this.stopH)
var yOut = (ny >= this.scrollTop && ny >= this.stopV) || (ny <= this.scrollTop && ny <= this.stopV)
if (nt - this.lastTime != 0 &&
((this.fx == 0 && this.fy == 0) ||
(this.fy == 0 && xOut) ||
(this.fx == 0 && yOut) ||
(this.fx != 0 && this.fy != 0 &&
xOut && yOut))) {
this.jumpTo(this.stopH, this.stopV)
this.endScroll()
}
else {
this.jumpTo(nx, ny)
this.lastTime = nt
}
// (zgtc) now we also update dragger position:
if(deg=='270') theThumb[count].style.top = parseInt(((theThumb[count].maxY-theThumb[count].minY)*this.scrollTop/this.stopV)+theThumb[count].minY) + "px"; //ok nomes down
if(deg=='90') theThumb[count].style.top = parseInt(((theThumb[count].maxY-theThumb[count].minY)*this.scrollTop/this.scrollH)+theThumb[count].minY) + "px"; //ok nomes down
}
}
function ypSimpleScroll(id, left, top, width, height, speed) {
var y = this.y = ypSimpleScroll
if (document.layers && !y.ns4) history.go(0)
if (y.ie || y.ns4 || y.dom) {
this.loaded = false
this.id = id
this.origSpeed = speed
this.aniTimer = false
this.op = ""
this.lastTime = 0
this.clipH = height
this.clipW = width
this.scrollTop = 0
this.scrollLeft = 0
this.gRef = "ypSimpleScroll_"+id
eval(this.gRef+"=this")
var d = document
d.write('<style type="text/css">')
d.write('#' + this.id + 'Container { left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; height:' + height + 'px; clip:rect(0 ' + width + ' ' + height + ' 0); overflow:hidden; }')
d.write('#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; }')
d.write('#' + this.id + 'Content { left:' + (-this.scrollLeft) + 'px; top:' + (-this.scrollTop) + 'px; width:' + width + 'px; }')
// (zgtc) fix to overwrite p/div/ul width (would be clipped if wider than scroller in css):
d.write('#' + this.id + 'Container p, #' + this.id + 'Container div {width:' + parseInt(width-10) + 'px; }')
d.write('</style>')
}
}
ypSimpleScroll.prototype.load = function() {
var d, lyrId1, lyrId2
d = document
lyrId1 = this.id + "Container"
lyrId2 = this.id + "Content"
this.container = this.y.dom ? d.getElementById(lyrId1) : this.y.ie ? d.all[lyrId1] : d.layers[lyrId1]
this.content = obj2 = this.y.ns4 ? this.container.layers[lyrId2] : this.y.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
this.docH = Math.max(this.y.ns4 ? this.content.document.height : this.content.offsetHeight, this.clipH)
this.docW = Math.max(this.y.ns4 ? this.content.document.width : this.content.offsetWidth, this.clipW)
this.scrollH = this.docH - this.clipH
this.scrollW = this.docW - this.clipW
this.loaded = true
this.scrollLeft = Math.max(Math.min(this.scrollLeft, this.scrollW),0)
this.scrollTop = Math.max(Math.min(this.scrollTop, this.scrollH),0)
this.jumpTo(this.scrollLeft, this.scrollTop)
}
</script>
<!-- scroller.js -->
<script type="text/javascript">
// ================================================== ============
// HANDLES SCROLLER/S
// Modified from Aaron Boodman
http://webapp.youngpup.net/?request=...mpleScroll.xml
// mixed ypSimpleScroll with dom-drag script and allowed multiple scrolelrs through array instances
// (c)2004 Sergi Meseguer (
http://zigotica.com/), 04/2004:
// ================================================== ============
var theHandle = []; var theRoot = []; var theThumb = []; var theScroll = []; var thumbTravel = []; var ratio = [];
function instantiateScroller(count, id, left, top, width, height, speed){
if(document.getElementById) {
theScroll[count] = new ypSimpleScroll(id, left, top, width, height, speed);
}
}
function createDragger(count, handler, root, thumb, minX, maxX, minY, maxY){
var buttons = '<div class="up" id="up'+count+'">'+
'<a href="#" onmouseover="theScroll['+count+'].scrollNorth(\''+count+'\')" '+
'onmouseout="theScroll['+count+'].endScroll()" onclick="return false;">'+
'<img src="TopArrow.gif" width="18" height="13"></a></div>'+
'<div class="dn" id="dn'+count+'"">'+
'<a href="#" onmouseover="theScroll['+count+'].scrollSouth(\''+count+'\')" '+
'onmouseout="theScroll['+count+'].endScroll()" onclick="return false;">'+
'<img src="BottomArrow.gif" width="18" height="13"></a></div>'+
'<div class="thumb" id="'+thumb+'" style="left: 135px; top: 15px;">'+
'<img src="MiddleArrow4.gif" width="18" height="53"></div>';
document.getElementById(root).innerHTML = buttons + document.getElementById(root).innerHTML;
theRoot[count] = document.getElementById(root);
theThumb[count] = document.getElementById(thumb);
var thisup = document.getElementById("up"+count);
var thisdn = document.getElementById("dn"+count);
theThumb[count].style.left = parseInt(minX+15) + "px";
thisup.style.left = parseInt(minX+15) + "px";
thisdn.style.left = parseInt(minX+15) + "px";
theThumb[count].style.border =0;
theThumb[count].style.top = parseInt(minY) + "px";
thisup.style.top = 0 + "px";
thisdn.style.top = parseInt(minY+maxY) + "px";
//thisdn.style.top = 15 + "px";
theScroll[count].load();
//Drag.init(theHandle[count], theRoot[count]); //not draggable on screen
Drag.init(theThumb[count], null, minX+15, maxX+15, minY, maxY);
// the number of pixels the thumb can travel vertically (max - min)
thumbTravel[count] = theThumb[count].maxY - theThumb[count].minY;
// the ratio between scroller movement and thumbMovement
ratio[count] = theScroll[count].scrollH / thumbTravel[count];
theThumb[count].onDrag = function(x, y) {
theScroll[count].jumpTo(null, Math.round((y - theThumb[count].minY) * ratio[count]));
}
}
// INITIALIZER:
// ================================================== ============
// ala Simon Willison
http://simon.incutio.com/archive/200...6/addLoadEvent
function addLoadEvent(fn) {
var old = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
}
else {
window.onload = function() {
old();
fn();
}
}
}
addLoadEvent(function(){
if(theScroll.length>0) {
for(var i=0;i<theScroll.length;i++){
createDragger(i, "handle"+i, "root"+i, "thumb"+i, theScroll[i].clipW, theScroll[i].clipW, 15, theScroll[i].clipH-125);
}
}
})
</script>
<script type="text/javascript">
instantiateScroller(0, "scroll0", -6, -90, 175, 385,200);
instantiateScroller(1, "scroll1", 1200, 1000, 875, 1200, 500);
</script>
<div class="root" id="root0">
<div class="scrollContainer" id="scroll0Container">
<div class="scrollContent" id="scroll0Content">
<p>Javascript is a different layer of the style and structure ones, and like CSS, it should
not be required but optional, so that without its use the page should be accessible and usable.
If the browser cannot interpret the code it will not execute it, but the contents will be
accessible. This is generally called script degradation. Now, being more specific, what makes
a piece of code unobtrusive?</p>
<ol>
<li><strong>Mix with structure</strong>: mainly, script behaviour not being mixed with
page contents. This means there will be no intrinsec events inside the document and
the file will be stored in a separate .js file.</li>
<li><strong>Initialization</strong>: the ideal solution is the script being initialized
automatically on page load</li>
<li><strong>Assign actions with an event handler</strong>: because we have avoided the
use of intrinsec events we will need a way to associate actions (execute functions) to
events captured by different elements on the page. </li>
<li><strong>Compatibility</strong>: browsers that dont understand the code must do without
it throwing no error messages. </li>
<li><strong>Capacities detection</strong>: to allow the previous point be true we will use
object detection instead of browser detection.</li>
</ol>
<p>Ending example one.</p>
</div>
</div>
</div></td>
<td rowspan="2"><img name="index_r8_c4" src="images/index_r8_c4.jpg" width="" height="386" border="0" id="index_r8_c4" alt="" /></td>
<td rowspan="2" colspan="2"> </td>
<td rowspan="2"><img name="index_r8_c7" src="images/index_r8_c7.jpg" width="28" height="386" border="0" id="index_r8_c7" alt="" /></td>
<td rowspan="2" colspan="2"><img name="index_r8_c8" src="images/index_r8_c8.jpg" width="199" height="386" border="0" id="index_r8_c8" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="385" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="index_r9_c10" src="images/index_r9_c10.jpg" width="28" height="1" border="0" id="index_r9_c10" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="index_r10_c1" src="images/index_r10_c1.jpg" width="900" height="36" border="0" id="index_r10_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="36" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><a href="javascript
:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('index_r11_c1','','image s/index_r11_c1_f2.jpg',1);"><img name="index_r11_c1" src="images/index_r11_c1.jpg" width="900" height="39" border="0" id="index_r11_c1" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="39" border="0" alt="" /></td>
</tr>
</table>
</div>
</body>
</html>
