nicht angemeldet
ne frage
Hi,
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?
-
Ich hab noch vergessen das es wieder zu der ursprünglichen Image werden soll wenn ein anderer Hyperlink angeklickt wird.
-
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.htmDein 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#definierenDie 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.htmDie 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#srcDamit 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
-
hi Tim,
danke für deine Antwort.
ich habe jetzt das mal gelesen erstmal bis zu dem bildwechsel und dann habe ich es auch gleich in meine hp eingearbeitet. Aber irgendwie funktioniert es nicht... es wird zwar gelinkt auch ins richtige Fenster aber die image ändert sich trotzdem nicht.
Hier erstmal einen von vielen links:
<td>
<a href="home.htm" target="home" onClick="aendereEinBild(home, "images/taked_home.jpg");">
<img border="0" src="images/taked_home.jpg" width="80" height="20">
</a>
</td>was ist da das Problem hier nochmal deins zum vergleich:
<a href="..." target="..." onClick="aendereEinBild(bild-id, "bild2.jpg");">
<img src="bild1.jpg">
</a>liegt des an der ID???
des hab ich sowieso net so ganz verstanden muss man die nicht definieren???
außerdem hast du hinter das "aendereEinBild(...)" ein ; gesetzt.
Muss das den sein das is doch keine aufzählung, oder???dann werd ich mal weiterlesen
MFG FeVrEx
-
Hallo fevrex,
ich gehe mal davon aus, daß Du auch eine Funktion aendereEinBild() im
Seitenkopf definiert hast, ja?liegt des an der ID???
des hab ich sowieso net so ganz verstanden muss man die nicht definieren???Das stimmt. Ich habe sie im Beispiel weggelassen:
<img id="bild-id" ....
wäre es dann.
außerdem hast du hinter das "aendereEinBild(...)" ein ; gesetzt.
Muss das den sein das is doch keine aufzählung, oder???Reine Angewohnheit. Mehrere Befehle werde in Javascript durch ein Semikolon
getrennt, ich habe mir angewöhnt, sollte ich noch etwas dahinter schreiben,
gleich das Semikolon zu setzen.dann werd ich mal weiterlesen
Viel Spaß. Und die konkreten Dinge weiter in SELFHTML nachschlagen.
Tim
-
Hallo fevrex,
ich gehe mal davon aus, daß Du auch eine Funktion aendereEinBild() im
Seitenkopf definiert hast, ja?Hallo Tim,
nein habe ich nicht,
1. hast du es nich geschrieben oder ich habe es überlesen
2. weiß ich nicht wie es geht, habe selfhtml gelesen, aber dort stand irgenwie nicht wie man es denn macht bzw beschreibtich bitte um erklärung
MFG, FeVrEx
-
Hallo Fevrex,
- hast du es nich geschrieben oder ich habe es überlesen
Ich habe einen Link auf die entsprechenden Erklärungen in SELFHTML gesetzt.
- weiß ich nicht wie es geht, habe selfhtml gelesen, aber dort stand
irgenwie nicht wie man es denn macht bzw beschreibt
Was hast Du denn an http://selfhtml.teamone.de/javascript/sprache/funktionen.htm
nicht verstanden?Tim
-
hi Tim
Ich habe einen Link auf die entsprechenden Erklärungen in SELFHTML gesetzt.
OK :)
Was hast Du denn an http://selfhtml.teamone.de/javascript/sprache/funktionen.htm
nicht verstanden?ja was soll man denn definieren... ich such die ganze zeit des ab les es n paar mal durch finds aba net
-
Hallo Fevrex,
ja was soll man denn definieren... ich such die ganze zeit des ab les es n
paar mal durch finds aba netMan muß doch eine Funktion, die irgendetwas tun soll, irgendwo definieren.
Dies ist üblicherweise der Skriptteil im Seitenkopf. Hier ist zum Beispiel
etwas ähnliches, eine Funktion, die im Seitenkopf definiert wird und dann
unten im Dokument aufgerufen wird:
http://selfhtml.teamone.de/javascript/sprache/funktionen.htm#aufrufenWenn Du Dich noch nicht mit Javascript beschäftigt hast, solltest Du, wenn
Du etwas in Javascript machen willst, dann doch mit zumindest diesen beiden
Abschnitten in SELFHTML beschäftigen, um das wesentliche zu lernen:
http://selfhtml.teamone.de/javascript/intro.htm
http://selfhtml.teamone.de/javascript/sprache/index.htmTim
-
-
-
-
-