Javascript-Problem oder doch nur falsches HTML
Wie man im nachfolgenden Code erkennen kann habe ich einen Code gefunden wie man mit Layern mit dem Mouseover-Effekt scrollen kann ... funktioniert auch. Nun möchte ich jedoch mehrere solche Layer nebeneinander setzen und versuchte dies über eine Tabelle einzurichten (ja, Frame ginge auch mag ich aber nicht) doch irgendwas läuft schief. In der ersten Spalte der Text ohne Probleme mit Anzeige der Mouseover-Grafiken jedoch in spalte 2 nur Text ohne Möglichkeit die Scrollgrafiken zu sehen oder zu benutzen ... wer kann mir den Fehler beheben helfen?
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 1ter Layer
BEISPIELTEXT 1ter Layer
BEISPIELTEXT 1ter Layer
BEISPIELTEXT 1ter Layer
BEISPIELTEXT 1ter Layer
BEISPIELTEXT 1ter Layer
BEISPIELTEXT 1ter Layer
</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">
BEISPIELTEXT 2TER LAYER
BEISPIELTEXT 2TER LAYER
BEISPIELTEXT 2TER LAYER
BEISPIELTEXT 2TER LAYER
BEISPIELTEXT 2TER LAYER
BEISPIELTEXT 2TER LAYER
BEISPIELTEXT 2TER LAYER
BEISPIELTEXT 2TER LAYER
BEISPIELTEXT 2TER LAYER
BEISPIELTEXT 2TER LAYER
</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> #
In einem anderen Forum kam ohne Text nur folgende Hinweis, vielleicht kann jemand von euch damit was anfangen und mir insbesondere das Attribut "overflow" erklären, im Netz fand ich nichts brauchbares.
<table width=638 height=347 border=0>
<td style="width: 638; height:347;">
<div style="width: 638; height:347; overflow : auto;">
</div>
</td>
</table>
Gruss,
Kerim
Die Site, einfach auf Türkei klicken dann sieht man was ich meine ...
Ach ja, das farbliche und so habe ich noch nicht so ausgearbeitet weil ich das mit einer externen CSS-File machen will aber auch da sind Tips gerne gesehen
http://www.geocities.com/kerim_terim/test/index.html
Und noch ein ach ja, wer auf Bilder und dann Privat geht sieht das die Bildlaufleiste funktioniert (bilder hab ich keine hochgeladen) ...
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
LinkBack URL
About LinkBacks
Zitieren