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

Wolfgang

Administrator

Beitr�ge:	2139
Registriert:	10.12.2006
Blog:	Wolfgangs Blog
Homepage:	Nicht angegeben
Forum:	Nicht angegeben
Forum 1:	Nicht angegeben
Forum 2:	Nicht angegeben
Forum 3:	Nicht angegeben

08.05.2011 00:47 (zuletzt bearbeitet: 05.09.2017 21:53)

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

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

[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

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

Antworten!

Thema abonieren Startseite Letzte Beitr�ge

Antworten

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

Wolfgang

Administrator

Beitr�ge:	2139
Registriert:	10.12.2006
Blog:	Wolfgangs Blog
Homepage:	Nicht angegeben
Forum:	Nicht angegeben
Forum 1:	Nicht angegeben
Forum 2:	Nicht angegeben
Forum 3:	Nicht angegeben

25.09.2015 00:53 (zuletzt bearbeitet: 05.09.2017 21:59)

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>
 