HTML and CSS Reference
In-Depth Information
EXAMPLE
15.17
<html>
<head><title>Scrolling Text</title>
<style type="text/css">
1
#div1 { background-color:darkgreen;
color: white;
font-family:courier;
font-weight: bold;
position:absolute;
border-style:groove;
border-color:white;
padding-left:10px;
top:20px;
left:10px;
2
width: 595px; height: 6%;
3
overflow: hidden;
}
4
img { position: absolute; top: 10px;left:60px;
border-style:solid;border-color:"darkgreen";}
body { background-color:#669966;}
</style>
<script type="text/javascript">
5
/*Modification of text box marquee by Dave Methvin,
Windows Magazine
*/
6
var
scroll_speed = 200
; //
200 milliseconds
var chars = 1;
var divElement;
7
window.onload=function() {
divElement=document.getElementById("div1");
}
8
function scroller() {
9
window.setTimeout('scroller()',scroll_speed);
10
var msg=divElement.firstChild.nodeValue;
11
divElement.firstChild.nodeValue = msg.substring(chars)
+ msg.substring(0,chars)
;
}
12
scroller();
</script>
</head>
<body>
<img src="BubyanIsland.JPG" width="450" length="500">
13
<div id="div1">
The latest news from Baghdad is not good tonight. Sand and
rain are hindering our troops. The number of refugees
continues to increase in the north...
</div>
</body>
</html>
