Bilder einfügen - Versionsgeschichte

Knarfio am 8. Januar 2023 um 18:04 Uhr

2023-01-08T18:04:08Z

← Nächstältere Version		Version vom 8. Januar 2023, 18:04 Uhr
Zeile 42:		Zeile 42:
	** ''Beispiel:'' <code><img src="towerbridge.jpg" alt="Die Londoner Tower Bridge im Nebel"></code>		** ''Beispiel:'' <code><img src="towerbridge.jpg" alt="Die Londoner Tower Bridge im Nebel"></code>
	** ''Hinweis:'' Dies ist besonders hilfreich für Spielende, die einen Screenreader verwenden ([[Barrierefreiheit]]).		** ''Hinweis:'' Dies ist besonders hilfreich für Spielende, die einen Screenreader verwenden ([[Barrierefreiheit]]).
	* Mit dem Attribut [border] kann ein Rahmen um das Bild definiert werden (Stärke in Pixeln).		* Mit dem Attribut <code>[border]</code> kann ein Rahmen um das Bild definiert werden (Stärke in Pixeln).
	** Beispiel: <code><img src="neuschwanstein.jpg" border="5"></code>		** Beispiel: <code><img src="neuschwanstein.jpg" border="5"></code>

Knarfio am 8. Januar 2023 um 18:03 Uhr

2023-01-08T18:03:44Z

← Nächstältere Version		Version vom 8. Januar 2023, 18:03 Uhr
Zeile 36:		Zeile 36:
	Durch die Angabe bestimmter Attribute innerhalb des <img>-Tags lässt sich dessen Darstellung anpassen:		Durch die Angabe bestimmter Attribute innerhalb des <img>-Tags lässt sich dessen Darstellung anpassen:

	* Durch die Attribute <code>[height]</code> und <code>[width]</code> wird festgelegt, wie hoch und/oder breit (in Pixeln) das Bild dargestellt werden soll. ''Beispiel:'' <code><img src="eiffelturm.jpg" width=300 height=200></code> ''Hinweis:'' Wird nur einer der Werte angegeben, passt sich der andere proportional an.		* Durch die Attribute <code>[height]</code> und <code>[width]</code> wird festgelegt, wie hoch und/oder breit (in Pixeln) das Bild dargestellt werden soll.
	* Das Attribut <code>[alt]</code> legt einen Text fest, der anstelle des Bildes angezeigt wird, wenn es nicht angezeigt werden kann. ''Beispiel:'' <code><img src="towerbridge.jpg" alt="Die Londoner Tower Bridge im Nebel"></code> ''Hinweis:'' Dies ist besonders hilfreich für Spielende, die einen Screenreader verwenden ([[Barrierefreiheit]]).		** ''Beispiel:'' <code><img src="eiffelturm.jpg" width=300 height=200></code>
	* Mit dem Attribut [border] kann ein Rahmen um das Bild definiert werden (Stärke in Pixeln). Beispiel: <code><img src="neuschwanstein.jpg" border="5"></code>		** ''Hinweis:'' Wird nur einer der Werte angegeben, passt sich der andere proportional an.
			* Das Attribut <code>[alt]</code> legt einen Text fest, der anstelle des Bildes angezeigt wird, wenn es nicht angezeigt werden kann.
			** ''Beispiel:'' <code><img src="towerbridge.jpg" alt="Die Londoner Tower Bridge im Nebel"></code>
			** ''Hinweis:'' Dies ist besonders hilfreich für Spielende, die einen Screenreader verwenden ([[Barrierefreiheit]]).
			* Mit dem Attribut [border] kann ein Rahmen um das Bild definiert werden (Stärke in Pixeln).
			** Beispiel: <code><img src="neuschwanstein.jpg" border="5"></code>

	==== Bilder als Links verwenden ====		==== Bilder als Links verwenden ====

Knarfio am 8. Januar 2023 um 18:02 Uhr

2023-01-08T18:02:51Z

