+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: MyBB 1.8.x (https://www.mybb.de/forum/forum-87.html)
+--- Forum: Allgemeiner Support (https://www.mybb.de/forum/forum-88.html)
+--- Thema: Bilder auf Hilfeseiten (/thread-36647.html)
Seiten: Seiten:
1
2
Bilder auf Hilfeseiten - lenox - 22.07.2019
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?
RE: Bilder auf Hilfeseiten - doylecc - 22.07.2019
Mit HTML funktioniert das eigentlich.
RE: Bilder auf Hilfeseiten - lenox - 22.07.2019
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?
RE: Bilder auf Hilfeseiten - bv64 - 22.07.2019
vielleicht über den kleinen Umweg mit zwei Grafiken, wobei auf der kleinen Grafik der Link zur großen Grafik liegt
RE: Bilder auf Hilfeseiten - Schnapsnase - 22.07.2019
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>Code:
#meinbild a {
diplay: block;
width: 200px;
height: 200px;
background: url(../images/meinbild.png) no-repeat;
}
#meinbild a:hover {
width: 400px;
height: 400px;
}Pfade natürlich noch anpasse.
RE: Bilder auf Hilfeseiten - Schnapsnase - 22.07.2019
Hier nochmal ne andere Möglichkeit (ohne Link, nur mit hover-Effekt).
html:
Code:
<img src="meinbild.png" class="meinbild" width="100" height="100">Code:
img.meinbild {
transition: transform 0.5s;
}
img.meinbild:hover {
transform: scale(3.0, 3.0);
}"transform" den Faktor des Zooms
Das Originalbild sollte also bei dieser Konstellation in ca. 300x300px vorliegen, damit es beim Zoomen nicht unscharf wird.
RE: Bilder auf Hilfeseiten - itsmeJAY - 22.07.2019
(22.07.2019, 10:03)Schnapsnase schrieb: Du könntest folgendes versuchen:
Lege ein Bild in Wunschgröße an z.B. 600x600px.
Dann folgender Code:
dann folgende css-Anweisungen:Code:<div id="meinbild">
<a href="images/meinbild.png"></a>
</div>
Das Bild wird jetzt in 200x200px angezeigt, beim hovern in 400x400px und beim Anklicken in Originalgröße.Code:#meinbild a {
diplay: block;
width: 200px;
height: 200px;
background: url(../images/meinbild.png) no-repeat;
}
#meinbild a:hover {
width: 400px;
height: 400px;
}
Pfade natürlich noch anpasse.
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-unterschied-zwischen-id-und-class
Desweiteren frage ich mich, weshalb als block darstellen?
RE: Bilder auf Hilfeseiten - Schnapsnase - 22.07.2019
@ itsmeJAY
Ich hatte nichts davon gesagt, dass er die #id mehrmals verwenden soll.
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
RE: Bilder auf Hilfeseiten - itsmeJAY - 22.07.2019
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
bzw inline..
RE: Bilder auf Hilfeseiten - Schnapsnase - 22.07.2019
Mit float sollte das auch gehen.
Das ist doch jetzt aber nicht der Ursprung Deiner Kritik.
Hast Du was gegen mich?
