Hab mir mal den Code von der obigen Seite genommen und versuche gerade es mehrfach anzuwenden ... genauer ich habe ingesamt 7 lange Texte die ich mit dem obigen Beispiel nebeneinander einsetzen möchte.
Der Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
#divCont{position:absolute; top:15px; left:40px; clip:rect(0,550,300,0); height:300px; width:550px}
#divControll {position:absolute; top:315px; left:310px; height:20px; width:265px; visibility:visible}
#divCont1{position:absolute; top:15px; left:840px; clip:rect(0,550,300,0); height:300px; width:550px}
#divControll1 {position:absolute; top:315px; left:1260px; height:20px; width:265px; visibility:visible}
.clScroll{position:absolute; top:0; left:0; visibility:visible}
</style>
<script type="text/javascript" language="JavaScript">
function openGame(url){
win = window.open(url,'game','width=300,height=430,scrollbars=no,resize=no')
win.focus()
}
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at
www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
********************************************************************************/
//Default browsercheck, added to all scripts!
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
/*********************************************************************************
These are the variables you have to set:
*********************************************************************************/
//The speed of the timeout between each scroll.
timSpeed=50
//The height of the container (change this when it scrolls to much or to little)
contHeight=380
/*********************************************************************************
This is the object constructor function, which applies
methods and properties to the Cross-browser layer object
*********************************************************************************/
function makeScrollObj(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.height=bw.ns4?this.css.document.height:this.el.offsetHeight
this.top=b_gettop
return this
}
//Getting the top for the top method
function b_gettop(){
var gleft=(bw.ns4 || bw.ns5) ? eval(this.css.top):eval(this.css.pixelTop);
return gleft;
}
//Variables
var scrollTim;
var active=0;
/*********************************************************************************
The scroll function. Checks what way to scroll and checks if the
layer is not already on top or bottom.
*********************************************************************************/
function scroll(speed){
clearTimeout(scrollTim)
way=speed>0?1:0
if((!way && oScroll[active].top()>-oScroll[active].height+contHeight) || (oScroll[active].top()<0 && way)){
oScroll[active].css.top=oScroll[active].top()+speed
scrollTim=setTimeout("scroll("+speed+")",timSpeed)
}
}
//Clears the timeout so the scroll stops, this is called onmouseout.
function noScroll(){
clearTimeout(scrollTim)
}
/*********************************************************************************
Changes the active layer. Hides the one that's visible and
shows the "new" one. Also set's the new layers top to
0 so it starts at top.
*********************************************************************************/
function changeActive(num){
// oScroll[active].css.visibility='hidden'
active=num
// oScroll[active].css.top=0
// oScroll[active].css.visibility='visible'
}
/*********************************************************************************
Initilizes the page, makes a oScroll Array and calls the object constructor.
Here you can add as many scrollObjects as you want
*********************************************************************************/
function scrollInit(){
oScroll=new Array()
oScroll[0]=new makeScrollObj('divScroll','divCont')
oScroll[0].css.visibility='visible'
}
/*********************************************************************************
Executes the scrollInit function on pageload.
*********************************************************************************/
onload=scrollInit;
</script>
<body bgcolor="#99B3CC">
<!-- Tabelle um die einzelnen Bereiche in Spalten zu gliedern -->
<table>
<tr>
<td>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left">
<div id="divCont">
<div id="divScroll" class="clScroll">
<table width="550" cellpadding="10">
<tr>
<td class="text">
BEISPIELTEXT 1
</td>
</tr>
</table>
</div>
</div>
</td>
<td height="180" width="60"> </td>
</tr>
<tr>
<td width="55"> </td>
<td width="152"> </td>
<td width="539"> </td>
<td width="60"> </td>
</tr>
</table>
<div id="divControll" >
<table width="265" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="bilder/scroll_1.jpg" width="201" height="17"></td>
<td><a href="#" onmouseover="scroll(-5)" onmouseout="noScroll()"><img src="bilder/scroll_2.gif" width="24" height="17" border="0"></a></td>
<td><a href="#" onmouseover="scroll(5)" onmouseout="noScroll()"><img src="bilder/scroll_3.gif" width="23" height="17" border="0"></a></td>
<td><img src="bilder/scroll_4.gif" width="17" height="17"></td>
</tr>
</table>
</div>
</td>
<td>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left">
<div id="divCont1">
<div id="divScroll1" class="clScroll">
<table width="550" cellpadding="10">
<tr>
<td class="text">
<td class="text">
c
</td>
</tr>
</table>
</div>
</div>
</td>
<td height="180" width="60"> </td>
</tr>
<tr>
<td width="55"> </td>
<td width="152"> </td>
<td width="539"> </td>
<td width="60"> </td>
</tr>
</table>
<div id="divControll" >
<table width="265" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="bilder/scroll_1.jpg" width="201" height="17"></td>
<td><a href="#" onmouseover="scroll(-5)" onmouseout="noScroll()"><img src="bilder/scroll_2.gif" width="24" height="17" border="0"></a></td>
<td><a href="#" onmouseover="scroll(5)" onmouseout="noScroll()"><img src="bilder/scroll_3.gif" width="23" height="17" border="0"></a></td>
<td><img src="bilder/scroll_4.gif" width="17" height="17"></td>
</tr>
</table>
</div>
</td>
</td>
</tr>
</td>
</tr>
</table>
</body>
</html>
Wie man sieht versuche ich in einer Tabelle die 7 Texte unterzubringen. In der ersten Spalte sehe ich den Text mit den Grafiken zum Scrollen jedoch in der zweiten Spalte nur den Text ohne Grafiken zum scrollen ....
Wer kennt die Lösung?
Danke mal im Vorraus,
Kerim