← Nächstältere Version		Version vom 8. Januar 2023, 18:02 Uhr
Zeile 36:		Zeile 36:
	Durch die Angabe bestimmter Attribute innerhalb des <img>-Tags lässt sich dessen Darstellung anpassen:		Durch die Angabe bestimmter Attribute innerhalb des <img>-Tags lässt sich dessen Darstellung anpassen:

	* Durch die Attribute <code>[height]</code> und <code>[width]</code> wird festgelegt, wie hoch und/oder breit (in Pixeln) das Bild dargestellt werden soll. ''Beispiel:'' <code><img src="eiffelturm.jpg" width=300 height=200></code> ''Hinweis:'' Wird nur einer der Werte angegeben, passt sich der andere proportional an.		* Durch die Attribute <code>[height]</code> und <code>[width]</code> wird festgelegt, wie hoch und/oder breit (in Pixeln) das Bild dargestellt werden soll. ''Beispiel:'' <code><img src="eiffelturm.jpg" width=300 height=200></code> ''Hinweis:'' Wird nur einer der Werte angegeben, passt sich der andere proportional an.
	* Das Attribut <code>[alt]</code> legt einen Text fest, der anstelle des Bildes angezeigt wird, wenn es nicht angezeigt werden kann. ''Beispiel:'' <code><img src="towerbridge.jpg" alt="Die Londoner Tower Bridge im Nebel"></code> ''Hinweis:'' Dies ist besonders hilfreich für Spielende, die einen Screenreader verwenden ([[Barrierefreiheit]]).		* Das Attribut <code>[alt]</code> legt einen Text fest, der anstelle des Bildes angezeigt wird, wenn es nicht angezeigt werden kann. ''Beispiel:'' <code><img src="towerbridge.jpg" alt="Die Londoner Tower Bridge im Nebel"></code> ''Hinweis:'' Dies ist besonders hilfreich für Spielende, die einen Screenreader verwenden ([[Barrierefreiheit]]).
	* Mit dem Attribut [border] kann ein Rahmen um das Bild definiert werden (Stärke in Pixeln). Beispiel: <code><img src="neuschwanstein.jpg" border="5"></code>		* Mit dem Attribut [border] kann ein Rahmen um das Bild definiert werden (Stärke in Pixeln). Beispiel: <code><img src="neuschwanstein.jpg" border="5"></code>

Knarfio am 8. Januar 2023 um 18:02 Uhr

2023-01-08T18:02:27Z

← Nächstältere Version		Version vom 8. Januar 2023, 18:02 Uhr
Zeile 21:		Zeile 21:
	==== Methode 2: Das Bild hochladen ====		==== Methode 2: Das Bild hochladen ====
	Wenn man das Bild auf einer Image-Hosting-Plattform wie https://de.imgbb.com hochlädt, erhält man einen Link zum Bild, den man wie folgt einfügen kann:		Wenn man das Bild auf einer Image-Hosting-Plattform wie https://de.imgbb.com hochlädt, erhält man einen Link zum Bild, den man wie folgt einfügen kann:
	<img src="https://i.ibb.co/xe5Tz7K/elster.jpg" ~~alt="Bild einer Elster" border="0">~~		<img src="https://i.ibb.co/xe5Tz7K/elster.jpg">
	Der Text hinter <code>alt=</code> wird beispielsweise angezeigt, wenn das Bild nicht verfügbar ist oder das Spiel von einem Screenreader vorgelesen wird. <code>border="0"</code> bedeutet, dass um das Bild herum kein Rahmen gezogen werden soll; in diesem Fall kann die Angabe aber auch entfallen.

	~~Mit den Attributen <code>width</code> und <code>height</code> lässt sich die Größe des Bildes anpassen. Gibt man nur einen der beiden Werte an, wird der andere proportional angepasst.~~
	~~<img src="https://i.ibb.co/xD5ev8K/apfel.jpg" alt="Bild eines Apfels" width=300~~>
	{\| class="wikitable"		{\| class="wikitable"
	\|'''Vorteile'''		\|'''Vorteile'''
Zeile 37:		Zeile 33:
	\|}		\|}

			==== Darstellung der Bilder anpassen ====
			Durch die Angabe bestimmter Attribute innerhalb des <img>-Tags lässt sich dessen Darstellung anpassen:

			* Durch die Attribute <code>[height]</code> und <code>[width]</code> wird festgelegt, wie hoch und/oder breit (in Pixeln) das Bild dargestellt werden soll. ''Beispiel:'' <code><img src="eiffelturm.jpg" width=300 height=200></code> ''Hinweis:'' Wird nur einer der Werte angegeben, passt sich der andere proportional an.
			* Das Attribut <code>[alt]</code> legt einen Text fest, der anstelle des Bildes angezeigt wird, wenn es nicht angezeigt werden kann. ''Beispiel:'' <code><img src="towerbridge.jpg" alt="Die Londoner Tower Bridge im Nebel"></code> ''Hinweis:'' Dies ist besonders hilfreich für Spielende, die einen Screenreader verwenden ([[Barrierefreiheit]]).
			* Mit dem Attribut [border] kann ein Rahmen um das Bild definiert werden (Stärke in Pixeln). Beispiel: <code><img src="neuschwanstein.jpg" border="5"></code>

			==== Bilder als Links verwenden ====
	Bilder können auch als Links verwendet werden. Im folgenden Beispiel gelangt man in den Abschnitt <code>Schatzkammer</code>, wenn man auf das Bild eines Schlüssels klickt:		Bilder können auch als Links verwendet werden. Im folgenden Beispiel gelangt man in den Abschnitt <code>Schatzkammer</code>, wenn man auf das Bild eines Schlüssels klickt:

			...




	''Hinweis:'' Lizenzfreie Bilder für Spiele und andere Projekte findet man z. B. auf https://pixabay.com/de oder https://commons.wikimedia.org.		''Hinweis:'' Lizenzfreie Bilder für Spiele und andere Projekte findet man z. B. auf https://pixabay.com/de oder https://commons.wikimedia.org.

