Forum-Bilder mit einstellbarer Größe und Tooltipps austatten - Teil 1! Aktualisiert 09.04.22
Bist jetzt konnte man die Größe von Forum-Bilder nicht einstellen. Es musste, wenn nötig, das Bild mit bestimmten Tools oder auch Online verkleinert werden. Mit Hilfe von "Variablen" und der "Forum-Codeumsetzung" ist es möglich, Bildern eine Breite zuzuweisen und sie zusätzlich noch mit "Tooltipps" auszustatten. Um Bilder kleiner darzustellen, braucht man nur eine Größe (Breite) zu verändern, da sich die andere Größe proportional anpasst. Die Größenangabe der Breite ist mit px, pt oder % zulässig. Es ist auch möglich Bilder mit erklärenden Tooltipps auszustatten. Weiterhin gibt es auch eine "Variable", die ein freies formatieren des Bildes zulässt!
Die neuen Foren-Codes sehen dann wie folgt aus:
Die Angaben erfolgen ohne Häkchen ("), wie im normalen Foren-Code (BB-Code).
Es würde 4 neue Forum-Variablen und 1 alte Forum-Variablen zur Verfügung stehen!
Normales Bild ohne zusätzlichen Angaben (bereits vorhanden):
[img]http://www.Bilderserver.de[/img]
Bild mit Breite:
[img=200px]http://www.Bilderserver.de[/img]
Bild mit Breite und Tooltipp:
[img=200px title=Breite mit Tooltipp]http://www.Bilderserver.de[/img]
Bild mit Style und Tooltipp:
[img style=background:#eeeeee;width:200px;border:1px solid #000000;padding:5px title=Freestyle mit Tooltipp]http://www.Bilderserver.de[/img]
Bild mit Tooltipp:
[img title=Bild mit Tooltipp]http://www.Bilderserver.de[/img]
• Bitte mit der Mauszeiger über die Bilder gleiten!
Bildbreite: 50px - 200px - 300px
• Es wird das gleiche Bild eingesetzt!
[img=50 title=Bild mit einer Breite von 50px und Tooltipp]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img][img=200 title=Bild mit einer Breite von 200px und Tooltipp]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img][img=500 title=Bild mit einer Breite von 500px und Tooltipp]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img]
[mouseover] [img=100]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img][Bild][img title=Bild mit Tooltipp in Originalgröße 800x600px]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img] [/Bild][/mouseover]
Die neuen Foren-Bildercodes in die Iconbar einbauen - Teil 2! Aktualisiert 09.04.22
Will man die Foren-Codes mit einen Klick in den Beitrag einfügen, geht das wie folgt! Ich möchte hier 3 Möglichkeiten aufzeigen!
Die erste und einfachste Lösung ist das vorhandenen Icon (Bild mit Pluszeichen) zu überschreiben:
Wenn noch nicht geschehen, die in Beitrag #1 beschriebenen Forencode erstellen und in "nicht sichtbar" verschieben.
Über die rechten Spalte der Iconbar [img]..[/img] aufrufen.
Einen der 4 möglichen Variationen (außer die Erste) aussuchen und den HTML-Code unter "HTML" wie folgt anpassen.
Passenden Namen unter "Name" vergeben.
Werden mehre Foren-Bildercodes gebraucht, Icon verändern oder Tooltipp anpassen und unter einem neuen HTML-Eingabefeld den entsprechenden HTML-Code einfügen.
Fertig!
"alt" und "title" können im HTML-Code angepasst werden!
Bild mit Breite:
<div onclick="xob_insert('[img=200px]','[/img]')" class="xob_icon_cont"><img alt="Bild mit Breite" title="Bild mit Breite" class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/picture.png" ></div>
Bild mit Breite und Tooltipp:
<div onclick="xob_insert('[img=200px titel=Bild mit Breite und Tooltipp]','[/img]')" class="xob_icon_cont"><img alt="Bild mit Breite und Tooltipp" title="Bild mit Breite und Tooltipp" class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/picture.png" ></div>
Bild mit eigenen Style:
<div onclick="xob_insert('[img style=background:#eeeeee;width:200px;border:1px solid #000000;padding:5px;border-radius:9px;][/style]','[/img]')" class="xob_icon_cont"><img alt="Bild mit eigenen Style" title="Bild mit eigenen Style" class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/picture.png" ></div>
Bild mit Tooltipp:
<div onclick="xob_insert('[img title=Bild mit Tooltipp]','[/img]')" class="xob_icon_cont"><img alt="Bild mit Tooltipp" title="Bild mit Tooltipp" class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/picture.png" ></div>
In der zweiten Lösung werden die Bilder-Icons in eine Gruppe untergebracht:
Wenn noch nicht geschehen, die in Beitrag #1 beschriebenen Forencode erstellen und in "nicht sichtbar" verschieben.
Über die Iconbar und den Reiter "HTML" das Eingabefeld "HTML" aufrufen.
Zwei, drei oder vier mögliche Variationen aus den HTML-Variationen aussuchen und den "HTML-Code" eingeben.
Passenden Namen unter "Name" vergeben.
Über die Iconbar und den Reiter "Gruppe", Gruppe anlegen, Namen und Grafik vergeben.
Neu Angelegte Bilder-Icons in die Gruppe schieben.
Breite anpassen.
Unter "Erweiterte Einstellungen" den Versatz falls notwendig anpassen.
Eine Gruppe anlegen lohnt sich, wenn mehr als ein Foren-Bildercode Verwendung findet.
Fertig!
"alt" und "title" können im HTML-Code angepasst werden!
Bild mit Breite:
<div onclick="xob_insert('[img=200px]','[/img]')" class="xob_icon_cont"><img alt="Bild mit Breite" title="Bild mit Breite" class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/picture.png" ></div>
Bild mit Breite und Tooltipp:
<div onclick="xob_insert('[img=200px titel=Bild mit Breite und Tooltipp]','[/img]')" class="xob_icon_cont"><img alt="Bild mit Breite und Tooltipp" title="Bild mit Breite und Tooltipp" class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/picture.png" ></div>
Bild mit eigenen Style:
<div onclick="xob_insert('[img style=background:#eeeeee;width:200px;border:1px solid #000000;padding:5px;border-radius:9px;][/style]','[/img]')" class="xob_icon_cont"><img alt="Bild mit eigenen Style" title="Bild mit eigenen Style" class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/picture.png" ></div>
Bild mit Tooltipp:
<div onclick="xob_insert('[img title=Bild mit Tooltipp]','[/img]')" class="xob_icon_cont"><img alt="Bild mit Tooltipp" title="Bild mit Tooltipp" class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/picture.png" ></div>