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">

<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="">Dynamic
Drive</a> provides free, cut and paste DHTML scripts</p>


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

<script type="text/javascript">

* Scrollable content script II- © Dynamic Drive (
* Visit 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(;
if ((spd>0&&top<=0)||(spd<0&&top>=max)){"px";{ move(id,spd); },20);
else {>0?0:max)+"px";