Scrollbar transparent mit Hintergrundbild!?

Damiön

Hallo,

Ich wüsste gerne wie ich diese Scrollbar nachbauen kann http://www.ikilledthepromqueen.com/index2.html

Scheint iwie transparent zu sein (bis auf den roten Scroller) und hintendran ein Bild...
bei selfhtml hab ich nichts gefunden...

grüße,
Damien

sejuma

Da steckt ein Javascript dahinter.
Funktioniert also nur, wenn Javascript aktiviert ist.

synaptic

is nen free script...
hab dir hier mal den quellcode extrahiert:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>NL news</title>






  
  <style type="text/css" media="screen">
  <!--
.ad { text-align: left; vertical-align: middle; }
body {
	background:  url(../iframe/images/newsback.gif);
	color: #c0a458;
	font-size: 11px;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	background-image:  url(images/deceased_08.gif);
	background-color: #FFFFFF;
}
table { color: #c0a458; font-size: 11px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; }
strong { color: #fff; font-weight: bold; }
img {border: 0px;}
 #content {
	position: absolute;
	width: 381px;
	height: 1067px;
}
a:link { color: #666666; text-decoration: none; }
a:visited { color: #333333; text-decoration: none; }
a:hover { color: #9e1d20; text-decoration: underline; }
a:active { text-decoration: none; }
body,td,th {
	font-family: Tahoma, Geneva, Arial, SunSans-Regular, sans-serif;
	font-size: 9px;
	color: #000000;
}
.style1 {
	color: #9e1d20;
	font-weight: bold;
}
--></style>
<script language="javascript">
// Made by geeeet ät ghtml punkt com
// Keep these two lines and you're free to use this code


// Known bugs :
// If ie4.5 mac, please press apple-t to remove sidebar, otherwise everything is pushed 20px to the right...


// Corrected bugs :
// 25.01.2001 - When the height of the span "content" was less than the height of the span "contentClip" a javascript error occured, function changed : move()
// 21.02.2001 - Scrolling text wasn't selectable in ie, function changed : move()
// 05.03.2001 - Ie x and y coordinates was wrong when page was scrolled, function changed : getMouse()


// 19.04.2001 - Finally able to remove browser-scrollbar if content is longer than the browser is high:
// Just put this in the style-tag right before the end head-tag:
// body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0; width:100%;height:100%;overflow:hidden}


// Touch me here :-)
var upH = 0; // Height of up-arrow
var upW = 0; // Width of up-arrow
var downH = 30; // Height of down-arrow
var downW = 30; // Width of down-arrow
var dragH = 24; // Height of scrollbar
var dragW = 15; // Width of scrollbar
var scrollH = 342; // Height of scrollbar
var speed = 8; // Scroll speed


// And now... go to the bottom of the page...


// Browser detection
var dom = document.getElementById ? true:false;
var nn4 = document.layers ? true:false;
var ie4 = document.all ? true:false;


var mouseY; // Mouse Y position onclick
var mouseX; // Mouse X position onclick


var clickUp = false; // If click on up-arrow
var clickDown = false; // If click on down-arrow
var clickDrag = false; // If click on scrollbar
var clickAbove = false; // If click above scrollbar
var clickBelow = false; // If click below scrollbar


var timer = setTimeout("",500); // Repeat variable
var upL; // Up-arrow X
var upT; // Up-arrow Y
var downL; // Down-arrow X
var downT; // Down-arrow Y
var dragL; // Scrollbar X
var dragT; // Scrollbar Y
var rulerL; // Ruler X
var rulerT; // Ruler Y
var contentT; // Content layer Y;
var contentH; // Content height
var contentClipH; // Content clip height
var scrollLength; // Number of pixels scrollbar should move
var startY; // Keeps track of offset between mouse and span


// Mousedown
function down(e){
  if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton
  getMouse(e);
  startY = (mouseY - dragT);

  // If click on up-arrow
  if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){
    clickUp = true;
    return scrollUp();
  }  
  // Else if click on down-arrow
  else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){
    clickDown = true;
    return scrollDown();
  }
  // Else if click on scrollbar
  else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){
    clickDrag = true;
    return false;
  }
  else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){
    // If click above drag
    if(mouseY < dragT){
      clickAbove = true;
      clickUp = true;
      return scrollUp();
    }
    // Else click below drag
    else{
      clickBelow = true;
      clickDown = true;
      return scrollDown();
    }
  }
  // If no scrolling is to take place
  else{
    return true;
  }
}


