[lenox]

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?

[doylecc]

Mit HTML funktioniert das eigentlich.

[lenox]

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?

[bv64]

vielleicht über den kleinen Umweg mit zwei Grafiken, wobei auf der kleinen Grafik der Link zur großen Grafik liegt

[Schnapsnase]

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.

[Schnapsnase]

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.

[itsmeJAY]

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.

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?

[Schnapsnase]

@ 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

[itsmeJAY]

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

[Schnapsnase]

Mit float sollte das auch gehen.
Das ist doch jetzt aber nicht der Ursprung Deiner Kritik.
Hast Du was gegen mich?