Bilder je nach auswahl anzeigen

[Carsten Kunze]

Hallo

Ich bin noch Anfänger in HTML. Hab mir aber schon ein paar Grundkenntnisse angeeignet.
Ich hab eine fast fertige Homepage geschrieben, nur steh ich gerade vor dem Problem das ich eine Seite habe mit Jahreszahlen wo je nach klick auf eine JAhreszahl die dazugehörigen Bilder angezeigt werden sollen. Ich wollt jetzt nciht für jede Jahreszahl eine eigene Seite schreibem (OK. sind zwar nur 9 Jahre aber die erweitern sich mit jedem Jahr auch)

Soweit was ich jetzt schon gelesen habe funktioniert das rein in HTML nicht. Nur hab ich leider bis jetzt keine Erfahrungen mit Javascript oder PHP.
Aus meinen Kenntnissen in anderen Programmiersprachen weiß ich zumindest schon das es mit einer Abfrage welches Jahr angeklickt wurde und einem Array funktionieren müsste. In dem Array stehen dann die Links zu den Bildern.

Kann mir evtl. jemand helfen das ich zumindest einen Anfang habe wie ich das Problem lösen kann?
Sprich:
Abfrage welches Jahr angeklickt wurde -> die dazugehörigen Bilder/Videos anzeigen auf der Seite unterhalb der Jahreszahlen

Danke schonmal im Voraus

Carsten

[Felix Riesterer]

Lieber Carsten,

Ich bin noch Anfänger in HTML. Hab mir aber schon ein paar Grundkenntnisse angeeignet.

dann rate ich Dir "Schuster, bleibe bei Deinen Leisten" und tue das, was Du kannst auch vernünftig und richtig. Jetzt Dein "kleines Problem" mit PHP lösen zu wollen (oder von mir aus mit JavaScript) macht die Sache nicht unbedingt besser, denn unterm Strich erhält der Seitenbesucher auch nur wieder eine neue Seite mit den relevanten Bildern...

Mein Fazit: Schreibe Deine neun Bilderseiten und bleibe bei Altbewährtem. Das ist in jedem Falle sicherer und stabiler.

Liebe Grüße,

Felix Riesterer.

[Carsten Kunze]

Hallo Felix.

Danke für die schnelle Antwort. OK dann werd ich die Seiten jeweils einzeln machen.

Kann ich ja immernoch später mal ändern wenn meine Kenntnisse weiter gestiegen sind.

[Hans Wurst]

Mein Fazit: Schreibe Deine neun Bilderseiten und bleibe bei Altbewährtem. Das ist in jedem Falle sicherer und stabiler.

Warum?
Wenn er was lernen will, dann wird er das auch!
So wie ich es verstanden habe, kann er schon programmieren, nur halt nich in PHP / JS.

@OP
Benutze JavaScipt-Events, wie <img id="2005" [...] onclick="showPic(this.id);" />

  
function showPic(id) {  
 if(Number(id) == 2005) // Zeige Bilder von 2005  
 else if(Number(id) == 2006) // Zeige Bilder von 2006  
 else // Zeige Bilder von heute oder so  
}  

[Felix Riesterer]

Lieber Hans Wurst,

Mein Fazit: Schreibe Deine neun Bilderseiten und bleibe bei Altbewährtem. Das ist in jedem Falle sicherer und stabiler.
Warum?
Wenn er was lernen will, dann wird er das auch!

alles zu seiner Zeit. So, wie ich die Lage einschätze, steht der OP vor seinem ersten größeren Webprojekt, für das er sich eigens in die Grundlagen von HTML(!) eingearbeitet hat. Wenn ich bedenke, welchen Lernweg ich in Sachen HTML zurücklegen musste, und welchen Lernweg andere wie hier im Forum des öfteren zu beobachten ist zurücklegen, denke ich allen Ernstes, dass meine momentane Empfehlung sinnvoll war.

