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

Forum → 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+2!

Hier sehen Sie Beitr�ge zu den einzelnen Themen

Themen-Einstellungen Thema

Thema abonnieren

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! 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 Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante 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+2! datum

08.05.2011 00:47 (zuletzt bearbeitet: 17.08.2019 15:40)

Wolfgang

Administrator

Informationen anzeigen

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

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

• Zusätzlich "Tooltipp" installieren: Flinke Tooltipps mit dem hauseigenen jQuery!

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

• Zusätzlich "Tooltipp" installieren: Flinke Tooltipps mit dem hauseigenen jQuery!

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:

• Zusätzlich "Tooltipp" installieren: Flinke Tooltipps mit dem hauseigenen jQuery!

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

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

• 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]

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;]https://files.homepagemodules.de/b104774/f46t1197p2706n121_bdLBIYKE.jpg[/img]

Schlie�en

• Bitte mit der Maus das Bild berühren!

• Zusätzlich "Mouseover" installieren: Bilder vergrößert darstellen durch einfaches "Mouseover"

[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]

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

Thema abonnieren Forum �bersicht Letzte Beitr�ge

Antworten

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

25.09.2015 00:53 (zuletzt bearbeitet: 17.08.2019 16:50)

Wolfgang

Administrator

Informationen anzeigen

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

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:

Bild mit Breite und Tooltipp:

Bild mit Style und Tooltipp:

Bild mit Tooltipp:

Schlie�en

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:

Bild mit Breite und Tooltipp:

Bild mit Style und Tooltipp:

Bild mit Tooltipp:

Schlie�en

In der dritten Lösung werden die Foren-Bildercodes im DropDown-Menü 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.
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.
Wird ein Foren-Bildercode nicht gebraucht, einfach die entsprechende Zeile von "<option...> ... </option> löschen!
Fertig!

1
2
3
4
5
6
7
8
9
10
11
12
 
<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]')">Bild einfügen mit Breite</option>
<option value="javascript:insert ('[img=200px titel=Bild mit Breite und Tooltipp]','[/img]')">Bild einfügen mit 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]')">Bild einfügen mit Style und Tooltipp</option>
<option value="javascript:insert ('[img title=Bild mit Tooltipp]','[/img]')">Bild einfügen mit Tooltipp</option>
</optgroup>
</select>
</div>
 