Scroller — webForum

FIgg3Medlem sedan sep. 2001354 inlägg

Frågan21 okt. 2001 11:59#1

Tjenare....

nu är det så att jag ska lägga scrollern över några andra lager sammt över några andra lager och när jag gör detta så syns den inte den gömmer sig bakom det andra men jag ändrat allt som jag kunnde hitta som skulle ha någon betydelse men funka ändå inte vet ingen hur man kan fixa det??????

<html>
<head>
<title> DHTML scroll </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
#goUp { position:absolute; left:170px; top:190px;} 
#goDown { position:absolute; left:170px; top:380px;} 
#scrollArea { position:absolute; left:170px; top:220px; width:300px; height:150px; oweflow:hidden; clip:rect(0,300,150,0);} 
#scrollContent { position:absolute; left:0px; top:0px;} 
</style>
<script language="JavaScript" type="text/javascript"> 
/* scrollObj, creates a scrollable area 
* 
* @author: Ludvig 'geek' Lindblom - fatmilk 
* @contact: geek@fatmilk.nu - [url="http://www.fatmilk.nu"]www.fatmilk.nu[/url]  
* @date: 2001-06-23 
*/ 

var notNS=(document.all)?true:false; 
var varY=0; 
var loop 
var move 
var heighten=150; // Detta måste vara samma mått som height i scrollArea 

function moveIt(y) 
{ 
varY = y 
if(notNS) 
{ 
document.all['scrollContent'].style.top = varY; 
} 
else 
{ 
document.scrollArea.document.scrollContent.top = varY; 
} 
} 

function scrollaNer(move) 
{ 
scrollHeight = (notNS)?document.all['scrollContent'].offsetHeight:document.scrollArea.document.scrollContent.document.height; 
if(varY>heighten-scrollHeight) 
{ 
moveIt(varY-move); 
if(loop) setTimeout("scrollaNer("+move+")",50); 
} 
} 

function scrollaUpp(move) 
{ 
if(varY<0) 
{ 
moveIt(varY-move); 
if(loop) setTimeout("scrollaUpp("+move+")",50); 
} 
} 

function scroll(speed) 
{ 
loop=true; 
if(speed>0) scrollaNer(speed) 
else scrollaUpp(speed) 
} 

function noScroll() 
{ 
loop=false; 
} 

function showOrNot() 
{ 
scrollHeight = (notNS)?document.all['scrollContent'].offsetHeight:document.scrollArea.document.scrollContent.document.height; 
if(scrollHeight < heighten) 
{ 
if(notNS) 
{ 
document.all.goDown.style.visibility="hidden"; 
document.all.goUp.style.visibility="hidden"; 
} 
else 
{ 
document.goDown.visibility="hide"; 
document.goUp.visibility="hide"; 
} 
} 
} 
</script>
</head>

<body bgcolor="#FFFFFF">
<div id="goUp"> <a href="javascript:;" onMouseOut="noScroll()" onMouseOver="scroll(-5)">Upp</a> 
</div>
<div id="scrollArea"> 
  <div id="scrollContent"> testar scrollern<br>
    testar scrollern<br>
    testar scrollern<br>
    testar scrollern<br>
    testar scrollern<br>
    testar scrollern<br>
    testar scrollern<br>
    testar scrollern<br>
    testar scrollern<br>
    testar scrollern<br>
    testar scrollern<br>
    testar scrollern </div>
</div>
<div id="goDown"> <a href="javascript:;" onMouseOut="noScroll()" onMouseOver="scroll(5)">Ner</a> 
</div>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 178px; top: 76px"> 
  <table width="47%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td width="36%"><img src="top01.gif" width="258" height="97"></td>
      <td width="42%"><img src="top02.gif" width="244" height="97"></td>
      <td width="22%"><img src="top03.gif" width="141" height="97"></td>
    </tr>
  </table>
  <table width="47%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td width="36%"><img src="main01.gif" width="194" height="293"></td>
      <td width="42%"><img src="main02.gif" width="221" height="293"></td>
      <td width="22%"><img src="main03.gif" width="228" height="293"></td>
    </tr>
  </table>
  <table width="47%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td width="36%"><img src="down01.gif" width="229" height="67"></td>
      <td width="42%"><img src="down02.gif" width="230" height="67"></td>
      <td width="22%"><img src="down03.gif" width="184" height="67"></td>
    </tr>
  </table>
</div>
<div id="Layer1" style="position:absolute; width:550px; height:10px; z-index:1; left: 213px; top: 81px"> 
  <div align="left"><font size="-2" face="Verdana, Arial, Helvetica, sans-serif"><font color="#CCCCCC"><a href="default.asp?vidare=intern&ID=2"><font color="#000000">bilder</font></a><font color="#000000"> 
    - <a href="default.asp?vidare=intern&ID=3">divx/vcd</a> - <a href="default.asp?vidare=intern&ID=4">l&auml;nkar</a> 
    - <a href="default.asp?vidare=intern&ID=5">ladda ner</a> - <a href="default.asp?vidare=intern&ID=6">design</a> 
    - <a href="default.asp?vidare=intern&ID=7">g&auml;stbok</a> - <a href="default.asp?vidare=intern&ID=8">stat</a></font></font><font color="#000000"> 
    - <a href="default.asp?vidare=intern&ID=9">forum</a> - <a href="default.asp">Index</a></font></font></div>
</div>
</body>
</html>

JojoxxMedlem sedan juni 20004 308 inlägg

21 okt. 2001 12:43#2

För varje lager kan du ange ett z-index. Ett lager med "högre" z-index visas över ett med "lägre" z-index.

Ex;

#goUp { position:absolute; left:170px; top:190px; z-index:5; }

Sätter du z-index 6 på ett annat lager kommer det att visas ovanför, sätter du 4 kommer det att lägga sig under.