Ähnlich
einem Iframe lassen sich mit diesem Script Inhalte in einen CSS- Layer
laden und scrollen. Als besonderer Effekt werden die Inhalte beim Laden
in den Layer wahlweise gefaded oder geslided. Es lassen sich allerdings
keine externen Inhalte laden (siehe hierzu auch LoadHTML )
[ zwischen <HEAD> und </HEAD>]
<style
type="text/css">
a {font-family:verdana,arial,helvetica,sans-serif;
font-size:11px; color:#666666; text-decoration:none;}
a:hover
{text-decoration:underline; color:#cccccc;}
body {background-color:#ffffff;
color:#999999; font-size:11px; font-family:verdana,arial,helvetica,sans-serif;
line-height:15px;}
#divScroller1
{position:absolute; overflow:hidden; z-index:9; left:100px; top:90px; width:400px;
height:300px; clip:rect(0px, 400px, 300px, 0px); visbility:visible; border-width:0px
0px 0px 1px; border-color:#666666; border-style:dashed;}
.dynPage
{position:absolute; z-index:10; left:0px; top:0px; width:385px; visibility:hidden;
padding-left:15px; font-family:arial,helvetica,sans-serif; font-size:10px;
line-height:14px; color:black}
#arrows
{position:absolute; z-index:11; left:74px; top:355px; width:20px;}
#links
{position:absolute; z-index:11; left:77px; top:301px; width:20px;}
</style>
language="JavaScript" type="text/javascript">
/**********************************************************************************
PageSlideFade
* Copyright (C) 2001 <a href="/dhtmlcentral/michael_van_ouwerkerk.asp">Michael
van Ouwerkerk</a>
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by <a href="/dhtmlcentral/michael_van_ouwerkerk.asp">Michael van Ouwerkerk</a>
*********************************************************************************/
function
lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera
5")>-1
this.ie5=(this.ver.indexOf("MSIE
5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE
6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all
&& !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom
&& parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers
&& !this.dom)?1:0;
this.bw=(this.ie6
|| this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return
this
}
var bw=new
lib_bwcheck()
/*** konfigurierbare
Variablen... ***/
var numScrollPages
= 3 /*Anzahl
der Seiten (Layers). Passen Sie die Div- Bereiche im Bodybereich entsprechend
an. Der erste Layer ist dynPage0, der zweite dynPage1, und so weiter.*/
var transitionOut
= 1; //Der
'out' Effekt... 0= kein Effekt, 1= fade
var transitionIn
= 2; //Der
'in' Effekt... 0= kein Efekt, 1= fade, 2= slide
var slideAcceleration
= 0.2; //Wenn der Slide Effekt
verwendet wird, setzen Sie irgendwas zwischen 0 und 1 ein.
var transitionOnload
= 1 /*Wenn
der 'in' Effekt nur verwendet werden soll, wenn ein Link geklickt wird,
setzen Sie hier 0 ein*/
// NOTE:
Wenn Sie die Position des divScroller1 von absolute nach relative ändern,
können Sie den Scroller in eine Tabelle einsetzen.
// Das
geht allerdings nicht in Netscape 4, hier müssen Sie die absolute
Positionierung verwenden.
// Die Effekte
(Fade, Slide) funktionieren übrigens nicht bei NS4 und IE4, oder Explorers
auf Mac!
/*** Ab
hier muss nichts mehr verändert werden (deshalb auch keine Übersetzung
mehr ;-) ***/
// A unit
of measure that will be added when setting the position of a layer.
var px
= bw.ns4||window.opera?"":"px";
if(document.layers){
//NS4 resize fix...
scrX=
innerWidth; scrY= innerHeight;
onresize=
function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }
}
//object
constructor...
function
scrollerobj(obj,nest){
nest
= (!nest)?"":'document.'+nest+'.'
this.elm
= bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj)
this.css
= bw.ns4?this.elm:this.elm.style
this.doc
= bw.ns4?this.elm.document:document
this.obj
= obj+'scrollerobj'; eval(this.obj+'=this')
this.x
= (bw.ns4||bw.opera5)?this.css.left:this.elm.offsetLeft
this.y
= (bw.ns4||bw.opera5)?this.css.top:this.elm.offsetTop
this.w
= (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetWidth:bw.ns4?this.elm.clip.width:bw.opera5?this.css.pixelWidth:0
this.h
= (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetHeight:bw.ns4?this.elm.clip.height:bw.opera5?this.css.pixelHeight:0
}
//object
methods...
scrollerobj.prototype.moveTo
= function(x,y){
if(x!=null){this.x=x;
this.css.left=x+px}
if(y!=null){this.y=y;
this.css.top=y+px}
}
scrollerobj.prototype.moveBy
= function(x,y){this.moveTo(this.x+x,this.y+y)}
scrollerobj.prototype.hideIt
= function(){this.css.visibility='hidden'}
scrollerobj.prototype.showIt
= function(){this.css.visibility='visible'}
/****************************************************************
scroll functions...
****************************************************************/
var scrollTimer
= null;
function
scroll(step){
clearTimeout(scrollTimer);
if
( !busy && (step<0&&activePage.y+activePage.h>scroller1.h
|| step>0&&activePage.y<0) ){
activePage.moveBy(0,step);
scrollTimer = setTimeout('scroll('+step+')',40);
}
}
function
stopScroll(){
clearTimeout(scrollTimer);
}
/****************************************************************
activating the correct layers...
****************************************************************/
var activePage
= null;
var busy
= 0;
function
activate(num){
if
(activePage!=pages[num] && !busy){
busy = 1;
if (transitionOut==0 || !bw.opacity){ activePage.hideIt(); activateContinue(num);
}
else if (transitionOut==1) activePage.blend('hidden', 'activateContinue('+num+')');
}
}
function
activateContinue(num){
busy
= 1;
activePage
= pages[num];
activePage.moveTo(0,0);
if
(transitionIn==0 || !bw.opacity){ activePage.showIt(); busy=0; }
else
if (transitionIn==1) activePage.blend('visible', 'busy=0');
else
if (transitionIn==2) activePage.slide(0, slideAcceleration, 40, 'busy=0');
}
/****************************************************************
Slide methods...
****************************************************************/
scrollerobj.prototype.slide
= function(target, acceleration, time, fn){
this.slideFn=
fn?fn:null;
this.moveTo(0,scroller1.h);
if
(bw.ie4&&!bw.mac) this.css.filter = 'alpha(opacity=100)';
if
(bw.ns6) this.css.MozOpacity = 1;
this.showIt();
this.doSlide(target,
acceleration, time);
}
scrollerobj.prototype.doSlide
= function(target, acceleration, time){
this.step
= Math.round(this.y*acceleration);
if
(this.step<1) this.step = 1;
if
(this.step>this.y) this.step = this.y;
this.moveBy(0,
-this.step);
if
(this.y>0) this.slideTim = setTimeout(this.obj+'.doSlide('+target+','+acceleration+','+time+')',
time);
else
{
eval(this.slideFn);
this.slideFn = null;
}
}
/****************************************************************
Opacity methods...
****************************************************************/
scrollerobj.prototype.blend=
function(vis, fn){
if
(bw.ie5||bw.ie6 && !bw.mac) {
if (vis=='visible') this.css.filter= 'blendTrans(duration=0.9)';
else this.css.filter= 'blendTrans(duration=0.6)';
this.elm.onfilterchange = function(){ eval(fn); };
this.elm.filters.blendTrans.apply();
this.css.visibility= vis;
this.elm.filters.blendTrans.play();
}
else
if (bw.ns6 || bw.ie&&!bw.mac){
this.css.visibility= 'visible';
vis=='visible' ? this.fadeTo(100, 7, 40, fn) : this.fadeTo(0, 9, 40, fn);
}
else
{
this.css.visibility= vis;
eval(fn);
}
};
scrollerobj.prototype.op=
100;
scrollerobj.prototype.opacityTim=
null;
scrollerobj.prototype.setOpacity=
function(num){
this.css.filter=
'alpha(opacity='+num+')';
this.css.MozOpacity=
num/100;
this.op=
num;
}
scrollerobj.prototype.fadeTo=
function(target, step, time, fn){
clearTimeout(this.opacityTim);
this.opacityFn=
fn?fn:null;
this.op
= target==100 ? 0 : 100;
this.fade(target,
step, time);
}
scrollerobj.prototype.fade=
function(target, step, time){
if
(Math.abs(target-this.op)>step){
target>this.op? this.setOpacity(this.op+step):this.setOpacity(this.op-step);
this.opacityTim= setTimeout(this.obj+'.fade('+target+','+step+','+time+')',
time);
}
else
{
this.setOpacity(target);
eval(this.opacityFn);
this.opacityFn= null;
}
}
/**************************************************************
Init function...
**************************************************************/
var pageslidefadeLoaded
= 0;
function
initPageSlideFade(){
scroller1
= new scrollerobj('divScroller1');
pages
= new Array();
for
(var i=0; i<numScrollPages; i++){
pages[i] = new scrollerobj('dynPage'+i, 'divScroller1');
pages[i].moveTo(0,0);
}
bw.opacity
= ( bw.ie && !bw.ie4 && navigator.userAgent.indexOf('Windows')>-1
) || bw.ns6
if
(bw.ie5||bw.ie6 && !bw.mac) pages[0].css.filter= 'blendTrans(duration=0.6)';
// Preloads the windows filters.
if
(transitionOnload) activateContinue(0);
else{
activePage = pages[0];
activePage.showIt();
}
if
(bw.ie) for(var i=0;i<document.links.length;i++) document.links[i].onfocus=document.links[i].blur;
pageslidefadeLoaded
= 1;
}
//if the
browser is ok, the script is started onload..
if(bw.bw
&& !pageslidefadeLoaded) onload = initPageSlideFade;
</script>
[ zwischen
<BODY> und </BODY>]
<div id="divScroller1">
<div
id="dynPage0" class="dynPage">
The Cask
of Amontillado<br><br>by Edgar Allan Poe<br><br>...<br><br>The
thousand injuries of Fortunato I had borne as I best could, but when he
ventured upon insult, I vowed revenge. You, who so well know the nature
of my soul, will not suppose, however, that I gave utterance to a threat.
At length I would be avenged; this was a point definitely settled--but
the very definitiveness with which it was resolved, precluded the idea
of risk. I must not only punish, but punish with impunity. A wrong is unredressed
when retribution overtakes its redresser. It is equally unredressed when
the avenger fails to make himself felt as such to him who has done the
wrong.<br><br>It must be understood that neither by word nor deed
had I given Fortunato cause to doubt my good will. I continued, as was
my wont, to smile in his face, and he did not perceive that my smile now
was at the thought of his immolation.<br><br>He had a weak point--this
Fortunato--although in other regards he was a man to be respected and even
feared. He prided himself on his connoisseurship in wine. Few Italians
have the true virtuoso spirit. For the most part their enthusiasm is adopted
to suit the time and opportunity-- to practise imposture upon the British
and Austrian millionaires. In painting and gemmary, Fortunato, like his
countrymen, was a quack-- but in the matter of old wines he was sincere.
In this respect I did not differ from him materially: I was skillful in
the Italian vintages myself, and bought largely whenever I could.<br><br>It
was about dusk, one evening during the supreme madness of the carnival
season, that I encountered my friend. He accosted me with excessive warmth,
for he had been drinking much. The man wore motley. He had on a tight-fitting
parti-striped dress, and his head was surmounted by the conical cap and
bells. I was so pleased to see him, that I thought I should never have
done wringing his hand.<br><br>I said to him--"My dear Fortunato,
you are luckily met. How remarkably well you are looking to-day! But I
have received a pipe of what passes for Amontillado, and I have my doubts."<br><br>"How?"
said he. "Amontillado? A pipe? Impossible! And in the middle of the carnival!"<br><br>"I
have my doubts," I replied; "and I was silly enough to pay the full Amontillado
price without consulting you in the matter. You were not to be found, and
I was fearful of losing a bargain."<br><br>"Amontillado!"<br><br>"I
have my doubts."<br><br>"Amontillado!"<br><br>"And I must satisfy
them."<br><br>"Amontillado!"<br><br>"As you are engaged, I
am on my way to Luchesi. If any one has a critical turn, it is he. He will
tell me--"<br><br>"Luchesi cannot tell Amontillado from Sherry."<br><br>"And
yet some fools will have it that his taste is a match for your own."<br><br>"Come,
let us go."<br><br>"Whither?"<br><br>"To your vaults."<br><br>"My
friend, no; I will not impose upon your good nature. I perceive you have
an engagement. Luchesi--"<br><br>"I have no engagement;--come."<br><br>"My
friend, no. It is not the engagement, but the severe cold with which I
perceive you are afflicted. The vaults are insufferably damp. They are
encrusted
with nitre."<br><br>"Let us go, nevertheless. The cold is merely
nothing. Amontillado! You have been imposed upon. And as for Luchesi, he
cannot distinguish Sherry from Amontillado."<br><br>Thus speaking,
Fortunato possessed himself of my arm. Putting on a mask of black silk,
and drawing a roquelaire closely about my person, I suffered him to hurry
me to my palazzo.<br><br>There were no attendants at home; they had
absconded to make merry in honour of the time. I had told them that I should
not return until the morning, and had given them explicit orders not to
stir from the house. These orders were sufficient, I well knew, to insure
their immediate disappearance, one and all, as soon as my back was turned.<br><br>I
took from their sconces two flambeaux, and giving one to Fortunato, bowed
him through several suites of rooms to the archway that led into the vaults.
I passed down a long and winding staircase, requesting him to be cautious
as he followed. We came at length to the foot of the descent, and stood
together on the damp ground of the catacombs of the Montresors.<br><br>The
gait of my friend was unsteady, and the bells upon his cap jingled as he
strode.<br><br>"The pipe," said he.<br><br>"It is farther on,"
said I; "but observe the white web-work which gleams from these cavern
walls."<br><br>He turned towards me, and looked into my eyes with
two filmy orbs that distilled the rheum of intoxication.<br><br>"Nitre?"
he asked, at length.<br><br>"Nitre," I replied. "How long have you
had that cough?"<br><br>"Ugh! ugh! ugh!--ugh! ugh! ugh!--ugh! ugh!
ugh!--ugh! ugh! ugh!--ugh! ugh! ugh!"<br><br>My poor friend found
it impossible to reply for many minutes.<br><br>"It is nothing,"
he said, at last.<br><br>"Come," I said, with decision, "we will
go back; your health is precious. You are rich, respected, admired, beloved;
you are happy, as once I was. You are a man to be missed. For me it is
no matter. We will go back; you will be ill, and I cannot be responsible.
Besides, there is Luchesi--"<br><br>"Enough," he said; "the cough
is a mere nothing; it will not kill me. I shall not die of a cough."<br><br>"True--true,"
I replied; "and, indeed, I had no intention of alarming you unnecessarily--but
you should use all proper caution. A draught of this Medoc will defend
us from the damps."<br><br>Here I knocked off the neck of a bottle
which I drew from a long row of its fellows that lay upon the mould.<br><br>"Drink,"
I said, presenting him the wine.<br><br>He raised it to his lips
with a leer. He paused and nodded to me familiarly, while his bells jingled.<br><br>"I
drink," he said, "to the buried that repose around us."<br><br>"And
I to your long life."<br><br>He again took my arm, and we proceeded.<br><br>"These
vaults," he said, "are extensive."<br><br>"The Montresors," I replied,
"were a great and numerous family."<br><br>"I forget your arms."<br><br>"A
huge human foot d'or, in a field azure; the foot crushes a serpent rampant
whose fangs are imbedded in the heel."<br><br>"And the motto?"<br><br>"
Nemo me impune lacessit."<br><br>"Good!" he said.<br>
</div>
<div
id="dynPage1" class="dynPage">
The wine
sparkled in his eyes and the bells jingled. My own fancy grew warm with
the Medoc. We had passed through walls of piled bones, with casks and puncheons
intermingling,
into the inmost recesses of catacombs. I paused again, and this time I
made bold to seize Fortunato by an arm above the elbow.<br><br>"The
nitre!" I said; "see, it increases. It hangs like moss upon the vaults.
We are below the river's bed. The drops of moisture trickle among the bones.
Come, we will go back ere it is too late. Your cough--"<br>
<br>"It
is nothing," he said; "let us go on. But first, another draught of the
Medoc."<br> <br>I broke and reached him a flagon of De Grave. He
emptied it at a breath. His eyes flashed with a fierce light. He laughed
and threw the bottle upwards with a gesticulation I did not understand.<br><br>I
looked at him in surprise. He repeated the movement--a grotesque one.<br>
<br>"You do not comprehend?" he said.<br> <br>"Not I," I replied.<br>
<br>"Then you are not of the brotherhood."<br> <br>"How?"<br>
<br>"You are not of the masons."<br> <br>"Yes, yes," I said; "yes,
yes."<br> <br>"You? Impossible! A mason?"<br> <br>"A mason,"
I replied.<br> <br>"A sign," he said, "a sign."<br> <br>"It
is this," I answered, producing a trowel from beneath the folds of my roquelaire.<br>
<br>"You jest," he exclaimed, recoiling a few paces. "But let us proceed
to the Amontillado."<br> <br>"Be it so," I said, replacing the tool
beneath the cloak and again offering him my arm. He leaned upon it heavily.
We continued our route in search of the Amontillado. We passed through
a range of low arches, descended, passed on, and descending again, arrived
at a deep crypt, in which the foulness of the air caused our flambeaux
rather to glow than flame.<br><br>At the most remote end of the crypt
there appeared another less spacious. Its walls had been lined with human
remains, piled to the vault overhead, in the fashion of the great catacombs
of Paris. Three sides of this interior crypt were still ornamented in this
manner. From the fourth side the bones had been thrown down, and lay promiscuously
upon the earth, forming at one point a mound of some size. Within the wall
thus exposed by the displacing of the bones, we perceived a still interior
recess, in depth about four feet in width three, in height six or seven.
It seemed to have been constructed for no especial use within itself, but
formed merely the interval between two of the colossal supports of the
roof of the catacombs, and was backed by one of their circumscribing walls
of solid granite.<br><br>It was in vain that Fortunato, uplifting
his dull torch, endeavoured to pry into the depth of the recess. Its termination
the feeble light did not enable us to see.<br><br>"Proceed," I said;
"herein is the Amontillado. As for Luchesi--"<br> <br>"He is an ignoramus,"
interrupted my friend, as he stepped unsteadily forward, while I followed
immediately at his heels. In an instant he had reached the extremity of
the niche, and finding his progress arrested by the rock, stood stupidly
bewildered. A moment more and I had fettered him to the granite. In its
surface were two iron staples, distant from each other about two feet,
horizontally. From one of these depended a short chain, from the other
a padlock. Throwing the links about his waist, it was but the work of a
few seconds to secure it. He was too much astounded to resist. Withdrawing
the key I stepped back from the recess.<br><br>"Pass your hand,"
I said, "over the wall; you cannot help feeling the nitre. Indeed, it is
very damp. Once more let me implore you to return. No? Then I must positively
leave you. But I must first render you all the little attentions in my
power."<br><br>"The Amontillado!" ejaculated my friend, not yet recovered
from his astonishment.<br> <br>"True," I replied; "the Amontillado."<br>
<br>As I said these words I busied myself among the pile of bones of
which I have before spoken. Throwing them aside, I soon un- covered a quantity
of building stone and mortar. With these materials and with the aid of
my trowel, I began vigorously to wall up the entrance of the niche.<br><br>I
had scarcely laid the first tier of the masonry when I discovered that
the intoxication of Fortunato had in a great measure worn off. The earliest
indication I had of this was a low moaning cry from the depth of the recess.
It was not the cry of a drunken man. There was then a long and obstinate
silence. I laid the second tier, and the third, and the fourth; and then
I heard the furious vibrations of the chain. The noise lasted for several
minutes, during which, that I might hearken to it with the more satisfaction,
I ceased my labours and sat down upon the bones. When at last the clanking
subsided, I resumed the trowel, and finished without interruption the fifth,
the sixth, and the seventh tier. The wall was now nearly upon a level with
my breast. I again paused, and holding the flambeaux over the mason-work,
threw a few feeble rays upon the figure within.<br><br>A succession
of loud and shrill screams, bursting suddenly from the throat of the chained
form, seemed to thrust me violently back. For a brief moment I hesitated--
I trembled. Unsheathing my rapier, I began to grope with it about the recess;
but the thought of an instant reassured me. I placed my hand upon the solid
fabric of the catacombs, and felt satisfied. I reapproached the wall; I
replied to the yells of him who clamoured. I re-echoed-- I aided-- I surpassed
them in volume and in strength. I did this, and the clamourer grew still.<br><br>It
was now midnight, and my task was drawing to a close. I had completed the
eighth, the ninth, and the tenth tier. I had finished a portion of the
last and the eleventh; there remained but a single stone to be fitted and
plastered in. I struggled with its weight; I placed it partially in its
destined position. But now there came from out the niche a low laugh that
erected the hairs upon my head. It was succeeded by a sad voice, which
I had difficulty in recognizing as that of the noble Fortunato. The voice
said--<br><br>"Ha! ha! ha!--he! he! he!--a very good joke indeed--an
excellent jest. We shall have many a rich laugh about it at the palazzo--he!
he! he!--over our wine--he! he! he!"<br><br>"The Amontillado!" I
said.<br> <br>"He! he! he!--he! he! he!--yes, the Amontillado. But
is it not getting late? Will not they be awaiting us at the palazzo, the
Lady Fortunato and the rest? Let us be gone."<br><br>"Yes," I said,
"let us be gone."<br> <br>" For the love of God, Montresor!"<br>
<br>"Yes," I said, "for the love of God!"<br> <br>But to these
words I hearkened in vain for a reply. I grew impatient. I called aloud--<br>
<br>"Fortunato!"<br> <br>No answer. I called again--<br> <br>"Fortunato--"<br>
<br>No answer still. I thrust a torch through the remaining aperture
and let it fall within. There came forth in reply only a jingling of the
bells. My heart grew sick on account of the dampness of the catacombs.
I hastened to make an end of my labour. I forced the last stone into its
position; I plastered it up. Against the new masonry I re-erected the old
rampart of bones. For the half of a century no mortal has disturbed them.
In pace requiescat!<br>
</div>
<div
id="dynPage2" class="dynPage">
Content,
content content content content content content
<br>
<br>
<br>
<a href="#" onclick="transitionIn=transitionIn==2?1:2; return false;" onfocus="if(this.blur)this.blur()">switch
transitions</a>
</div>
</div>
<!--
Sie können die Scrollgeschwindigkeit im onmouseover Eventhandler bestimmen.
Setzen Sie auch den onclick Eventhandler ein. -->
<!--
Für Highspeed Scrolling, setzen Sie die Geschwindigkeit im onmousedown
Eventhandler ein. Enjoy :) Ice -->
<div
id="arrows">
<a href="#"
onmouseover="scroll(6);" onclick="scroll(6); return false;" onmousedown="scroll(25)"
onmouseout="stopScroll();"><img src="arrows_rounded_up.gif" width="20"
height="17" alt="" border="0"></a>
<a href="#"
onmouseover="scroll(-6);" onclick="scroll(-6); return false;" onmousedown="scroll(-25)"
onmouseout="stopScroll();"><img src="arrows_rounded_down.gif" width="20"
height="17" alt="" border="0"></a>
</div>
<div
id="links">
<a href="#"
onclick="activate(0); return false;" onfocus="if(this.blur)this.blur()">I</a><br>
<a href="#"
onclick="activate(1); return false;" onfocus="if(this.blur)this.blur()">II</a><br>
<a href="#"
onclick="activate(2); return false;" onfocus="if(this.blur)this.blur()">III</a><br>
</div>