So wie ich es verstanden habe, kann er schon programmieren, nur halt nich in PHP / JS.

Schon klar. Aber sinnvoller (lies: "sinnbehafteter" oder "semantischer") HTML-Code ist ein Ziel, das man sicher nicht durch PHP oder JavaScript erlernt, sondern durch das Schreiben von (X)HTML-Dokumenten. Wenn das dann einigermaßen sitzt, dann kann man an PHP oder/und JavaScript gehen. Aber die Grundlage eines sinnvollen oder gar semantischen Codes ist meines Erachtens zu sehr erstrebenswert, als dass man diese Qualität aus den Augen verlieren darf. Ein zu frühes Ausprobieren in den ergänzenden Technologien (client- oder serverseitig) kann diesen Lernprozess bremsen, da man sich eher verzettelt. Deswegen meine Empfehlung.

@OP
Benutze JavaScipt-Events, wie <img id="2005" [...] onclick="showPic(this.id);" />

function showPic(id) {
if(Number(id) == 2005) // Zeige Bilder von 2005
else if(Number(id) == 2006) // Zeige Bilder von 2006
else // Zeige Bilder von heute oder so
}

  
Bei allem Respekt, aber das halte ich dann doch für ernsthaft suboptimal! Dieser Code ist ja wie aus dem letzten Jahrtausend! Genau sowas sollte sich der OP erst garnicht angewöhnen! Schau mal lieber in [meinen Artikel](http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/) nach, wie man ein JavaScript sinnvoller aufbaut. "Hartcodierte" Eventhandler... brrrrr!  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)

[steckl]

Hi,

Schon klar. Aber sinnvoller (lies: "sinnbehafteter" oder "semantischer") HTML-Code ist ein Ziel, das man sicher nicht durch PHP oder JavaScript erlernt, sondern durch das Schreiben von (X)HTML-Dokumenten. Wenn das dann einigermaßen sitzt, dann kann man an PHP oder/und JavaScript gehen. Aber die Grundlage eines sinnvollen oder gar semantischen Codes ist meines Erachtens zu sehr erstrebenswert, als dass man diese Qualität aus den Augen verlieren darf. Ein zu frühes Ausprobieren in den ergänzenden Technologien (client- oder serverseitig) kann diesen Lernprozess bremsen, da man sich eher verzettelt. Deswegen meine Empfehlung.

Aber es kann sehr schnell langweilig werden, wenn man immer nur statische Seiten schreibt. Wenn etwas dynamik drin ist und sich irgendwas bewegt macht das ganze gleich wieder viel mehr Spaß.
Ausserdem kann man sich ja auch in 2 Sachen gleichzeitig einarbeiten. Ich habe auch mit Perl und HTML gleichzeitig begonnen und bei beidem nach und nach dazugelernt. Mit der Zeit kam dann auch noch JS dazu, noch bevor ich die beiden anderen Disziplinen "gut" beherrschte. Und im Nachhinein sehe ich auch keinen Grund, warum ich etwas anders hätte machen sollen.
In der Schule wird ja auch nicht gewartet, bis du perfekt in Mathe bist, bevor du ein anderes Fach lernst. Das hätte mir zwar relativ wenig ausgemacht, weil mir Mathe eigentlich spaß macht, aber für andere wäre es sicher ein Graus gewesen.

"Hartcodierte" Eventhandler... brrrrr!

Ich denke aber diese "Hartcodierten Eventhandler" sind aber für Anfänger leichter zu verstehen.
Ob es besser ist mit einfache(re)n oder richtige(re)n Beispeielen anzufangen ist wohl geschmackssache.
Ich für meinen Teil habe lieber schneller erste Teilerfolge, auch wenn der Code dann nicht der schönste ist. Wenn man die Basics hat kann man sich ja immernoch anschauen, wie es "Profis" machen würden und versteht es dann vielleicht auch etwas besser, wie wenn man noch nie was damit gemacht hat.

