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!
3 Antworten
eigentlich ist es nichts weiter als ein Link ( ahref)
gruß
Theo
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).
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!
Danke für die Hilfe,
kann man das ganze auch ohne Java realisieren?
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.
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 ?!
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.
Boo tut mir leid ich bin sowas von ein Anfänger kannst du mir vill schreiben was ich da machen müßte 🤔😆
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.
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
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
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.