Vertikale Streifen
Da hab ich mir doch selbst ein Ei gelegt: Ein Entwurf mit
vertikal gestreiftem Hintergrund, worauf eine Fläche
mit Schattenwurf liegt. Der Schatten wird gedithert - auf
einem gestreiften Hintergrund.
Als ich das dann umsetzen wollte, war es schon zu spät
- ein JavaScript mußte her und hier ist es:
Das Script fragt die innere Breite des Browsers ab und generiert
in von-bis-Schritten eine passende Breite für ein transparentes
Gif, daß ich neben die Tabelle gesetzt habe (in die
Spalte ganz links). Dadurch wird nun die schattierte 'Box'
immer so von links weggerückt, daß sie halbwegs
mittig steht, aber die Streifen vom Schatten nicht mit den
Streifen vom Hintergrund durcheinanderkommen.
Das würde passieren ohne JavaScript: vertikalStreifen_ohne.html
[in neuem
Fenster öffnen]
Wenn du ein bissel am Browserfenster rumziehst, siehst du,
daß die Streifen vom Schatten fast nie mit den Streifen
vom Hintergrund übereinstimmen.
Und das passiert mit dem Javascript:
vertikalStreifen.html
[in neuem
Fenster öffnen]
|
Und so gehts:
Die Datei vertikalStreifen.html
am besten herunterladen und angucken (rechte Maustaste oder
Apfel + Maus --> Ziel, Verknüpfung speichern unter...)
In die linke Spalte links von der Zelle mit dem
eigentlichen Inhalt kommt das Javascript, dann brauchst du
nur noch zu veranlassen, daß der Browser bei Größenveränderungen
die Seite samt dem skalierten transparenten GIF neu lädt.
|
|
<script language="JavaScript" type="text/javascript">
// rausfinden, was fuer ein Browser:
Browsername=navigator.appName;
// Breite herausfinden:
// fuer Internet Explorer:
if (Browsername == "Microsoft Internet Explorer")
{
var gesamtBreite = document.body.offsetWidth;
}
// fuer Mozillas:
else
{
var gesamtBreite = window.innerWidth;
}
var vorhandenerPlatz = (gesamtBreite - 768)/2;
var BildBreite = parseInt((vorhandenerPlatz*80)/100);
|
Dieses Script muß direkt in die Seite, weil
es (ganz unten) den Code für das Image selbst hineinschreibt.
|
|
if (gesamtBreite < 850)
{
BildBreite=2;
}
else
{
if (BildBreite <= 100)
{
BildBreite = 54;
}
if (BildBreite >100 && BildBreite <=200)
{
BildBreite = 106;
}
if (BildBreite > 200 && BildBreite <= 300)
{
BildBreite = 210;
}
if (BildBreite > 300)
{
BildBreite = 314;
}
}
|
An diesen Zahlen kannst du nun feilen - das kommt
auf deine Streifen an!
Am besten ausprobieren und evtl. die Variable
'BildBreite' vom Browser ausgeben lassen (letzte auskommentierte
Zeilen) oder aber einen Rahmen um das Bild machen, um es sichtbar
zu machen. Der Rahmen muß hinterher allerdings wieder
zu der Bildbreite hinzugerechnet werden!
|
|
// Bild hinschreiben mit der richtigen breite:
document.write("<img src='../images/trans.gif' height='1'
width='" + BildBreite + "' border='0'>");
// Ausgabe der Variablen zu Testzwecken, kann nachher weg:
// document.write("<br>Offizieller Name des Browsers:<b>
"+ Browsername + "</b><br>");
// document.write ("WidthIE:<b> " + WidthIE
+ "</b><br>");
// document.write("WidthMozilla: <b>" + WidthMozilla
+ "</b><br>");
// document.write("vorhandener Platz: <b>"
+ vorhandenerPlatz + "</b><br>");
// document.write("Bildbreite: <b>" + BildBreite
+ "</b><br>");
</script>
|
Hier mußt du natürlich deinen Pfad
zu deinem transparenten GIF setzen!
|
|
So, fast fertig.
Die Seite muß sich jetzt nur noch bei jeder Größenänderung
neu laden, Dreamweaver, Golive und Konsorten können so
etwas eigentlich von Hause aus, ansonsten hier schnell der
Code:
|
|
<script language="JavaScript">
<!--
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue
= false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>
</head>
|
Das muß in den Head deiner Seite.
|
|
<body onResize="MM_goToURL('parent','vertikalStreifen.html');
return document.MM_returnValue">
|
Und das ist der Code für den Body, wobei
du den Namen der sich selbst ladenden Datei selbstredend verändern
mußt.
|
