Quelltext der Seite Bilder einfügen

[[Kategorie:Bedienung des Backends]]
DynPG bietet für das Einbinden von Bildern viele nützliche Optionen und Effekte, welche in diesem Artikele genauer beschrieben werden.
== Bilder einfügen ==
Um im [[Texteditor]] ein Bild in den Artikel einzufügen, klicken Sie auf das [[Image:Image.gif]] "Bild einfügen"-Icon in der Werkzeugleiste. Hierauf erscheint ein neues Fenster, in dem Sie das Bild auswählen und weitere Einstellungen vornehmen können.

Geben Sie zuerst die Informationen zum Bild an:
* '''Adresse''': die Adresse des Bildes. Klicken Sie auf den "Durchsuchen"-Button rechts vom Eingabefeld, um eine hochgeladene Datei auszuwählen.
* '''Beschreibung''': Beschreibungstext des Bildes.
* '''Titel''': Titel des Bildes, welcher erscheint, sobald Sie mit der Maus über das Bild fahren.

=== Aussehen ===
[[Image:Texteditor - Bild Aussehen.png|center]]


{| border=0

|- 
| '''Ausrichtung''':
| Ausrichtung des Bildes relativ zum Text. Betrachten Sie die Vorschau um die verschiedenen Ausrichtungen zu sehen.

|- 
| '''Ausmaße''':
| Breite und Höhe des Bildes. Die Option "''Seitenverhältnis beibehalten''" passt bei Veränderung einer Dimension automatisch die jeweils andere Dimension entsprechend des Seitenverhältnisses des Bildes an.

|- 
| '''Vertikaler Abstand''':
| Abstand vom oberen Rand / Element in der Seite.

|- 
| '''Horizontaler Abstand''':
| Abstand vom linken Rand / Element in der Seite.

|- 
| '''Rahmen''':
| Breite des Rahmens in Pixel.

|- 
| '''CSS-Klasse''':
| Auswahlfeld für die CSS-Klasse, die für das Bild verwendet werden soll. Sie können CSS-Klassen im [[Einstellungen#CSS-Vorgabenmanager|CSS-Vorgabenmanager]] bei den Einstellungen definieren.

|- 
| '''Format''':
| CSS-Formatierungsoptionen des Bildes.

|}


=== Erweitert ===
==== Bildwechsel ====
Sie können einen Bildwechsel bestimmen, der stattfindet, wenn der Mauszeiger über das Bild bzw. vom Bild wegbewegt wird. Aktivieren Sie dazu im Bereich "''Bild austauschen''" die Option "Alternatives Bild" und geben Sie das jeweilige Bild an.
* ''bei Mauskontakt'': das Bild wird angezeigt, wenn der Mauszeiger den Bildbereich berührt.
* ''bei keinem Mauskontakt'': das Bild wird angezeigt, wenn der Mauszeiger den Bildbereich verlässt.

==== Verschiedenes ====
{| border=0

|- 
| ''ID'':
| CSS-ID des Bildes.

|- 
| ''Schriftrichtung'':
| die Ausrichtung der Schrift (von links nach rechts oder von rechts nach links).

|- 
| ''Sprachcode'':
| der Sprachcode für das Bild.

|- 
| ''Image-Map'':
| Beschreibung der HTML Image-Map.

|- 
| ''Ausführliche Beschreibung'':
| Eine ausführliche Beschreibung des Bildes.
|}