Loading...   Upload Image

Mittels Grafiken im I-Frame ScollenTutorials » JavaScript Tutorials » Mittels Grafiken im I-Frame Scollen

Verfasst von Alice am 01.06.2009 - wurde schon 4897 mal gelesen

Kategorie: JavaScript
Bewertung:
2x bewertet
Schwierigkeit: einfach
Kommentare: [ 1 ]

Tag - Schlagwort Javascript Tag - Schlagwort Scrollen Tag - Schlagwort 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...


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


Affiliates:   Blue-Graphics  •   Gallery Yuri  •   Colorful Gfx  •   Design Grafixx  •   Chibi Graphics  •   The Seduction  •   Pat DG  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider