Scroll Content (Watch Assignment)

Right click images, and select "Save Image As" Upload them into the same directory as your webpage.

Up Button-

Down Button-

To alter the interface's width, change all occurrences of the number "175" and "170" to another number. To alter its height, change the occurrences of "160".

<div style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">
<div id="container2" style="position:absolute;width:170px;left:0;top:0">

<!--INSERT CONTENT HERE-->
<p>- DHTML is the
combination of HTML, JavaScript, and CSS</p>
<p>- DOM stands for Document Object Model</p>
<p>- DHTML allows
content on a page to change on the fly, without reloading the page</p>
<p>- CSS allows for the separation between content
definition and formatting</p>
<p>- CSS stands for Cascading style sheet</p>
<p>- <a href="http://www.dynamicdrive.com">Dynamic
Drive</a> provides free, cut and paste DHTML scripts</p>
<!--END CONTENT-->

</div></div>

<table width="175px"><td><p align="right">
<a href="#" onMouseover="move('container2',5)" onMouseout="clearTimeout(move.to)"><img src="up.gif" border=0></a> <a href="#" onMouseover="move('container2',-5)" onMouseout="clearTimeout(move.to)"><img src="down.gif" border=0></a></p></td>
</table>

<script type="text/javascript">

/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

// modified 17-October-2011

function move(id,spd){
var obj=document.getElementById(id),max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=parseInt(obj.style.top);
if ((spd>0&&top<=0)||(spd<0&&top>=max)){
obj.style.top=top+spd+"px";
move.to=setTimeout(function(){ move(id,spd); },20);
}
else {
obj.style.top=(spd>0?0:max)+"px";
}
}

</script>