Frage von Dsrontic, 16

Html suchfunktion im label?

Hallo, ich habe vorkurzem angefangen mit html zu programieren und stehe nun vor einem problem.

Ich habe eine seite bei der man auf bilder klickt und dann zu der seite von dem bild weitergeleitet wird, da es nun aber viele bilder werden wollte ich eine suchfunktion einbauen.

Habe nun ein Label erstellt dort kann ich halt den namen eingeben aber wie kann ich ein button einbauen und wie mache ich das wenn drinnensteht "Katze" oder so das dann das katzenbild geöffnet wird ? hoffe könnt mir helfen.

Antwort
von Minilexikon, 8

Da hast du dir meiner Meinung nach für das erste ein bisschen viel vorgenommen. Ohne Hilfe, Copy&Paste oder sehr viel Erklärung wirst du da auch nicht weit kommen.

Was du haben willst, ist ein Filter.

Du musst jetzt noch dafür sorgen, dass dein Filter weiß, welche Bilder du hast und welche davon Katzenbilder sind.

Ich kenne dein HTML nicht, gehe aber davon aus, dass du jedes Bild einfach einzeln ins HTML eingegeben hast, ohne Schleife und alles.

Dann wäre es am einfachsten, den img-Tags ein data-Attribut mit der Kategorie zu geben.

<div class="images">
...
<img src="/img/cat.jpg" data-category="cats" />
<img src="/img/lizzy2.jpg" data-category="cats" />
<img src="/img/dog.jpg" data-category="dogs" />
...
</div>

Als nächstes müsstest du dein HTML filtern. Ich schlage vor, dafür jQuery einzubinden.

images = $('.images img');
function filter(category) {
    images.filter('[data-category="' + category + '"]').show();
    images.not('[data-category="' + category + '"]').hide();
}

Es wäre sicherlich besser, alle Bilder und die gewünschten Metadaten (title, alt, category, etc.) vorher in ein Objekt zu packen, dieses dann via underscore.js zu filtern und dann den Inhalt mit einer Schleife und vielleicht einer Templateengine auszugeben, aber das würde ich in deinem Fall auf später verschieben. Oder aber man macht es, wie Xandoo94 auch vorgeschlagen hat, serverseitig.

Wenn noch etwas unklar ist oder du sonst Fragen hast, scheue dich nicht, sie zu stellen ;)

Kommentar von Dsrontic ,

Ich werds jetzt mal ausprobieren wenn ich ein problem hab frag ich nochmal :)

Kommentar von Minilexikon ,

Okay, super. Jopp, kannst du gerne machen :)

Antwort
von Xandoo94, 12

Erstmal kann man HTML nicht programmieren da es keine Programmiersprache ist die du dazu alleidings benötigst ich empfehle dir entweder Javascript oder PHP zu nutzen mit reinem html lässt sich das meines Wissens nach nicht lösen

Keine passende Antwort gefunden?

Fragen Sie die Community