Bilder mit Menü

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich brauche mal eure Hilfe, um auf den richtigen Weg zu gelangen:

Ich brauche ein kleines Menü, wo man Zeitschritte durchklicken kann. 0,3,6,9,12, usw…
Wenn ich auf diesen „Button“ klicke soll das jeweilige Bild kommen, was ich brauche.
Zusätzlich muss gewährleistet sein, dass ich ein Zeitschritt berechnen kann. Ich habe mein Datum
und muss dann Stunden dazuaddieren - je nach dem Wert des geklickten Buttons. Im Prinzip sowas wie hier:
http://www.weatheronline.co.uk/cgi-bin/expertcharts?LANG=de&CONT=euro&MODELL=gfs&VAR=prec

Weiß jemand wie man das am besten macht? PHP, CSS, jQuery, JavaScript, etc …

Meine Idee wäre, einfach mit CSS schlichte Felder zu machen, in dem ich die Zahlen reinschreibe. Und dann per PHP
den Wert auszulesen des Feldes und das entsprechende Bild anzuzeigen und das Datum zu berechnen.
Ich will keinen fertige Quellcode, sondern nur eure Erfahrung, mit was ich sowas verwirkliche am besten.
Danke schonmal.

2

Mit PHP hättest du bei jedem Klick einen kompletten Seitenrefresh.

Das ist eine JS-Aufgabe, eventuell Ajax, sofern ein PHP-Skript involviert sein soll.

3

Okay, danke für die Hilfe.

4

Sagen wir du hast 100 Bilder mit den Namen bild1.jpg - bild100.jpg
Diese möchtest du anzeigen sobald ein Button geklickt wird. Zusätzlich soll noch in 3er Schritten hochgezählt werden.
Das kannst du mit jQuery machen, wäre zumindest mein Ansatz. (Pseudocode)

var zaehler = 0;
var bildZaehler = 0;
$('#button').click(function() {
   zaehler = zaehler + 3; //Mit jedem klick erhöht sich zaehler um 3 (0,3,6,9,...)
   bildZaehler++;
   $('#bildAnzeige').css('background-image',"'bild'+bildZaehler+'.jpg'"); //Mit jedem klick kriegt dein Element mit der ID "bildAnzeige" ein neues Hintergrundbild nämlich "bildx.jpg" - Syntax checken.
});

Ist ungetestet aber so würde ich an die Sache rangehen.

5

Ganz so einfach ist es nicht. Um Datumsberechnungen zu erstellen, muss man schon Date-Object verwenden, und hinsichtlich der Dreier-Schritte würde sich eine Abfrage über Modulo anbieten.

if (zaehler % 3 == 0) { // tu was }