3x bewertet

Scrollen mit Bild

von Delite  |  03.06.2007 um 11:48 h
Javascript Anwendungen
Typ: Javascript Anwendungen
Stufe:Mittel
Dieses Tutorial war gewünscht. Hier ist es. Das Skript stammt von dynamicdrive.com.
Unser Ergebnis soll so aussehen:
KLICK

Zu erst öffnen wir unsere Index-Seite und schreiben folgendes in den Head-Bereich:
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Und folgendes in den Body-Tag:
<iframe width="400" height="159" name="home" frameborder="0" src="home.html"></iframe>
Das ist der Iframe ihr könnt ihn danach beliebig verrücken. Jetzt kommt noch unser up und down-Link in den Body Tag:
<div style="position:absolute; left:457px; top:10px; width: 26px; height: 49px;"><a href="#" onMouseover="scrollspeed=-3" onMouseout="scrollspeed=0"><img src="up.gif" border="0"></a></div>

<div style="position: absolute; left: 463px; top: 200px; width: 31px; height: 31px"><a href="#" onMouseover="scrollspeed=3" onMouseout="scrollspeed=0"><img src="down.gif" border="0"></a></div>

onMouseover="scrollspeed=-3"
mit Scrollspeed könnt ihr die Geschwindigkeit einstellen hier 3.

Danach kommt folgendes in die Unterseiten (Head-Bereich):
<script language="JavaScript1.2">
//Scrollable content III- By http://www.dynamicdrive.com
var speed, currentpos=curpos1=0,alt=1,curpos2=-1
function initialize(){
if (window.parent.scrollspeed!=0){
speed=window.parent.scrollspeed
scrollwindow()
}
}
function scrollwindow(){
temp=(document.all)? document.body.scrollTop : window.pageYOffset
alt=(alt==0)? 1 : 0
if (alt==0)
curpos1=temp
else
curpos2=temp
window.scrollBy(0,speed)
}
setInterval("initialize()",10)
</script>
Und folgendes kommt in den Body-Tag, damit nicht gescrollt werden kann.
<body scroll="no">
Wichtig!:
scroll=no geht nicht im Firefox!


Das war es auch schon =) Wenn es noch fragen gibt, dann fragt!



5 Kommentare




Myrina

damit das scrollen nicht geht kann man auch einfach overflow-y: hidden in die css machen, dann muss man halt nur eine class für das ifram machen Smilie
am 10.06.2007 um 17:30 Uhr


find ich cool Smilie
am 11.06.2007 um 20:09 Uhr


DiabolicHerz

Das IFrame braucht aber noch scrolling="no"
Sieht nämlich doof aus, wenn die Pfeile und ein Scrollbalken da sind (jedenfalls im FF, keine Ahnung was mit IE ist ;) )
am 26.10.2007 um 14:33 Uhr


Traumflocke

Was macht man, wenn die Indexseite nur aus Includings besteht? Da ist ja kein Head und Body-Bereich...? ._. Wo wird das dann eingefügt?
am 20.11.2009 um 16:35 Uhr


Linny

ja genau.. ich habe auch die Indexseite mit Includings. Muss man das dann in den Header.inc bzw. in den Footer.inc einsetzen?
am 10.12.2009 um 20:57 Uhr