Grafik Scrollbalken

Neuer toller Scrollbalken. :-)

Dieses Tutorials habe ich mit Frontpage 2003 erstellt,
man kann es auch mit Expression Web, Dreamweaver oder mit anderen HTML Programmen erstellen.

Beispiel: Klick

Du erstellt eine neue Webseite nach deinem Geschmack.

Nun erstellen wir 3 Zeilen und 3 Spalten Tabellen.

Markiere mit der Maus, die beiden ersten Tabellen und klicke rechte Maustaste Tabellen verbinden

Mit der Maus kannst du am rechten Rand die Tabelle etwas kleiner ziehen.

Speichere deine Webseite ab.

In der Linken Tabelle fügst Du jetzt einen InlineFrame ein.

Klicke auf Einfügen >InlineFrame.

Klicke auf neue Webseite und speichere alles ab.

Deinen Inlineframe kannst Du aufrufen, wie eine ganz normale Webseite und auch bearbeiten.
Hintergrundbild, Farbe oder auch ein Webset wie Du möchtest.

Nun klicke auf dein InlineFrame und Du bekommst eine Markierung.

Du kannst jetzt doppelt darauf klicken oder rechte Maustaste >Inline Frameeigenschaften.

Die Grösse kannst du selber bestimmen.
Optionen:
Ausrichtung: Standard
Bildlaufleisten: Nie
Rahmen anzeigen: Bitte Hacken raus nehmen.

OK.

An der Ecke kannst du auch dein Iframe etwas Größer oder etwas kleiner ziehen.

So nun kannst Du die Tabellen mit der Maus etwas breiter und etwas höher ziehen.

Du kannst die Tabellen noch unsichtbar machen, in dem Du in der Tabelle klickst rechte Maus Tabelleneigenschaften.

Tabelleneigenschaften auf 0 stellen.

Nun zum neuen Scrollbalken.

Markiere die 3 Tabellen von oben nach unten.

Rechte Maustaste Zelleneigenschaften

Klicke auf Format

Wir sind im Rahmen und Schattierung,
hier kannst du dir aussuchen welchen Rahmen du möchtest.
Ich habe gepunktet genommen eine Farbe mir ausgesucht.

Dann klicke 3 mal auf OK.

Wo dein Iframe hinterlegt ist hast du keine Tabellenfarbe nur im den 3 Tabellen wo Du später den Scrollbalken hinterlegst.

Du kannst aber auch alles in einer Tabellenfarbe erstellen oder keine Tabellenfarbe, nach deinen Wünschen.

So erstelle mit einem Grafik Programm 3 kleine Grafiken 2* für oben und unten und eine etwas länger in der Mitte, kann auch eine Schrift sein.

Klicke mit der Maus in der ersten Tabelle, und füge deine Grafik ein,
und füge in allen anderen Tabellen ebenso eine Grafik ein.

Soweit sind die Vorbereitungen schon fertig,
speichere alles ab.

Öffne jetzt den Inlineframe

Setze jetzt einen etwas längeren Text in deinem Inlineframe so das man scrollen muss,
oder Klicke die Umschalttaste und drücke die Return Taste und es entstehen ein paar <br>

Markiere und Kopiere diesen Text und füge es im Inlineframe vor </body> ein.
Speichern.

<script language="JavaScript" type="text/JavaScript"> 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>

Klicke jetzt auf die Webseite wo du Iframe und Grafik sehen kannst.

Meine obere und untere Grafik ist die Biene.

Nun arbeiten wir kurz im Quellcode.

Klicke auf die obere Grafik mit der Maus und gehe auf Code.

Deine Grafik im Quellcode ist markiert, ersetzte es mit diesem Satz.

Wichtig: Ändere deinen Grafik Namen und die Breite und Höhe "white" & "height" ab >> in src= "deinen Grafiknamen"
"Scrollt nach unten"

Das gleiche machst Du auch mit der unteren Grafik.
"Scrollt nach oben"

Speichere alles ab, Vorschau im Browser dann müsste es funktionieren.

*fertig*

Würde mich über einen Eintrag im Gästebuch freuen und über Dein Ergebnis.

Fragen dazu kannst du gerne im Forum stellen.

Viel Spaß mit dem neuen Scrollbalken :-)

Gruss Anita

Beachte bitte meine Nutzerbedingungen!