Forum - Forum-Bilder mit einstellbarer Größe und Tooltipps austatten

Lesezeichen

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages » Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps » Forum-Bilder mit einstellbarer Größe und Tooltipps austatten - Teil 1!
Hier sehen Sie Beiträge zu den einzelnen Themen

Themen-Einstellungen

Thema abonnieren

Thema drucken

Bereich wechseln

Start Willkommen! Ankündigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Präsentation - Fragen und Antworten Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten Ärger mit Ihrem PC? Ärger mit dem PC - Vorbeugung und Hilfe Ärger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Archiv Die besten Links Die besten Links!!! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps für Smartphones und iPhones Lob, Kritik & Verbesserungsvorschläge Spiel & Spaß, Witz & gute Laune! Spiritualität, Seele, New Age, Yoga, Gesundheit Alles, was noch so übrig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Forum-Bilder mit einstellbarer Größe und Tooltipps austatten - Teil 1! datum

08.05.2011 00:47 (zuletzt bearbeitet: 26.09.2015 16:32)

Wolfgang

Informationen anzeigen

Beiträge:	1879
Beiträge:
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog


Board-Nr:	104774

Forum-Bilder mit einstellbarer Größe und Tooltipps austatten - Teil 1!
Aktualisiert 25.09.15

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 "Forumcodeumsetzung" 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 title=Free-Style mit Tooltipp style=background:#eeeeee;width:200px;border:1px solid #000000;padding:5px]http://www.Bilderserver.de[/img]

Bild mit Tooltipp:

[img title=Bild mit Tooltipp]http://www.Bilderserver.de[/img]

Schließen

Foren-Code erstellen:

Siehe auch: Kuriositäten und ungereimtes zur Xobor-Iconbar / Punkt 3

  • Neue Iconbar aufrufen
  • "Neue Icons hinzufügen" anklicken
  • Reiter Forencode anklicken
  • Erweiterte Foren-Code einblenden!
  • Werte eintragen und speichern
  • Forencode in "nicht sichtbar" verschieben

Bild mit Breite:

Ersetze:

1
2
3
 
[img={{breite}}]
...
[/img]
 

Mit:

1
2
3
 
<img style="width:{{breite}} !important;" src="
...
" border="0">
 

Weitere Einstellungen:

1
 
Reihenfolge: 0

Schließen

Bild mit Breite und Tooltipp:

Ersetze:

1
2
3
 
[img={{breite}} title={{titel}}]
...
[/img]
 

Mit:

1
2
3
 
<img title="{{titel}}" style="width:{{breite}} !important;" src="
...
" border="0">
 

Weitere Einstellungen:

1
 
Reihenfolge: 0

Schließen

Bild mit style und Tooltipp (frei formatierbar):

Ersetze:

1
2
3
 
[img style={{style}} title={{titel}}]
...
[/img]
 

Mit:

1
2
3
 
<img  title="{{titel}}" style="{{style}}" src="
...
" border="0">
 

Weitere Einstellungen:

1
 
Reihenfolge: 0

Schließen

Bild mit Tooltipp:

Ersetze:

1
2
3
 
[img title={{titel}}]
...
[/img]
 

Mit:

1
2
3
 
<img title="{{titel}}" src="
...
" border="0">
 

Weitere Einstellungen:

1
 
Reihenfolge: 0

Schließen

Um diesen Beitrag zu lesen, müssen Sie sich anmelden!

Ein kleines Dankeschön für meine Arbeit!

Schließen

Die neuen Foren-Bildercodes in Aktion:

• Bitte mit der Mauszeiger über die Bilder gleiten!

Bild mit einer Breite von 50px und Tooltipp

Bild mit einer Breite von 200px und Tooltipp

Bild mit einer Breite von 500px und Tooltipp

Bildgrößen: 50x38px - 200x267px - 500x667px

