Ergebnis 1 bis 4 von 4

Thema: Scrollbar transparent mit Hintergrundbild!?

  1. #1
    Damiön
    Gast

    Standard Scrollbar transparent mit Hintergrundbild!?

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

  3. #3
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

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


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html><head><title>NL news</title>
    
    
    
      
      <style type="text/css" media="screen">
      <!--
    .ad &#123; text-align&#58; left; vertical-align&#58; middle; &#125;
    body &#123;
    	background&#58;  url&#40;../iframe/images/newsback.gif&#41;;
    	color&#58; #c0a458;
    	font-size&#58; 11px;
    	font-family&#58; Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    	background-image&#58;  url&#40;images/deceased_08.gif&#41;;
    	background-color&#58; #FFFFFF;
    &#125;
    table &#123; color&#58; #c0a458; font-size&#58; 11px; font-family&#58; Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; &#125;
    strong &#123; color&#58; #fff; font-weight&#58; bold; &#125;
    img &#123;border&#58; 0px;&#125;
     #content &#123;
    	position&#58; absolute;
    	width&#58; 381px;
    	height&#58; 1067px;
    &#125;
    a&#58;link &#123; color&#58; #666666; text-decoration&#58; none; &#125;
    a&#58;visited &#123; color&#58; #333333; text-decoration&#58; none; &#125;
    a&#58;hover &#123; color&#58; #9e1d20; text-decoration&#58; underline; &#125;
    a&#58;active &#123; text-decoration&#58; none; &#125;
    body,td,th &#123;
    	font-family&#58; Tahoma, Geneva, Arial, SunSans-Regular, sans-serif;
    	font-size&#58; 9px;
    	color&#58; #000000;
    &#125;
    .style1 &#123;
    	color&#58; #9e1d20;
    	font-weight&#58; bold;
    &#125;
    --></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 &#58;
    // If ie4.5 mac, please press apple-t to remove sidebar, otherwise everything is pushed 20px to the right...
    
    // Corrected bugs &#58;
    // 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 &#58; move&#40;&#41;
    // 21.02.2001 - Scrolling text wasn't selectable in ie, function changed &#58; move&#40;&#41;
    // 05.03.2001 - Ie x and y coordinates was wrong when page was scrolled, function changed &#58; getMouse&#40;&#41;
    
    // 19.04.2001 - Finally able to remove browser-scrollbar if content is longer than the browser is high&#58;
    // Just put this in the style-tag right before the end head-tag&#58;
    // body &#123;margin-left&#58;0; margin-right&#58;0; margin-top&#58;0; margin-bottom&#58;0; width&#58;100%;height&#58;100%;overflow&#58;hidden&#125;
    
    // Touch me here &#58;-&#41;
    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&#58;false;
    var nn4 = document.layers ? true&#58;false;
    var ie4 = document.all ? true&#58;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&#40;"",500&#41;; // 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&#40;e&#41;&#123;
      if&#40;&#40;document.layers && e.which!=1&#41; || &#40;document.all && event.button!=1&#41;&#41; return true; // Enables the right mousebutton
      getMouse&#40;e&#41;;
      startY = &#40;mouseY - dragT&#41;;
      
      // If click on up-arrow
      if&#40;mouseX >= upL && &#40;mouseX <= &#40;upL + upW&#41;&#41; && mouseY >= upT && &#40;mouseY <= &#40;upT + upH&#41;&#41;&#41;&#123;
        clickUp = true;
        return scrollUp&#40;&#41;;
      &#125;  
      // Else if click on down-arrow
      else if&#40;mouseX >= downL && &#40;mouseX <= &#40;downL + downW&#41;&#41; && mouseY >= downT && &#40;mouseY <= &#40;downT + downH&#41;&#41;&#41;&#123;
        clickDown = true;
        return scrollDown&#40;&#41;;
      &#125;
      // Else if click on scrollbar
      else if&#40;mouseX >= dragL && &#40;mouseX <= &#40;dragL + dragW&#41;&#41; && mouseY >= dragT && &#40;mouseY <= &#40;dragT + dragH&#41;&#41;&#41;&#123;
        clickDrag = true;
        return false;
      &#125;
      else if&#40;mouseX >= dragL && &#40;mouseX <= &#40;dragL + dragW&#41;&#41; && mouseY >= rulerT && &#40;mouseY <= &#40;rulerT + scrollH&#41;&#41;&#41;&#123;
        // If click above drag
        if&#40;mouseY < dragT&#41;&#123;
          clickAbove = true;
          clickUp = true;
          return scrollUp&#40;&#41;;
        &#125;
        // Else click below drag
        else&#123;
          clickBelow = true;
          clickDown = true;
          return scrollDown&#40;&#41;;
        &#125;
      &#125;
      // If no scrolling is to take place
      else&#123;
        return true;
      &#125;
    &#125;
    
    // Drag function
    function move&#40;e&#41;&#123;
      if&#40;clickDrag && contentH > contentClipH&#41;&#123;
        getMouse&#40;e&#41;;
        dragT = &#40;mouseY - startY&#41;;
        
        if&#40;dragT < &#40;rulerT&#41;&#41;
          dragT = rulerT;    
        if&#40;dragT > &#40;rulerT + scrollH - dragH&#41;&#41;
          dragT = &#40;rulerT + scrollH - dragH&#41;;
        
        contentT = &#40;&#40;dragT - rulerT&#41;*&#40;1/scrollLength&#41;&#41;;
        contentT = eval&#40;'-' + contentT&#41;;
    
        moveTo&#40;&#41;;
        
        // So ie-pc doesn't select gifs
        if&#40;ie4&#41;
          return false;
      &#125;
    &#125;
    
    function up&#40;&#41;&#123;
      clearTimeout&#40;timer&#41;;
      // Resetting variables
      clickUp = false;
      clickDown = false;
      clickDrag = false;
      clickAbove = false;
      clickBelow = false;
      return true;
    &#125;
    
    // Reads content layer top
    function getT&#40;&#41;&#123;
      if&#40;ie4&#41;
        contentT = document.all.content.style.pixelTop;
      else if&#40;nn4&#41;
        contentT = document.contentClip.document.content.top;
      else if&#40;dom&#41;
        contentT = parseInt&#40;document.getElementById&#40;"content"&#41;.style.top&#41;;
    &#125;
    
    // Reads mouse X and Y coordinates
    function getMouse&#40;e&#41;&#123;
      if&#40;ie4&#41;&#123;
        mouseY = event.clientY + document.body.scrollTop;
        mouseX = event.clientX + document.body.scrollLeft;
      &#125;
      else if&#40;nn4 || dom&#41;&#123;
        mouseY = e.pageY;
        mouseX = e.pageX;
      &#125;
    &#125;
    
    // Moves the layer
    function moveTo&#40;&#41;&#123;
      if&#40;ie4&#41;&#123;
        document.all.content.style.top = contentT;
        document.all.ruler.style.top = dragT;
        document.all.drag.style.top = dragT;
      &#125;
      else if&#40;nn4&#41;&#123;
        document.contentClip.document.content.top = contentT;
        document.ruler.top = dragT;
        document.drag.top = dragT;
      &#125;
      else if&#40;dom&#41;&#123;
        document.getElementById&#40;"content"&#41;.style.top = contentT + "px";
        document.getElementById&#40;"drag"&#41;.style.top = dragT + "px";
        document.getElementById&#40;"ruler"&#41;.style.top = dragT + "px";
      &#125;
    &#125;
    
    // Scrolls up
    function scrollUp&#40;&#41;&#123;
      getT&#40;&#41;;
      
      if&#40;clickAbove&#41;&#123;
        if&#40;dragT <= &#40;mouseY-&#40;dragH/2&#41;&#41;&#41;
          return up&#40;&#41;;
      &#125;
      
      if&#40;clickUp&#41;&#123;
        if&#40;contentT < 0&#41;&#123;    
          dragT = dragT - &#40;speed*scrollLength&#41;;
          
          if&#40;dragT < &#40;rulerT&#41;&#41;
            dragT = rulerT;
            
          contentT = contentT + speed;
          if&#40;contentT > 0&#41;
            contentT = 0;
          
          moveTo&#40;&#41;;
          timer = setTimeout&#40;"scrollUp&#40;&#41;",25&#41;;
        &#125;
      &#125;
      return false;
    &#125;
    
    // Scrolls down
    function scrollDown&#40;&#41;&#123;
      getT&#40;&#41;;
      
      if&#40;clickBelow&#41;&#123;
        if&#40;dragT >= &#40;mouseY-&#40;dragH/2&#41;&#41;&#41;
          return up&#40;&#41;;
      &#125;
    
      if&#40;clickDown&#41;&#123;
        if&#40;contentT > -&#40;contentH - contentClipH&#41;&#41;&#123;      
          dragT = dragT + &#40;speed*scrollLength&#41;;
          if&#40;dragT > &#40;rulerT + scrollH - dragH&#41;&#41;
            dragT = &#40;rulerT + scrollH - dragH&#41;;
          
          contentT = contentT - speed;
          if&#40;contentT < -&#40;contentH - contentClipH&#41;&#41;
            contentT = -&#40;contentH - contentClipH&#41;;
          
          moveTo&#40;&#41;;
          timer = setTimeout&#40;"scrollDown&#40;&#41;",25&#41;;
        &#125;
      &#125;
      return false;
    &#125;
    
    // reloads page to position the layers again
    function reloadPage&#40;&#41;&#123;
      location.reload&#40;&#41;;
    &#125;
    
    // Preload
    function eventLoader&#40;&#41;&#123;
      if&#40;ie4&#41;&#123;
        // 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&#40;document.all.content.scrollHeight&#41;;
        contentClipH = parseInt&#40;document.all.contentClip.style.height&#41;;
      &#125;
      else if&#40;nn4&#41;&#123;
        // 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;
      &#125;
      else if&#40;dom&#41;&#123;
        // Up-arrow X and Y variables
        upL = parseInt&#40;document.getElementById&#40;"up"&#41;.style.left&#41;;
        upT = parseInt&#40;document.getElementById&#40;"up"&#41;.style.top&#41;;
        // Down-arrow X and Y variables
        downL = parseInt&#40;document.getElementById&#40;"down"&#41;.style.left&#41;;
        downT = parseInt&#40;document.getElementById&#40;"down"&#41;.style.top&#41;;
        // Scrollbar X and Y variables
        dragL = parseInt&#40;document.getElementById&#40;"drag"&#41;.style.left&#41;;
        dragT = parseInt&#40;document.getElementById&#40;"drag"&#41;.style.top&#41;;
        // Ruler Y variable
        rulerT = parseInt&#40;document.getElementById&#40;"ruler"&#41;.style.top&#41;;
        // Height of content layer and clip layer
        contentH = parseInt&#40;document.getElementById&#40;"content"&#41;.offsetHeight&#41;;
        contentClipH = parseInt&#40;document.getElementById&#40;"contentClip"&#41;.offsetHeight&#41;;
        document.getElementById&#40;"content"&#41;.style.top = 0 + "px";
        
      &#125;
      // Number of pixels scrollbar should move
      scrollLength = &#40;&#40;scrollH-dragH&#41;/&#40;contentH-contentClipH&#41;&#41;;
      // Initializes event capturing
      if&#40;nn4&#41;&#123;
        document.captureEvents&#40;Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP&#41;;
        window.onresize = reloadPage;
      &#125;
      document.onmousedown = down;
      document.onmousemove = move;
      document.onmouseup = up;
    &#125;
    // Pop Up
    function openNewWindow&#40;URLtoOpen, windowName, windowFeatures&#41; &#123; newWindow=window.open&#40;URLtoOpen, windowName, windowFeatures&#41;; &#125;
    // -->
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body leftmargin="0" topmargin="0" onload="eventLoader&#40;&#41;;" marginheight="0" marginwidth="0">
    
    
    
    <span id="up" style="position&#58; absolute; top&#58; 46px; left&#58; 397px; width&#58; 25px; height&#58; 25px; z-index&#58; 1;">
    
    </span>
    
    
    <span id="down" style="position&#58; absolute; top&#58; 395px; left&#58; 398px; width&#58; 25px; height&#58; 25px; z-index&#58; 2;">
      
    </span>
    
    
    <span id="drag" style="position&#58; absolute; top&#58; 50px; left&#58; 407px; width&#58; 6px; height&#58; 34px; z-index&#58; 3;">
      [img]http&#58;//www.ikilledthepromqueen.com/images/scroller.gif[/img]
    </span>
    
    
    <span id="ruler" style="position&#58; absolute; top&#58; 52px; left&#58; 404px; width&#58; 10px; height&#58; 34px; z-index&#58; 4;"></span>
    
    
    <span id="contentClip" style="overflow&#58; hidden; position&#58; absolute; top&#58; 10px; left&#58; 5px; width&#58; 381px; height&#58; 394px; clip&#58; rect&#40;2px, 480px, 407px, 0px&#41;; visibility&#58; visible; z-index&#58; 5;">
      <span style="top&#58; 1px;" id="content">
         
    	
    
    
    
    
    
    
     
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
     
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </span></span>
    
    
    </body></html>
    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 )
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    Damiön
    Gast

    Standard

    xD ich check nix lol

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

Ähnliche Themen

  1. Wie Hintergrundbild transparent erscheinen lassen?
    Von Ichthys im Forum HTML & CSS Forum
    Antworten: 18
    Letzter Beitrag: 16.07.2007, 00:36
  2. transparent!!!!!!!!!!!!!!!!!!
    Von nosferatu00 im Forum HTML & CSS Forum
    Antworten: 19
    Letzter Beitrag: 14.12.2006, 17:07
  3. Halllo Hilfe wegen Scrollbar transparent
    Von Liroma im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 12.10.2006, 08:49
  4. Transparent
    Von WWKiller im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 21
    Letzter Beitrag: 21.07.2006, 22:11
  5. transparent
    Von IpOperator im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 03.04.2006, 19:39

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •