Verwenden des Image-Elements
In diesem Thema wird VML beschrieben, ein Feature, das ab Version 9 Windows Internet Explorer ist. Webseiten und Anwendungen, die auf VML basieren, sollten zu SVG oder anderen weit verbreiteten Standards migriert werden.
Hinweis
Seit Dezember 2011 wurde dieses Thema archiviert. Daher wird sie nicht mehr aktiv verwaltet. Weitere Informationen finden Sie unter Archivierter Inhalt. Informationen, Empfehlungen und Anleitungen zur aktuellen Version von Windows Internet Explorer finden Sie im Internet Explorer Developer Center.
Verwenden von <image>
In diesem Thema wird veranschaulicht, wie das -Element verwendet wird, <image> um Bilder mit verschiedenen Sondereffekten anzuzeigen.
Wenn Sie ein Bild anzeigen möchten, das aus einer externen Quelle geladen wurde, verwenden Sie in der Regel das in HTML bereitgestellte Element und verweisen dann das src-Eigenschaftsattribut auf den Speicherort der <img> Bilddatei.
Alternativ können Sie das in <image> VML bereitgestellte Element verwenden. Wenn Sie das -Element verwenden, können Sie nur eine Bilddatei erstellen und das Bild dann anders anzeigen, indem Sie die Eigenschaftenattribute <image> des Elements <image> ändern. Darüber hinaus bietet das -Element mehrere Sondereffekte, die Sie nicht einfach mithilfe des HTML-Elements verwenden können, z. B. zuschneiden, <image> kontrastieren, <img> Helligkeit, Gammaund Graustufen.
Ernte
Sie können die Eigenschaftenattribute cropbottom, croptop, cropleft und cropright des Elements verwenden, um verschiedene Bilder anzuzeigen, die aus derselben <image> Bilddatei zugeschnitten werden.
Der Wert dieser Zuschneideattribute stellt den Prozentsatz dar, der vom Rand des Bilds abgeschnitten wird. Der Wert kann eine beliebige Zahl zwischen 0 und 1 sein. Standardmäßig ist der Wert auf 0 festgelegt, was angibt, dass keine Zuschneide vom Rand entfernt wird. Der Wert 0,1 gibt einen Zuschnitt von 10 Prozent vom Rand an, der Wert 0,15 steht für einen Zuschnitt von 15 Prozent vom Rand und so weiter.
Um beispielsweise fünf Bilder anzuzeigen, die alle aus derselben Bilddatei zugeschnitten wurden, können Sie das -Element verwenden und verschiedene Zuschneidewerte angeben, wie in der folgenden <image> VML-Darstellung gezeigt:





<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:85pt;height:64pt' src="image1.jpg"
cropbottom="0.2" cropright="0.15"/>
<v:image style='width:50pt;height:44pt' src="image1.jpg"
cropbottom="0.45" cropleft="0.5"/>
<v:image style='width:80pt;height:56pt' src="image1.jpg"
croptop="0.3" cropright="0.2"/>
<v:image style='width:70pt;height:48pt' src="image1.jpg"
croptop="0.4" cropleft="0.3"/>
Das erste Bild , <v:image style='width:100pt;height:80pt' src="image1.jpg" /> , hat keinen Zuschneidewert. Daher werden 100 Prozent des originalen Bilds mit einer Größe von 100 Punkten um 80 Punkten angezeigt.
Das zweite Bild, <v:image style='width:85pt;height:64pt' src="image1.jpg" cropbottom="0.2" cropright="0.15"/> , verfügt über einige Zuschneidewerte. cropbottom="0.2" gibt an, dass 20 Prozent des Bilds von unten zugeschnitten werden. cropright="0.15" gibt an, dass 15 Prozent des Bilds vom rechten Rand aus zugeschnitten werden. Das verbleibende Bild wird dann mit einer Größe von 85 Punkten um 64 Punkten angezeigt.
Auf ähnliche Weise haben das dritte, vierte und fünfte Bild einige Zuschneidewerte. Das ursprüngliche Bild wird gemäß den Zuschneidewerten zugeschnitten und dann entsprechend dem Wert von Breite und Höhe angezeigt.
Kontrast
Sie können das Gain-Eigenschaftsattribut des -Elements verwenden, um verschiedene <image> Bilder mit unterschiedlichen Kontrasteinstellungen anzuzeigen.
Der Wert des gain-Eigenschaftsattributs kann eine beliebige Zahl sein. Standardmäßig ist der Wert 1, was die Verwendung des gleichen Kontrasts wie das ursprüngliche Bild angibt. Der Wert 0 gibt keinen Kontrast an. Je größer die Zahl, desto höher der Kontrast.
Um beispielsweise fünf Bilder mit unterschiedlichen Kontrasteinstellungen anzuzeigen, können Sie das -Element verwenden und einen anderen Wert für das gain-Eigenschaftsattribut festlegen, wie in der folgenden <image> VML-Darstellung gezeigt:





<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gain=0 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gain=0.5 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gain=3 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gain=-0.4 />
Wenn das Gain-Eigenschaftsattribut auf 0 festgelegt ist, wird das gesamte Bild grau, da kein Kontrast besteht. Der Kontrast ist deutlicher, wenn das gain-Eigenschaftsattribut auf 3 festgelegt ist, als wenn es auf 0,5 festgelegt ist. Der Kontrast wird umgekehrt, wenn das Gain-Eigenschaftsattribut auf einen negativen Wert wie -0,4 festgelegt wird.
Helligkeit
Sie können das Eigenschaftsattribut blacklevel des Elements verwenden, um verschiedene Bilder mit <image> unterschiedlichen Helligkeitseinstellungen anzuzeigen.
Der Wert des blacklevel-Eigenschaftsattributs kann ein beliebiger Wert zwischen 0 und 1 sein. Standardmäßig ist der Wert 0, was angibt, dass die Helligkeitsstufe im ursprünglichen Bild beibehalten wird. Der Wert 1 gibt die höchste Helligkeitsstufe an.
Wenn Sie beispielsweise fünf Bilder mit unterschiedlichen Helligkeitseinstellungen anzeigen möchten, können Sie das -Element verwenden und einen anderen Wert für das Blacklevel-Eigenschaftsattribut festlegen, wie in der folgenden <image> VML-Darstellung gezeigt:





<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:100pt;height:80pt' src="image1.jpg" blacklevel=0.1 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" blacklevel=0.2 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" blacklevel=-0.05 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" blacklevel=-0.15 />
Graustufe
Sie können das Grayscale-Eigenschaftsattribut des Elements verwenden, um Bilder mit oder <image> ohne Graustufen anzuzeigen.
Der Wert des Grayscale-Eigenschaftsattributs kann entweder true oder false sein. Standardmäßig ist der Wert auf FALSE festgelegt, sodass das Bild in Farbe angezeigt wird. Wenn der Wert auf TRUE festgelegt ist, wird das Bild in Graustufen angezeigt.
Wie in der folgenden Abbildung gezeigt, verwendet das erste Bild beispielsweise die Standardeinstellung (false) des Graustufenattributs ( <v:image style='width:100pt;height:80pt' src="image1.jpg" /> ). Daher wird das Bild in Farbe angezeigt.
Das zweite Bild legt das Graustufenattribut auf true fest ( <v:image style='width:100pt;height:80pt' src="image1.jpg" grayscale=true /> ). Daher wird das Bild in Graustufen angezeigt, wie in der folgenden VML-Darstellung gezeigt:


<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:100pt;height:80pt' src="image1.jpg"
grayscale=true />
Gamma
Sie können das Gammaeigenschaftsattribut des Elements verwenden, um Bilder mit <image> unterschiedlichen Gammaeinstellungen anzuzeigen.
Der Wert des Gammaeigenschaftsattributs kann ein beliebiger Wert zwischen 0 und 1 sein. Standardmäßig ist der Wert auf 1 festgelegt.
Um beispielsweise drei Bilder mit unterschiedlichen Gammaeinstellungen anzuzeigen, können Sie das -Element verwenden und einen anderen Wert des Gammaeigenschaftsattributs festlegen, wie in der folgenden <image> VML-Darstellung gezeigt:



<v:image style='width:100pt;height:80pt' src="image1.jpg" />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gamma=0 />
<v:image style='width:100pt;height:80pt' src="image1.jpg" gamma=0.5 />
Weitere Informationen zu diesem Element finden Sie in der VML-Spezifikation.
Zurück zum Anfang