[ img=50 title=Bild mit einer Breite von 50px und Tooltipp]http://www.bilder-hochladen.net/files/big/1tys-mx.jpg[/img] [img=200 title=Bild mit einer Breite von 200px und Tooltipp]http://www.bilder-hochladen.net/files/big/1tys-mx.jpg[/img] [img=500 title=Bild mit einer Breite von 500px und Tooltipp]http://www.bilder-hochladen.net/files/big/1tys-mx.jpg[/img]

Schließen

• Bitte mit der Maus das Bild berühren!

[img title=Free-Style mit Tooltipp style=background:#eeeeee;width:500px;border:1px solid #555555;padding:9px;border-radius:9px;]http://www.bilder-hochladen.net/files/big/1tys-mx.jpg[/img]

Schließen

• Bitte mit der Maus das Bild berühren!

[mouseover] [img=100]http://www.bilder-hochladen.net/files/big/1tys-mx.jpg[/img][Bild][img title=Bild mit Tooltipp in Originalgröße 800x600px]http://www.bilder-hochladen.net/files/big/1tys-mx.jpg[/img]
[/Bild][/mouseover]

Schließen

Siehe Forum-Beitrag: Bilder vergrößern durch Mouseover-Effekt

Schließen

Weitere Links zum Thema "Bilder vergrößern":

Bilder vergrößert darstellen durch einfaches "Mouseover"

Abstand zwischen Bilder beliebig bestimmen

Bis dann und gutes Gelingen
Wolfgang

Startseite Letzte Beiträge

Antworten

#2 | Die neuen Foren-Bildercodes in die Iconbar einbauen! datum

25.09.2015 00:53 (zuletzt bearbeitet: 30.01.2016 17:10)

Wolfgang

Informationen anzeigen

Beiträge:	1879
Beiträge:
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog


Board-Nr:	104774

Die neuen Foren-Bildercodes in die Iconbar einbauen - Teil 2!

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 nutzen:

Wenn noch nicht geschehen, die in Teil 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!

"insert", "alt" und "title" müssen im HTML-Code angepasst werden!

Bild mit Breite:

Bild mit Breite und Tooltipp:

Bild mit Style und Tooltipp:

Bild mit Tooltipp:

Um diesen Beitrag zu lesen, müssen Sie sich anmelden!

Ein kleines Dankeschön für meine Arbeit!

Schließen

In der zweiten Lösung werden die Bilder-Icons in eine Gruppe untergebracht:

Wenn noch nicht geschehen, die in Teil 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 (außer die Erste) aus Lösung 1 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!

In der dritten Lösung werden die Foren-Bildercodes im DropDown-Menü untergebracht:

Wenn noch nicht geschehen, die in Teil 1 beschriebenen Forencode erstellen und in "nicht sichtbar" verschieben.
Über die Iconbar und den Reiter "HTML" das Eingabefeld "HTML" aufrufen.
HTML-Code unter "HTML" wie folgt eingeben.
Passenden Namen unter "Name" vergeben.
Das DropDown-Menü lohnt sich, wenn mehr als ein Foren-Bildercode Verwendung findet.
Fertig!

Wird ein Foren-Bildercode nicht gebraucht, einfach die entsprechende Zeile von "<option...> ... </option> löschen!

1
2
3
4
5
6
7
8
9
10
11
 
<div class="xob_icon_cont">
&nbsp;<select id="bildercode" name="bildercode" onChange="javascript:top.location = this.form.bildercode.options[this.form.bildercode.selectedIndex].value; this.form.bildercode.options[0].selected = true;">  
 
<option selected>Format</option>
<optgroup label="Bild einfügen">
<option value="javascript:insert ('[img=200px]','[/img]')">Breite</option>
<option value="javascript:insert ('[img=200px titel=Bild mit Breite und Tooltipp]','[/img]')">Breite + Tooltipp</option>
<option value="javascript:insert ('[img title=Bild mit Style und Tooltipp style=background:#eeeeee;width:200px;border:1px solid #000000;padding:5px;border-radius:9px;]','[/img]')">Style und Tooltipp</option>
<option value="javascript:insert ('[img title=Bild mit Tooltipp]','[/img]')">Tooltipp</option>
</select>
</div>
 