nicht angemeldet
Scrollen mit MouseOver
Hallo,
wollte mal fragen ob es eine Möglichkeit gibt, mit Hilfe eines Buttons eine Seite hoch bzw. runter scrollen zu lassen? (wie man es oft in Flash Seiten sieht...) ???
Gruß Hannes
-
Hallo Hannes,
ja diese Möglichkeit des Scrollens gibt es, auch wenn viele sie für nutzerunfreundlich halten. Vergleiche hierzu mal die Diskussion, die es in diesem Monat erst im Forum gab:
http://forum.de.selfhtml.org/archiv/2004/8/87344/#m519062
Ich würde solchen Schnickschnack auch nur bei sehr verspielten Seiten machen. So wie ich es in dem Thread beschrieben habe, läuft es aber nicht. Deshalb poste ich hier mal den verbesserten Quellcode, damit niemand auf eine falsche Fährte geführt wird.
Getestet habe ich unter Windows in MSIE (6.0), Opera (7.11), Mozilla (1.6) und Netscape (7.1):
**Beginn Quellcode**
<html>
<head>
<title>Scrollen mittels Buttons</title>
<script type="text/javascript">
<!--
var scroll;
var speed = 5;function runter () {
if(document.all) {
y = meinIframe.document.body.scrollTop + speed;
} else {
y = meinIframe.pageYOffset + speed;
}
meinIframe.scrollTo(0, y);
scroll = window.setTimeout("runter()", 83);
}function rauf () {
if(document.all) {
y = meinIframe.document.body.scrollTop - speed;
} else {
y = meinIframe.pageYOffset - speed;
}
meinIframe.scrollTo(0, y);
scroll = window.setTimeout("rauf()", 83);
}//-->
</script>
</head><body>
<a href="#" onMouseover="runter()"
onMouseout="window.clearTimeout(scroll)">nach unten</a>
<br><br>
<a href="#" onMouseover="rauf()"
onMouseout="window.clearTimeout(scroll)">nach oben</a>
<br><br>
<div style="border:solid 1px;width:442px;height300px;">
<iframe width="440" height="300" src="blindtext.html" name="meinIframe"
frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>**Ende Quellcode**
Um den Rahmen um den Iframe auch in Opera (zumindest in meiner Version 7.11) vollständig anzuzeigen und Darstellungsfehler zu vermeiden, ist es nötig, diesen nicht dem Iframe selbst, sondern einem um das Doppelte der Rahmendicke breiteren Div-Element drumherum zuzuweisen.
Gruß Gernot
-
Ich muss mich korrigieren, mit DHTML hat das natürlich nichts zu tun, denn CSS-Angaben werden hier nicht dynamisch geändert; Titel Javascript also.
-
hallo Gernot,
dnke für die ausführliche Antwort. Ich ahbe es mitlerweile folgendermaßen gelöst:
<script type="text/javascript">
function ScrollUp() {
iframe.scrollBy(0,-1);
}
function StartScrollUp() {
ScrollAction = window.setInterval("ScrollUp()", 10);
}
function ScrollDown() {
iframe.scrollBy(0,1);
}
function StartScrollDown(){
ScrollAction = window.setInterval("ScrollDown()", 10);
}
function StopScroll() { window.clearInterval(ScrollAction);
}
</script>und hiermit aufgerufen:
<a href="#" onMouseover="StartScrollUp()" onMouseout="StopScroll()">up</a>
<a href="#" onMouseover="StartScrollDown()" onMouseout="StopScroll()">down</a>Es funktioniert einwandfrei. Werde nun auch mal deine Lösung versuchen und schaun was welche mir am besten gefällt.
Schöne Grüße aus Baden
Hannes
-
Hallo Hannes,
stimmt, scrollBy() gibt's ja auch noch, daran habe ich gar nicht gedacht. Das ist natürlich viel eleganter.
Gruß Gernot
-
-