Knarfio: Angelegt und teilweise geschrieben.

2023-01-03T17:48:04Z

Angelegt und teilweise geschrieben.

Neue Seite

Bilder tragen erheblich zur Attraktivität eines Spiels bei und können auch für das Spiel selbst wichtig sein, wenn sie z. B. Informationen enthalten oder Gegenstand von Rätseln sind. Es gibt zwei einfache Verfahren, um Bilder in ein Twine-Spiel einzufügen, mit je eigenen Vor- und Nachteilen.

==== Methode 1: Das Bild mitliefern ====
Wenn das Bild zusammen mit der Spieldatei verteilt bzw. hochgeladen werden kann, lässt es sich ganz einfach mit folgendem Code an beliebiger Stelle im Spiel einbinden:
<img src="elster.jpg">
Wichtig: die veröffentlichte Spieldatei und die Bilder müssen sich '''im selben Ordner''' befinden, sonst findet sie der Browser beim Spielen nicht. Deshalb sind die Bilder beim Testen aus Twine heraus auch nicht zu sehen. Dies ist kein Fehler.
{| class="wikitable"
|'''Vorteile'''
|'''Nachteile'''
|-
|Bilder können leicht verändert werden.
|Bilder müssen mitgeliefert werden.
|-
|Bilder sind zuverlässig verfügbar.
|Bilder sind beim Testen nicht sichtbar.
|-
|Spiele funktionieren auch offline.
|
|}

==== Methode 2: Das Bild hochladen ====
Wenn man das Bild auf einer Image-Hosting-Plattform wie https://de.imgbb.com hochlädt, erhält man einen Link zum Bild, den man wie folgt einfügen kann:
<img src="https://i.ibb.co/xe5Tz7K/elster.jpg" alt="Bild einer Elster" border="0">
Der Text hinter <code>alt=</code> wird beispielsweise angezeigt, wenn das Bild nicht verfügbar ist oder das Spiel von einem Screenreader vorgelesen wird. <code>border="0"</code> bedeutet, dass um das Bild herum kein Rahmen gezogen werden soll; in diesem Fall kann die Angabe aber auch entfallen.

Mit den Attributen <code>width</code> und <code>height</code> lässt sich die Größe des Bildes anpassen. Gibt man nur einen der beiden Werte an, wird der andere proportional angepasst.
<img src="https://i.ibb.co/xD5ev8K/apfel.jpg" alt="Bild eines Apfels" width=300>
{| class="wikitable"
|'''Vorteile'''
|'''Nachteile'''
|-
|Bilder müssen nicht mitgeliefert werden.
|Man muss beim Spielen online sein.
|-
|Bilder sind auch beim Testen sichtbar.
|Spätere Verfügbarkeit nicht garantiert.
|}

Bilder können auch als Links verwendet werden. Im folgenden Beispiel gelangt man in den Abschnitt <code>Schatzkammer</code>, wenn man auf das Bild eines Schlüssels klickt:

''Hinweis:'' Lizenzfreie Bilder für Spiele und andere Projekte findet man z. B. auf https://pixabay.com/de oder https://commons.wikimedia.org.