StyleAssistant |
| Startseite |
 |
| Screenshot |
|
| Kurzanleitung |
|
| Download |
|
| Kurse & Infos |
|
| >Tipps & Tricks< |
|
| Unterstützer |
|
| TMXtensions |
|
| ?Freeware! |
|
| About TM |
|
Stand: 07.12.2002 |
Tipps & Tricks – Tipp 32
|
 |
 |
 |
|
32.
Objekte zoomen im IE 5.5 (13.07.2000)
Auch dieser Tipp widmet sich einem neuen, aber leider proprietären, CSS-Element im IE 5.5. Es trägt zwar den schlichten Namen Zoom, leistet jedoch Verblüffendes: Platzierte Objekte wie z. B. DIV-Container oder Absätze
lassen sich verkleinern bzw. vergrößern. Die notwendige Syntax ist denkbar simpel: man übergibt einen numerischen (Standard=1) oder einen prozentualen Wert (Standard=100%).
Mittels JavaScript lassen sich interessante DHTML-Anwendungen realisieren. Die ersten Versuche dokumentiert Beispiel 32a. Ein DIV-Container mit Tabelle verändert beim Mauskontakt seine Größe auf 200%. Im Beispiel 32b wird ein DIV mit Inhalt schrittweise auf 500% "gezoomt".
<DIV ID="x" STYLE="Color: red; Background-Color: yellow; Height: 200px;
Width: 200px; Border-Color: red; Border-Style: solid; Border-Width: 2px"
OnMouseOver="document.all.x.style.zoom='200%'"
OnMouseOut="document.all.x.style.zoom='100%'">
<TABLE BORDER="1" WIDTH="100%">
<TR BGCOLOR="#FFFFCC">
<TD>Test</TD>
<TD>Test</TD>
</TR>
<TR BGCOLOR="#ABCDEF">
<TD>Test</TD>
<TD>Test</TD>
</TR>
</TABLE>
</DIV>
Beim Zoom-Vorgang werden jedoch keineswegs DIV-Eigenschaften wie Höhe, Breite oder die Koordinaten (x=Left, y=Top) verändert. Soll etwa ein DIV-Container beim Zoom-Vorgang in der Mitte des Browser-Fensters verbleiben, ist zusätzlicher Aufwand zur Neupositionierung erforderlich, siehe Beispiel 32c.
Auch wenn es aus mehreren Gründen kaum einen praktischen Sinn ergibt, ermöglicht diese CSS-Eigenschaft sogar die dynamische Anpassung aller Elemente einer HTML-Seite an die aktuellen Fenstermaße. Im Beispiel 32d wird mit dem folgenden Script experimentiert, welches allen Tags nach BODY einen aus der ursprünglichen bzw. aktuellen Fenstergröße berechneten Zoom-Faktor zuweist. Von entscheidender Bedeutung ist dabei der Startwert der Zähvariable i, welcher das erste Tag nach dem BODY markiert (abgezählt ab 0).
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var startb, starth, bi;
function Init()
{
startb=document.body.clientWidth;
starth=document.body.clientHeight;
bi=document.all["bd"].sourceIndex;
}
function BodyZoom()
{
if (document.all && document.getElementById)
{
var aktb, akth, zh, zv, z, i;
aktb=document.body.clientWidth;
akth=document.body.clientHeight;
zh=1-(startb-aktb)/startb;
zv=1-(starth-akth)/starth;
z=Math.sqrt(zh*zv);
for (i=bi+1;i<document.all.length;i++)
{
document.all[i].style.zoom=z;
}
}
}
//-->
</SCRIPT>
Aufruf: <BODY ID="bd" OnLoad="Init()" OnResize="BodyZoom()">
Bei diesen Tests zeigte sich noch eine weitere CSS-Detailverbesserung. Bei Blockelementen funktionieren jetzt die Border-Style-Eigenschaftswerte dashed (gestrichelt) und dotted (gepunktet). Beispiel 32d demonstriert DIVs mit diesen Formatierungen, die auch in Netscape 6 implementiert sind.
|
|
 |
|
 |