Heya,
I have the following code that scrolls text contained inside a div, but when I change the text to two images, the div only scrolls to the end of the first image, and doesn't display the second. Why is this?
Code:
<html>
<head><title></title>
<style>
.Pictures
{
WIDTH: 71px;
HEIGHT: 51px;
MARGIN-LEFT: 12px;
MARGIN-BOTTOM: 12px;
BORDER: 2px solid RGB(255, 255, 255);
}
#clippedDiv
{
POSITION: relative;
WIDTH: 71px;
HEIGHT: 51px;
OVERFLOW: hidden;
}
</style>
<script language="JavaScript" type="text/javascript">
// Scroll code
var timeoutID; // global variable to hold the timer
function scrollDiv(inc,dir) { /* inc(rement) is positive or negative, direction is v(ertical) or h(orizontal) */
if (timeoutID) clearTimeout(timeoutID); // make sure we do not start another timer
var theDiv=document.getElementById('clippedDiv'); // get the hardcoded div
if (theDiv) { // does it exist?
if (dir == "v") theDiv.scrollTop+=inc; /* if vertical scroll increment the scrollTop to move down or up */
else theDiv.scrollLeft+=inc; // else increment scrollLeft to move right or left
timeoutID = setTimeout("scrollDiv(" + inc + ",'" + dir + "')", 20); // do it again in 20 miliseconds
}
}
function stopScroll() { //
if (timeoutID) clearTimeout(timeoutID); // if we have a timerID clear it
}
</script>
</head>
<body>
<div id="clippedDiv"><img class="Pictures" src="Images/1.bmp"><img class="Pictures"src="Images/2.bmp"></div>
<img "../../images/nav/tri-lft.gif" width="12" height="12" alt="" border="0" onmouseover="scrollDiv(-4, 'h');" onmouseout="stopScroll();">
<img "../../images/nav/tri-rt.gif" width="12" height="12" alt="" border="0" onmouseover="scrollDiv(4, 'h');" onmouseout="stopScroll();">
</body>
</html>