// Drag function
function move(e){
  if(clickDrag && contentH > contentClipH){
    getMouse(e);
    dragT = (mouseY - startY);

    if(dragT < (rulerT))
      dragT = rulerT;    
    if(dragT > (rulerT + scrollH - dragH))
      dragT = (rulerT + scrollH - dragH);

    contentT = ((dragT - rulerT)*(1/scrollLength));
    contentT = eval('-' + contentT);


    moveTo();

    // So ie-pc doesn't select gifs
    if(ie4)
      return false;
  }
}


function up(){
  clearTimeout(timer);
  // Resetting variables
  clickUp = false;
  clickDown = false;
  clickDrag = false;
  clickAbove = false;
  clickBelow = false;
  return true;
}


// Reads content layer top
function getT(){
  if(ie4)
    contentT = document.all.content.style.pixelTop;
  else if(nn4)
    contentT = document.contentClip.document.content.top;
  else if(dom)
    contentT = parseInt(document.getElementById("content").style.top);
}


// Reads mouse X and Y coordinates
function getMouse(e){
  if(ie4){
    mouseY = event.clientY + document.body.scrollTop;
    mouseX = event.clientX + document.body.scrollLeft;
  }
  else if(nn4 || dom){
    mouseY = e.pageY;
    mouseX = e.pageX;
  }
}


// Moves the layer
function moveTo(){
  if(ie4){
    document.all.content.style.top = contentT;
    document.all.ruler.style.top = dragT;
    document.all.drag.style.top = dragT;
  }
  else if(nn4){
    document.contentClip.document.content.top = contentT;
    document.ruler.top = dragT;
    document.drag.top = dragT;
  }
  else if(dom){
    document.getElementById("content").style.top = contentT + "px";
    document.getElementById("drag").style.top = dragT + "px";
    document.getElementById("ruler").style.top = dragT + "px";
  }
}


// Scrolls up
function scrollUp(){
  getT();

  if(clickAbove){
    if(dragT <= (mouseY-(dragH/2)))
      return up();
  }

  if(clickUp){
    if(contentT < 0){    
      dragT = dragT - (speed*scrollLength);

      if(dragT < (rulerT))
        dragT = rulerT;

      contentT = contentT + speed;
      if(contentT > 0)
        contentT = 0;

      moveTo();
      timer = setTimeout("scrollUp()",25);
    }
  }
  return false;
}


// Scrolls down
function scrollDown(){
  getT();

  if(clickBelow){
    if(dragT >= (mouseY-(dragH/2)))
      return up();
  }


  if(clickDown){
    if(contentT > -(contentH - contentClipH)){      
      dragT = dragT + (speed*scrollLength);
      if(dragT > (rulerT + scrollH - dragH))
        dragT = (rulerT + scrollH - dragH);

      contentT = contentT - speed;
      if(contentT < -(contentH - contentClipH))
        contentT = -(contentH - contentClipH);

      moveTo();
      timer = setTimeout("scrollDown()",25);
    }
  }
  return false;
}


// reloads page to position the layers again
function reloadPage(){
  location.reload();
}


