Frage von kikichog, 107

HTML -Bild anklicken und Text erscheint?

Hallo zusammen,

ich bin kein HTML-Ass da ich es nie gelernt habe. Ich erstelle jedoch zur Zeit eine offline Webseite und möchte gerne ein mehrere Bilder einfügen auf die man klicken kann, wo dann ein Text darunter erscheinen soll. Kann mir jemand helfen wie ich das umsetzen kann?

Vielen Dank!

Antwort
von fluffiknuffi2, 83

Schätze der Text soll sofort erscheinen ohne dass die ganze Seite neu geladen wird?

Dann wäre JavaScript das richtige Werkzeug dafür. Ist im Grunde nicht schwer aber schätze du möchtest das eher nicht selber programmieren? :p

Hier ein Lösungsvorschlag: https://jsfiddle.net/g1psh2rk/

Variante: https://jsfiddle.net/g1psh2rk/1/

Bitte beachten, dass der Code mit jQuery arbeitet, das du in deine Seite einbinden musst!

Kommentar von kikichog ,

Danke für die Hilfe,

kann man das ganze auch ohne Java realisieren?

Kommentar von fluffiknuffi2 ,

Vielleicht irgendwie mit Tricks. Ich wüsste aber spontan nicht wie.

Oder eben doch mit Neuladen der ganzen Seite, dann ist es kein Problem aber natürlich weniger schön.

Kommentar von Konsi91 ,

hey ich hab da ne frage ich hab das alles so gemacht so wie du es geschrieben hast von dein 2 Vorschlag hab auch jQuery eingefügt und das Problem ist das die Bilder mir angezeigt werden aber der Text nicht was könnte ich den falsch gemacht haben ?!

Kommentar von fluffiknuffi2 ,

Hast du jQuery so eingefügt, dass es vor dem JS-Code schon geladen ist? 

Ansonsten musst du die Entwicklertools deines Browsers aufrufen und schauen ob dort eine JS-Fehlermeldung angezeigt wird. Wie du die aufrufst hängt vom Browser ab, z. B. mit Strg+Umschalt+I.

Kommentar von Konsi91 ,

Boo tut mir leid ich bin sowas von ein Anfänger kannst du mir vill schreiben was ich da machen müßte 🤔😆

Kommentar von fluffiknuffi2 ,

Naja mit diesem Code fügst du jQuery ein:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Du musst dabei nur darauf achten dass diese Zeile vor dem JS-Code steht. Am einfachsten ist es, wenn du sie direkt im Header (also <head> ) einfügst.

Antwort
von linuxmensch12, 50

Hallo,

wenn du willst, dass sich, wenn du auf das Bild klickst, eine neue Seite öffnet, sollte der Code so aussehen:

Falls sich ein kleines Popup öffnen soll, sollte der Code so aussehen:

Ich hoffe ich konnte helfen

linuxmensch12

Kommentar von linuxmensch12 ,

Entschuldigung, dass der Code nicht in der Antwort steht.

Code 1:

<a href="Link zur Seite"><img src="Quelle vom Bild" alt="Text, falls das Bild nicht gefunden weden kann"></a>

Code 2:

<a href="javascript:alert('Text, der angezeigt werden soll')"><img src="Quelle vom Bild" alt="Text, falls das Bild nicht gefunden werden kann"></a>

Ich hoffe ich konnte helfen

linuxmensch12

Antwort
von Theo130170, 64

https://www.selfhtml.org/

eigentlich ist es nichts weiter als ein Link ( ahref)

gruß

Theo

Kommentar von kikichog ,

aber dann werde ich auf eine neue Seite o.ä. geleitet. Das möchte ich nicht.

Ich habe eine Seite, da sind Bilder drauf. Klicke ich auf das Bild, erscheint lediglich ein Text darunter, auf der Selben Seite. Klicke ich auf das nächste Bild, erscheint ein andere Text genau auf der Position wo der vorherige Text stand der dann weggeblendet wird.

Kommentar von mastema666 ,

Da wirst du wohl um JavaScript (nicht Java) kaum herumkommen, ohne ginge das wohl nur mit einer serverseitigen Sprache wie z.B. PHP und einem Reload (oder mit vielen verschiedenen HTML Dateien und Reloads, aber das wäre imho Quatsch, am einfachsten und auch für den User am komfortabelsten ist imho die Variante mit JS, wie das genau geht wurde ja oben schon gepostet).

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten