Kompatibilität: Ms Internet Explorer, Netscape In einem Fenster sind verschiedene Links vorhanden. Beim klicken von einem Link, wird im selben Dokument ein neues Dokument geöffnet. Die Files werden separat geöffnet und sind als Zip-files vorhanden.
<!-- www.HTMLopen.de --><HTML> <HEAD><!-- Dieses HTML code wird gratis von HTMLopen zur Verfügung gestellt --><TITLE>HTMLopen - Dynamic HTML Beispiele</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--n = (document.layers) ? 1:0 ie = (document.all) ? 1:0// Scroll Bar Setup Variables scrollLeft = 100 scrollTop = 190 scrollNestLeft = 0 // left position of parent layer, 0 if none scrollNestTop = 0 // top position of parent layer 0 if none scrollWidth = 400 scrollHeight = 180 scrollBarWidth = 12 scrollBoxHeight = 30 scrollArrowHeight = 12 scrollMarginLeft = 10 scrollMarginRight = 10 scrollMarginTop = 10 scrollMarginBottom = 10 scrollBorder = 1// width of the border, set to 0 for no border scrollBorderColor = "#000000" scrollBarColor = "#B0C1D2" scrollBoxColor = "#156FAA" // use "none" for transparent scrollArrowColor = "#808080" scrollTextBGColor = "#FFFFFF" scrollFirstPage = "images/text1.html"// Scroll Bar Miscellaneous Variables scrollLoaded = 0 scrollActive = 0 scrollArrowActive = 0 scrollDownActive = 0 scrollYold = 0 scrollClickY = 0 scrollBarHeight = scrollHeight-2*scrollBorder-scrollBoxHeight-scrollArrowHeightfunction init() { document.onmousedown = mouseDown document.onmousemove = mouseMove document.onmouseup = mouseUp if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) }function mouseDown(e) { if ((n && e.which == 1) || ie) { if (n) {var x=e.pageX; var y=e.pageY} if (ie) {var x=event.x; var y=event.y} scrollMouseDown(x,y) } }function mouseMove(e) { if (n) {var x=e.pageX; var y=e.pageY} if (ie) {var x=event.x; var y=event.y} if (scrollLoaded && scrollActive) { scrollMouseMove(x,y) } if (scrollActive || scrollArrowActive) return false }function mouseUp(e) { scrollActive = 0 scrollArrowActive = 0 scrollDownActive = 0 }function scrollMouseDown(x,y) { if (scrollLoaded && scrollFactor<0 && x>=scrollLeft+scrollNestLeft+scrollWidth-scrollBarWidth-scrollBorder && x<(scrollLeft+scrollNestLeft)+scrollWidth-scrollBorder && y>=(scrollTop+scrollNestTop)+scrollBorder && y<(scrollTop+scrollNestTop)+scrollHeight-scrollBorder) { if (y>=scrollTop+scrollNestTop+scrollBorder+scrollbox.y && y<(scrollTop+scrollNestTop)+scrollBorder+scrollBoxHeight+scrollbox.y) {// scrollbox scrollClickY = y-scrollbox.y scrollYold = y scrollActive = 1 } else if (y<scrollTop+scrollNestTop+scrollBorder+scrollArrowHeight) {// up arrow scrollArrowActive = 1 scrollArrowDir = 1 scrollArrowSlide() } else if (y>=scrollTop+scrollNestTop+scrollHeight-scrollBorder-scrollArrowHeight) {// down arrow scrollArrowActive = 1 scrollArrowDir = -1 scrollArrowSlide() } else { if (y<=scrollTop+scrollNestTop+scrollBorder+scrollArrowHeight+scrollBoxHeight/2) {// jump top scrollbox.moveTo(0,scrollArrowHeight) } else if (y>scrollTop+scrollNestTop+scrollHeight-scrollBorder-scrollArrowHeight-scrollBoxHeight/2) {// jump bottom scrollbox.moveTo(0,scrollBarHeight) } else { // jump middle scrollbox.moveTo(0,y-scrollTop-scrollNestTop-scrollBorder-scrollBoxHeight/2) } scrolltext.moveTo(scrolltext.x,scrollFactor*(scrollbox.y-scrollArrowHeight)+scrollMarginTop) scrollClickY = y-scrollbox.y scrollYold = y scrollActive = 1 } } }function scrollMouseMove(x,y) { var diff = y-scrollYold if ((scrollbox.y>scrollArrowHeight && scrollbox.y<scrollBarHeight) || (scrollbox.y==scrollArrowHeight && diff>=0) || (scrollbox.y==scrollBarHeight && diff<=0)) { if ((scrollbox.y>scrollArrowHeight && scrollbox.y+diff<scrollArrowHeight) || (scrollbox.y<scrollBarHeight && scrollbox.y+diff>scrollBarHeight)) { if (scrollbox.y+diff<scrollArrowHeight) scrollbox.moveTo(0,scrollArrowHeight) else if (scrollbox.y+diff>scrollBarHeight) scrollbox.moveTo(0,scrollBarHeight) scrollYold = scrollbox.y+scrollClickY } else { scrollbox.moveTo(0,y-scrollClickY) scrollYold = y } scrolltext.moveTo(scrolltext.x,scrollFactor*(scrollbox.y-scrollArrowHeight)+scrollMarginTop) } }function scrollArrowSlide() { if (scrollArrowActive) { if ((scrollArrowDir==1 && scrolltext.y<scrollMarginTop-5) || (scrollArrowDir==-1 && scrolltext.y>-(scrolltext.height+2*scrollBorder+scrollMarginBottom-scrollHeight-5))) { scrolltext.moveBy(0,scrollArrowDir*5) scrollbox.moveTo(0,(scrolltext.y-scrollMarginTop)/scrollFactor+scrollArrowHeight) setTimeout("scrollArrowSlide()",20) } else { if (scrollArrowDir==1) scrolltext.moveTo(scrolltext.x,scrollMarginTop) else if (scrollArrowDir==-1) scrolltext.moveTo(scrolltext.x,-(scrolltext.height+2*scrollBorder+scrollMarginBottom-scrollHeight)) scrollbox.moveTo(0,(scrolltext.y-scrollMarginTop)/scrollFactor+scrollArrowHeight) } } } function loadSource(page) { scrollLoaded = 0 if (n) document.scrollWindow.document.scrollTextWindow.src = page if (ie) parent.scrollTextFrame.document.location = page } function scrollResize() { scrolltext = new dynLayer("scrollTextDiv","scrollWindow.document.scrollTextWindow","scrollTextFrame") scrollbox = new dynLayer("scrollBoxDiv","scrollWindow.document.scrollBar") scrollFactor = -(scrolltext.height+scrollMarginTop+scrollMarginBottom-scrollHeight+2*scrollBorder)/(scrollBarHeight-scrollArrowHeight) scrollbox.moveTo(0,scrollArrowHeight) scrollLoaded = 1 } // Dynamic Layer Object with width and height and frameref (for IE) function dynLayer(id,nestref,frameref) { if (n) { if (nestref) { this.css = eval("document." + nestref + ".document." + id) this.ref = eval("document." + nestref + ".document." + id + ".document") } else { this.css = document.layers[id] this.ref = document.layers[id].document } this.x = this.css.left this.y = this.css.top this.width = this.ref.width this.height = this.ref.height } else if (ie) { if (frameref) { this.css = parent.frames[frameref].document.all[id].style this.ref = parent.frames[frameref].document } else { this.css = document.all[id].style this.ref = document } this.x = this.css.pixelLeft this.y = this.css.pixelTop this.width = this.ref.all[id].offsetWidth this.height = this.ref.all[id].offsetHeight } this.obj = id + "Object" eval(this.obj + "=this") this.moveBy = dynLayerMoveBy this.moveTo = dynLayerMoveTo this.show = dynLayerShow this.hide = dynLayerHide } function dynLayerMoveBy(x,y) { this.x += x this.css.left = this.x this.y += y this.css.top = this.y } function dynLayerMoveTo(x,y) { this.x = x this.css.left = this.x this.y = y this.css.top = this.y } function dynLayerShow() { if (n) this.css.visibility = "show" else if (ie) this.css.visibility = "visible" } function dynLayerHide() { if (n) this.css.visibility = "hide" else if (ie) this.css.visibility = "hidden" } //--> </SCRIPT> </HEAD> <BODY onLoad="init()"> <A HREF="javascript:loadSource('images/text1.html')">Link 1</A> <A HREF="javascript:loadSource('images/text2.html')">Link 2</A> <A HREF="javascript:loadSource('images/text3.html')">Link 3</A> <SCRIPT LANGUAGE="JavaScript"> document.writeln('<STYLE TYPE="text/css">'); document.writeln('<\!--'); document.writeln('#scrollWindow {position:absolute; left:'+scrollLeft+'; top:'+scrollTop+'; width:'+scrollWidth+'; height:'+scrollHeight+'; clip:rect(0,'+scrollWidth+','+scrollHeight+',0);}'); document.writeln('#scrollBorderTop {position:absolute; left:0; top:0; width:'+scrollWidth+'; height:'+scrollBorder+'; clip:rect(0,'+scrollWidth+','+scrollBorder+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}'); document.writeln('#scrollBorderBottom {position:absolute; left:0; top:'+(scrollHeight-scrollBorder)+'; width:'+scrollWidth+'; height:'+scrollBorder+'; clip:rect(0,'+scrollWidth+','+scrollBorder+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}'); document.writeln('#scrollBorderLeft {position:absolute; left:0; top:0; width:'+scrollBorder+'; height:'+scrollHeight+'; clip:rect(0,'+scrollBorder+','+scrollHeight+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}'); document.writeln('#scrollBorderRight {position:absolute; left:'+(scrollWidth-scrollBorder)+'; top:0; width:'+scrollBorder+'; height:'+scrollHeight+'; clip:rect(0,'+scrollBorder+','+scrollHeight+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}'); if (ie) document.writeln('#scrollTextWindow {position:absolute; left:'+scrollBorder+'; top:'+scrollBorder+'; width:'+(scrollWidth-scrollBarWidth-2*scrollBorder)+'; height:'+(scrollHeight-2*scrollBorder)+'; clip:rect(0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+',0); background-color:'+scrollTextBGColor+'; layer-background-color:'+scrollTextBGColor+';}'); document.writeln('#scrollBar {position:absolute; left:'+(scrollWidth-scrollBarWidth-scrollBorder)+'; top:'+scrollBorder+'; width:'+scrollBarWidth+'; height:'+(scrollHeight-2*scrollBorder)+'; clip:rect(0,'+scrollBarWidth+','+(scrollHeight-2*scrollBorder)+',0); background-color:'+scrollBarColor+'; layer-background-color:'+scrollBarColor+';}'); if (scrollBoxColor=="none") document.writeln('#scrollBoxDiv {position:absolute; left:0; top:0; width:'+scrollBarWidth+'; height:'+scrollBoxHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollBoxHeight+',0);}'); else document.writeln('#scrollBoxDiv {position:absolute; left:0; top:'+scrollArrowHeight+'; width:'+scrollBarWidth+'; height:'+scrollBoxHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollBoxHeight+',0); background-color:'+scrollBoxColor+'; layer-background-color:'+scrollBoxColor+';}'); document.writeln('#scrollArrowUpDiv {position:absolute; left:0; top:0; width:'+scrollBarWidth+'; height:'+scrollArrowHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollArrowHeight+',0); background-color:'+scrollArrowColor+'; layer-background-color:'+scrollArrowColor+';}'); document.writeln('#scrollArrowDownDiv {position:absolute; left:0; top:'+(scrollHeight-2*scrollBorder-scrollArrowHeight)+'; width:'+scrollBarWidth+'; height:'+scrollArrowHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollArrowHeight+',0); background-color:'+scrollArrowColor+'; layer-background-color:'+scrollArrowColor+';}'); document.writeln('-->'); document.writeln('</STYLE>'); </SCRIPT> <DIV ID="scrollWindow"> <DIV ID="scrollBar"> <DIV ID="scrollBoxDiv"></DIV> <DIV ID="scrollArrowUpDiv"></DIV> <DIV ID="scrollArrowDownDiv"></DIV> </DIV> <DIV ID="scrollBorderTop"></DIV> <DIV ID="scrollBorderBottom"></DIV> <DIV ID="scrollBorderLeft"></DIV> <DIV ID="scrollBorderRight"></DIV> <SCRIPT LANGUAGE="JavaScript"> if (n) document.writeln('<LAYER NAME="scrollTextWindow" SRC="'+scrollFirstPage+'" LEFT='+scrollBorder+' TOP='+scrollBorder+' WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+' HEIGHT='+(scrollHeight-2*scrollBorder)+' CLIP="0,0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+'" BGCOLOR="'+scrollTextBGColor+'"></LAYER>') if (ie) document.writeln('<DIV ID="scrollTextWindow"><IFRAME NAME="scrollTextFrame" SRC="'+scrollFirstPage+'" WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+' HEIGHT='+(scrollHeight-2*scrollBorder)+' MARGINWIDTH=0 MARGINHEIGHT=0 FRAMEBORDER="No" SCROLLING="No"></IFRAME></DIV>') </SCRIPT> </DIV> </BODY> </html> <!-- www.HTMLopen.de -->
[File ZIP runterladen], Bilder und andere Files sind im ZIP file inbegriffen
