nicht angemeldet
Hallo fevrex,
wie kann man das machen, dass man auf eine Hyperlink-Image klickt und sich
dann erstens in einem Frame eine andere Seite öffnet und zweitens die Image,
auf die man geklickt hat, zu einer anderen wird?
Geht das mit HTML bzw. javascript oder muss ich dazu PHP oda so verwenden?
Und wenn ja wie?
Mit Javascript. Zur Erinnerung: Javascript ist das, was im Browser des
Benutzers abläuft, also aktiv werden kann, wenn in seinem Browser etwas
verändert werden soll, ohne das eine neue Seite geladen wird. »PHP oda so«
ist das, was auf dem Server anläuft, wovon der Nutzer also nichts mitbekommt.
Also mußt Du Dich mit Javascript beschäftigen und das "wie programmiert
man so etwas" lernen:
http://selfhtml.teamone.de/javascript/index.htm
Dein Problem zerfällt in mehrere kleine Teilprobleme.
Fangen wir beim Simpelsten an, dem Ändern des Frames. Dieses ist ja
wahrscheinlich das wesentliche, das Du in Deinem Frameset zur Verfügung
stellen wirst, Bilderwechseln ist nur Beiwerk. Also machst Du den Link
um das Bild herum ganz normal in HTML:
<a href="..." target="...">...</a>
Das Bilderwechseln wird schwieriger. An und für sich kann man einen
Javascript-Befehl bequem im Link aufrufen, nämlich so:
<a href="..." onClick="tueDiesUndDas()"> ... </a>
(http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm#onclick)
Das heißt, man kann im onClick-Eventhandler bequem einen Befehl aufrufen,
der ein Bild ändert:
<a href="..." target="..." onClick="aendereEinBild(bild-id, "bild2.jpg");">
<img src="bild1.jpg">
</a>
Wenn Du Dich mit Javascript auskennst, siehst Du, daß ich da der Funktion
zwei Parameter übergebe.
http://selfhtml.teamone.de/javascript/sprache/funktionen.htm#definieren
Die Idee dahinter ist, daß die Funktion im Seitenkopf zentral definiert wird
und dieses für jedes Bild tun kann. Damit es weiß, welches Bild es ändern
muß, geben wir dem Bild einen eindeutigen Bezeichner, eine ID, eine
Zeichenkette, die im ganzen Dokument eindeutig sein muß. Hier habe ich den
Bezeichner »bild-id« als Beispiel gewählt; Du wirst Deine Phantasie walten
lassen müssen.
http://selfhtml.teamone.de/html/attribute/allgemeine.htm#uebersicht
http://selfhtml.teamone.de/javascript/sprache/funktionen.htm
Die Funktion kann anhand dieser ID das Bild im Dokument wiederfinden...
http://selfhtml.teamone.de/javascript/objekte/document.htm#get_element_by_id
... und damit kann man mit dem Bild verschiedene Sachen anstellen, also
auch den Wert des Source-Attributes (src) ändern, sprich ein anderes Bild
einbinden:
http://selfhtml.teamone.de/javascript/objekte/images.htm#src
Damit die Funktion aber weiß, zu welchen anderen Bild sie das Bild ändern
muß geben wir ihr noch einen zweiten Parameter mit. Dieser ist die URL
des zweiten Bildes, also genau das, was hinterher im src-Attribut stehen
soll. Dieses ist ein String.
Zusammenfassend: Die Funktion erhält zwei Parameter. Mit dem ersten finndet
sie das Bild im Dokumentenwust wieder und ändert den Wert des src-Attributes
zu den Wert des zweiten Bildes. Doll nicht? Wenn man es aufschreibt, ein
Einzeiler.
Ist es das nun? Nein. Du stellst noch mehr Ansprüche. Du willst nämlich, wie
in Deinem Folgeposting geschrieben, daß, wenn man auf einem anderen Link
klickt, sich nicht nur das Bild ändert, sondern das sich ein anderes Bild
wieder zum Originalzustand ändert. Gucken wir uns mal dann einen typischen
Ablauf an:
1. Nutzer klickt auf einen Bilderlink von Bild A1. Die Funktion ändert nun
Bild A.1 zu Bild A.2 mittels der Information der bild-id und der
Information darüber, wo Bild A.2 liegt.
2. Nutzer klickt auf einen Bilderlink von Bild B1. Die Funktion ändert nun
Bild B.1 zu Bild B.2 mittels der Information der bild-id und der
Information darüber, wo Bild B.2 liegt. Nun will die Funktion Bild B2
wieder zu Bild B.1 ändern. Aber wie? Es fehlen ihr die Information
über die bild-id des Bildes B und die Information, wo Bild B.1 liegt.
Denn diese Information ist weg, nachdem das Bild geändert wurde.
Das heißt, wir brauchen so etwas wie ein Gedächnis, in dem gespeichert
wird, zu welcher bild-id welche URL des Bildes X.1 liegt. Es gibt zwei
Lösungen, ich nenne sie mal Langzeitgedächnis und Kurzzeitgedächnis.
Die Langzeitgedächnislösung ist folgende: Du hast irgendwo in einer
Javascript-Datenstruktur gespeichert, zu welcher bild-id welche URL
zum Originalbild X.1 gehört. Das heißt, Du mußt zu jedem Bild X noch
mal seperat die URL des Originalbildes X.1 zuweisen. Lästig. Überflüssige
Schreibarbeit. Speicherplatz!
Die passende Datenstruktur dafür wäre zum Beispiel ein assoziatives Array,
allerdings sind diese in Javascript meiner Meinung nach etwas unelegant
gelöst, z.B. im Vergleich zu den Dictionaries in Python.
http://selfhtml.teamone.de/javascript/objekte/array.htm#assoziative_arrays
(Man könnte sich beim Start der Seite natürlich automatisch das Array
zusammenstellen, noch ehe irgendein Bild geändert wurde, aber wie gesagt,
die Langzeitgedächnislösung ist doof. Basta. Weswegen ich auch nichts davon
erzähle, wie Du dann vorgehen müßtest.)
Die Kurzzeitgedächnislösung ist m.E. eleganter, da auf Deine Aufgabenstellung
zugeschnitten. Und zwar ist die Logik folgende: Es ist ja immer nur ein
Bild zu einem Zeitpunkt geändert. Das heißt, um das letzte gewechselte
Bild wieder auf den Originalursprung zurückzusetzen, müssen wir nur zwei
Informationen haben:
1. Welches Bild zuletzt geändert wurde.
2. Wie die URL des Originalbilders lautete.
Sobald ein neues Bild geändert wird und das alte Bild wieder zurückgesetzt
wurde, werden diese Informationen wieder verworfen und die neuen aktuellen
Informationen für den nächsten Bilderwechsel eingesetzt. Das geht bequem
mit Variablen.
Dein Javascriptbereich im Kopf sieht nun so aus:
<script type="text/javascript">
var Gewechselt = 0;
var AltesBildID, AltesBildOriginalURL;
function wechseleDieBilder(AktuellesBildID, AktuellesBildNeueURL) {
/* Anweisungen */
}
</script>
Ich habe oben drei Variablen definiert, die schon beim Laden der Seite
kriegen angelegt werden. Die Variable Gewechselt speichert, ob schon ein
Bild gewechselt wurde, 0 heißt nein, 1 heißt ja.
Und die paar Anweisungen innerhalb der Funktion lauten nun in
menschenverständlicher Sprache so:
1. Finde das aktuelle Bild mittels dem Wert der Variablen AktuellesBildID
und lese den Wert des scr-Attributes in eine neu anzulegende Variable
mit den Namen AktuellesBildAlteURL.
2. Finde das aktuelle Bild mittels dem Wert der Variablen AktuellesBildID
und ändere den Wert des scr-Attributes in den Wert der als Parameter
übergebenden Variablen AktuellesBildNeueURL.
3. WENN die Variable Gewechselt nicht gleich 0 ist dann tue dieses:
Finde das alte Bild mittels dem Wert der Variablen AltesBildID
und ändere den Wert des scr-Attributes in den Wert der Variablen
AltesBildOriginalURL.
Ansonsten tue nix.
4. Weise der Variablen AltesBildID den Wert der Variablen AktuellesBildID
zu, damit Du ihn beim nächsten Wechsel parat hast.
5. Weise der Variablen AltesBildURL den Wert der Variablen AktuellesBildAlteURL
zu, damit Du ihn beim nächsten Wechsel parat hast.
6. Weise der Variablen Gewechselt den Wert 1 zu, damit Du beim nächsten Mal
weißt, daß Du nicht zum ersten Mal ein Bild gewechselt hast.
Deine Aufgabe ist jetzt nur noch das Verstehen und das konkrete Programmieren
in Javascript mit Variablen, Zuweisungen und if-Anweisungen. Dabei wird
Dir SELFHTML helfen. Viel Spaß dabei.
(Disclaimer: Ja, man könnte das etwas effizienter lösen. Dazu muß man das
Problem jedoch erstmal verstehen.)
Tim