// Preload
function eventLoader(){
  if(ie4){
    // Up-arrow X and Y variables
    upL = document.all.up.style.pixelLeft;
    upT = document.all.up.style.pixelTop;    
    // Down-arrow X and Y variables
    downL = document.all.down.style.pixelLeft;
    downT = document.all.down.style.pixelTop;
    // Scrollbar X and Y variables
    dragL = document.all.drag.style.pixelLeft;
    dragT = document.all.drag.style.pixelTop;    
    // Ruler Y variable
    rulerT = document.all.ruler.style.pixelTop;    
    // Height of content layer and clip layer
    contentH = parseInt(document.all.content.scrollHeight);
    contentClipH = parseInt(document.all.contentClip.style.height);
  }
  else if(nn4){
    // Up-arrow X and Y variables
    upL = document.up.left;
    upT = document.up.top;    
    // Down-arrow X and Y variables
    downL = document.down.left;
    downT = document.down.top;    
    // Scrollbar X and Y variables
    dragL = document.drag.left;
    dragT = document.drag.top;    
    // Ruler Y variable
    rulerT = document.ruler.top;
    // Height of content layer and clip layer
    contentH = document.contentClip.document.content.clip.bottom;
    contentClipH = document.contentClip.clip.bottom;
  }
  else if(dom){
    // Up-arrow X and Y variables
    upL = parseInt(document.getElementById("up").style.left);
    upT = parseInt(document.getElementById("up").style.top);
    // Down-arrow X and Y variables
    downL = parseInt(document.getElementById("down").style.left);
    downT = parseInt(document.getElementById("down").style.top);
    // Scrollbar X and Y variables
    dragL = parseInt(document.getElementById("drag").style.left);
    dragT = parseInt(document.getElementById("drag").style.top);
    // Ruler Y variable
    rulerT = parseInt(document.getElementById("ruler").style.top);
    // Height of content layer and clip layer
    contentH = parseInt(document.getElementById("content").offsetHeight);
    contentClipH = parseInt(document.getElementById("contentClip").offsetHeight);
    document.getElementById("content").style.top = 0 + "px";

  }
  // Number of pixels scrollbar should move
  scrollLength = ((scrollH-dragH)/(contentH-contentClipH));
  // Initializes event capturing
  if(nn4){
    document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
    window.onresize = reloadPage;
  }
  document.onmousedown = down;
  document.onmousemove = move;
  document.onmouseup = up;
}
// Pop Up
function openNewWindow(URLtoOpen, windowName, windowFeatures) { newWindow=window.open(URLtoOpen, windowName, windowFeatures); }
// -->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body leftmargin="0" topmargin="0" onload="eventLoader();" marginheight="0" marginwidth="0">






<span id="up" style="position: absolute; top: 46px; left: 397px; width: 25px; height: 25px; z-index: 1;">


</span>




<span id="down" style="position: absolute; top: 395px; left: 398px; width: 25px; height: 25px; z-index: 2;">

</span>




<span id="drag" style="position: absolute; top: 50px; left: 407px; width: 6px; height: 34px; z-index: 3;">
  [img]http://www.ikilledthepromqueen.com/images/scroller.gif[/img]
</span>




<span id="ruler" style="position: absolute; top: 52px; left: 404px; width: 10px; height: 34px; z-index: 4;"></span>




<span id="contentClip" style="overflow: hidden; position: absolute; top: 10px; left: 5px; width: 381px; height: 394px; clip: rect(2px, 480px, 407px, 0px); visibility: visible; z-index: 5;">
  <span style="top: 1px;" id="content">














 






























 


































</span></span>




</body></html>

Alles anzeigen

hab nen arsch voll
da reingesetzt, damit du siehst wie man des scrollt...
jetzt musste nur noch nen background haben wo sowas scrollbar-ähnliches is und kannst das gif darauf auf und ab scrollen(denke ich zumindest )

Damiön

xD ich check nix lol

mach ichs halt einfach im flash, da weiß ich wies geht

Scrollbar transparent mit Hintergrundbild!?

Tags

Benutzer online in diesem Thema