I'm creating a scrollable banner for my homepage with 'up' and 'down' button for user to scroll the banner. How do I make it so that the mouse scroller is able to scroll the banner too and also once I click on the down or up button the user will be able to see the transition of the banner scrolling upwards or downwards?
scroll script:
<script>
var t = 0;
function up()
{
t += 600;
with(document.getElementById("contents"))
{
if (t > 0)
t = 0;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
function down()
{
t -= 600;
with(document.getElementById("contents"))
{
if(t < -clientHeight)
t = -clientHeight;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
</script>
scrollable banner:
<table width="950px" height="600px">
<tr>
<td valign="top">
<div id="scrollable" style="height:600px; width:950px">
<div id="contents" style="height:600px; width:950px">
<table bgcolor="#dcdcdc" width="950px" height="600px">
<tr>
<td height="490px"></td>
</tr>
<tr>
<td height="100px"><img src="images/banner_title.png"/></td>
</tr>
</table>
<table bgcolor="#ffd07e" width="950px" height="600px">
<tr>
<td height="490px"></td>
</tr>
<tr>
<td height="100px"><img src="images/banner_title.png"/></td>
</tr>
</table>
buttons:
<table>
<tr>
<td width="30px"><a href="javascript:void(0)" onClick="up()"><img src="images/arrow_up.png"/></a></td>
<td width="30px"><a href="javascript:void(0)" onClick="down()"><img src="images/arrow_down.png"/></a></td>
</tr>
</table>