mfG,
steckl

[Der Martin]

Hallo,

Benutze JavaScipt-Events, wie <img id="2005" [...] onclick="showPic(this.id);" />

auch wenn du's noch so gut meinst: Wenn du schon Beispielcode postest, dann bitte wenigstens korrekten Code. Dein HTML-Beispiel ist ungültiges HTML, denn IDs dürfen nicht mit einer Ziffer beginnen.

function showPic(id) {

if(Number(id) == 2005) // Zeige Bilder von 2005
else if(Number(id) == 2006) // Zeige Bilder von 2006
else // Zeige Bilder von heute oder so
}

  
Und das wäre ja eher ein Fall für eine switch-case-Struktur als für eine lange Kette von if-Statements.  
  
So long,  
 Martin  

-- 
Fettflecke werden wieder wie neu, wenn man sie regelmäßig mit etwas Butter einschmiert.

[Hans Wurst]

Und das wäre ja eher ein Fall für eine switch-case-Struktur als für eine lange Kette von if-Statements.

Ok, mal ein Vergleich:

function showPic(id) {  
 if(Number(id) == 2000) tuwas();  
 else if(Number(id) == 2001) tuwas();  
 else if(Number(id) == 2002) tuwas();  
 else if(Number(id) == 2003) tuwas();  
 else if(Number(id) == 2004) tuwas();  
 else if(Number(id) == 2005) tuwas();  
 else if(Number(id) == 2006) tuwas();  
 else if(Number(id) == 2007) tuwas();  
 else if(Number(id) == 2008) tuwas();  
 else if(Number(id) == 2009) tuwas();  
 else tuwas();  
}

13 Zeilen @ 426 Bytes

function showPic(id) {  
 switch(Number(id)) {  
  case 2000: tuwas(); break;  
  case 2001: tuwas(); break;  
  case 2002: tuwas(); break;  
  case 2003: tuwas(); break;  
  case 2004: tuwas(); break;  
  case 2005: tuwas(); break;  
  case 2006: tuwas(); break;  
  case 2007: tuwas(); break;  
  case 2008: tuwas(); break;  
  case 2009: tuwas(); break;  
  default: tuwas(); break;  
 }  
}

16 Zeilen @ 380 Bytes

Du sieht, so groß ist der Unterschied nicht!

[Felix Riesterer]

Lieber Hans Wurst,

ich denke, weder eine Kette von if-Statements, noch eine switch-Anweisung ist hier zielführend.

function showPic(id) {

if(Number(id) == 2000) tuwas();
else if(Number(id) == 2001) tuwas();
else if(Number(id) == 2002) tuwas();

...

else tuwas();
}

  
Ich könnte mir vorstellen, dass dieses "tuwas()" sicherlich mit der ID etwas besser umgehen kann, sodass man showPic(id) gleich sinnvoller gestalten könnte, etwa so:  
  
~~~javascript
function showPicsInDir(id) {  
    var bilder = new Array(),  
        i,  
        verzeichnis = "/pfad/zu/den/bildern",  
        zahl;  
  
    // IDs beginnen nicht mit einer Ziffer  
    zahl = Number(id.replace(/\D/, "")); // Nicht-Ziffern entfernen  
  
    if (zahl != Number.NaN) {  
        // OK, gültige Zahl gefunden -> passendes Verzeichnis auswählen  
        verzeichnis += "/bilder-des-jahres-" + zahl;  
  
        // zwanzig Bilder aus dem Verzeichnis definieren  
        for (i = 1; i < 21; i++) {  
            bilder[i] = verzeichnis  
                + "/bild-nr-"  
                + (i < 10 ? "0" : "") // führende Null  
                + i  
                + ".jpg";  
        }  
    }  
  
    return bilder;  
}

Aber was weiß ich, ob das jetzt besser ist... ;-)

Liebe Grüße,

Felix Riesterer.