Hallo, Gast! (Registrieren)

Letzte Ankündigung: MyBB 1.8.27 veröffentlicht (22.06.21)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Bilder auf Hilfeseiten
#1
Moin zusammen, 

ich würde gerne ein paar Hilfeseiten erstellen wo aber auch mal ein Bild mit bei sein sollte. 

Nun habe ich es mit html umd img code versucht bekomme aber nur den Text vom Link angezeigt. 

Gibt es eine Möglichkeit Bilder auf den Hilfeseiten anzeigen zu lassen?
Zitieren
#2
Mit HTML funktioniert das eigentlich.
Zitieren
#3
Ok, danke für die schnelle Antwort, hab es jetzt hinbekommen.

Gibt es auch eine Möglichkeit das man die entsprechenden Bilder durch anklicken vergrößern kann und sonst verkleinert dargestellt werden wie im Forum auch?
Zitieren
#4
vielleicht über den kleinen Umweg mit zwei Grafiken, wobei auf der kleinen Grafik der Link zur großen Grafik liegt
schönen Gruß
bv64 / Lu

kein Support per PN, Mail, Messenger etc.
still alive - aus gesundheitlichen Gründen aktuell nur sehr sporadisch aktiv
Zitieren
#5
Du könntest folgendes versuchen:

Lege ein Bild in Wunschgröße an z.B. 600x600px.
Dann folgender Code:
Code:
<div id="meinbild">
<a href="images/meinbild.png"></a>
</div>
dann folgende css-Anweisungen:
Code:
#meinbild a {
diplay: block;
width: 200px;
height: 200px;
background: url(../images/meinbild.png) no-repeat;
}
#meinbild a:hover {
width: 400px;
height: 400px;
}
Das Bild wird jetzt in 200x200px angezeigt, beim hovern in 400x400px und beim Anklicken in Originalgröße.
Pfade natürlich noch anpasse. Wink
Zitieren
#6
Hier nochmal ne andere Möglichkeit (ohne Link, nur mit hover-Effekt).

html:
Code:
<img src="meinbild.png" class="meinbild" width="100" height="100">
css:
Code:
img.meinbild {
transition: transform 0.5s;
}
img.meinbild:hover {
transform: scale(3.0, 3.0);
}
"transition" legt die Geschwindigkeit des hover-Effekts fest
"transform" den Faktor des Zooms
Das Originalbild sollte also bei dieser Konstellation in ca. 300x300px vorliegen, damit es beim Zoomen nicht unscharf wird.
Zitieren
#7
(22.07.2019, 11:03)Schnapsnase schrieb: Du könntest folgendes versuchen:

Lege ein Bild in Wunschgröße an z.B. 600x600px.
Dann folgender Code:
Code:
<div id="meinbild">
<a href="images/meinbild.png"></a>
</div>
dann folgende css-Anweisungen:
Code:
#meinbild a {
diplay: block;
width: 200px;
height: 200px;
background: url(../images/meinbild.png) no-repeat;
}
#meinbild a:hover {
width: 400px;
height: 400px;
}
Das Bild wird jetzt in 200x200px angezeigt, beim hovern in 400x400px und beim Anklicken in Originalgröße.
Pfade natürlich noch anpasse. Wink

Nur weil moderne und gegenwärtige Browser uns einige Fehler verzeihen, sollten wir die #id nicht missbrauchen und pro Element und HTML Dokument öfter als 1x vergeben. Ich denke der Threaderteller wird u.Ü mehr als 1 Bild einbinden (wollen) mit evtl. unterschiedlichen Styling (kann natürlich auch sein, dass es nicht so ist - bleibt dem Threadersteller überlassen)

https://www.askingbox.de/info/html-unter...-und-class

Desweiteren frage ich mich, weshalb als block darstellen?
Zitieren
#8
@ itsmeJAY

Ich hatte nichts davon gesagt, dass er die #id mehrmals verwenden soll. Big Grin 
Wenn dem so sein soll, dann hast Du natürlich recht - dann eben eine Klasse definieren.

Da der a-Tag keinen Inhalt hat, aber in einer festen Größe angezeigt werden soll, ziehe ich hier
ein Blockelement in Betracht.
Sollte ich da einen Denkfehler haben, oder dies nicht nötig sein, dann berichtige mich bitte.

Grüße
Zitieren
#9
Er kriegt aber dann nur Bilder untereinander wegen dem Block. Der Block besetzt immer die komplette Breite - wenn er bspw. 5 Bilder anzeigen möchte, werden 5 Reihen benötigt.. Vielleicht wäre in dem Falle display: inline-block; besser. Dort solltest du auch eine feste height und width definieren können und die Bilder sind schön nebeneinander Big Grin bzw inline..
Zitieren
#10
Mit float sollte das auch gehen.
Das ist doch jetzt aber nicht der Ursprung Deiner Kritik.
Hast Du was gegen mich? Big Grin Big Grin Toungue
Zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Hilfeseiten: Frontend = Deutsch / ACP = Englisch Gerti 14 1.507 25.09.2019, 12:27
Letzter Beitrag: Gerti
  Hilfeseiten nicht bearbeitbar? Gerti 3 921 23.02.2018, 13:28
Letzter Beitrag: Gerti
  Hilfeseiten formatiert darstellen Brubaker 6 1.805 15.02.2017, 21:16
Letzter Beitrag: MrBrechreiz
  Hilfeseiten blacksocks 2 1.071 02.10.2016, 20:27
Letzter Beitrag: blacksocks