Javascript Scrollen I-Frame
Mittels Grafiken im I-Frame ScollenTutorials » JavaScript Tutorials » Mittels Grafiken im I-Frame Scollen
Mittels Grafiken im I-Frame Scollen - Tutorial
Es wurde nach einem Tutorial gefragt, dass erklaert wie man es bewerkstelligt, dass man anstatt mit dem normalen Scrollbalken mit Grafik scrollen kann, wie z.B. bei diesem Layout => http://alice-grafixx.de/layout-78Das funktioniert mittels Javascript und ist m.M. nicht wirklich empfehlenswert, da es nicht so vorteilhaft fuer User ist, die kein Javascritp aktiviert haben und I-Frames nicht mehr wirklich up to date sind, aber nun denn ...
Was wird benoetigt?
- 2 Grafiken, eine zum Hoch- und eine zum RunterScrollen
- ein I-Frame
Der Javascript Code
Folgender Code muss in den Header-Bereich, also zwischen <head> und </head>, der Datei, die auch das I-Frame enthaelt ...
<script type="text/javascript"> var timer_id; // Variable definieren function scroll_iframe(who,zeilen,dir){ // who = Name des Iframes // zeilen = Anzahl der Zeilen(Pixel) die gescrollt werden soll if(timer_id){ clearTimeout(timer_id); } if(window.frames[who]){ if (dir == "i"){ window.frames[who].scrollBy(0, zeilen); }else{ window.frames[who].scrollBy(zeilen, 0); } timer_id = setTimeout("scroll_iframe('" + who + "'," + zeilen + ",'" + dir + "')", 20); } } function stopScroll(){ if(timer_id){ clearTimeout(timer_id); } } </script>
Das I-Frame
Dieser Code fuer ein Iframe muss in die selbe Datei wie schon der Javascript Code gerade eben, allerdings in den Body-Bereich, genau dort hin, wo das I-Frame dann spaeter zu sehen sein soll...
<iframe id="scroll_it" name="scroll_it" src="home.html" width="495" height="335" border="0" frameborder="0" scrolling="no" > Ihr Browser untersttzt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an. </iframe>
Wichtig ist, dass mittels Attribut scrolling="no" bei unserem I-Frame der Scrollbalken ausgeblendet wird!
Die Attribute width und height muessen hier natuerlich entsprechend angepasst werden ;)
Die Scroll-Buttons
Nun benoetigen wir noch die Grafiken, damit man ueberhaupt scrollen kann...
Einmal zum Hochscrollen ...
<img src="up.jpg" onmouseover="scroll_iframe('scroll_it', -5, 'i');" onmouseout="stopScroll();" title="Hoch scrollen" />
Und einmal zum Runterscrollen
<img src="down.jpg" onmouseover="scroll_iframe('scroll_it', 5, 'i');" onmouseout="stopScroll();" title="Runter scrollen" />
So, das waere es dann auch schon ...
Beispiel ansehen
Beispieldateien herunterladen
Kommentar schreibenHinterlasse einen Kommentar
Du musst angemeldet sein, um einen Kommentar zu hinterlassen...
Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...