Mittels Grafiken im I-Frame Scollen

Verfasst von Alice am 01.06.2009 - wurde schon 6869 mal gelesen

Kategorie: JavaScript

Bewertung:

2x bewertet

Schwierigkeit: einfach
Kommentare: [ 1 ]

Tag - Schlagwort Javascript Scrollen I-Frame

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-78

Das 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 ...