Inhalte dynamisch einblenden

[Auron]

Hallo erstmal! Ich habe html nur durch selfhtml gelernt. Ich finde es einmalig und es gilt als bestes "Lexikon" rund ums Web.
Dennoch habe ich da ein Problem mit Javascript: Ich habe eine Navigation mit unterschiedlichen Links. Ich möchte gerne beim Rübergehen über den Link jeweils ein Bild passend zum Link in einem andren Bereich (zB andere Tabellenzelle) anzeigen lassen. Zu "Onmouesover" habe ich leider nicht genug gefunden. Es sind 10 Links, also auch 11 (mit Anfangsbild) anzuzeigende Bilder. Geht man vom Link runter soll das Anfangsbild wieder zu sehen sein. Ich habe etwas ähnliches hier mit CSS gefunden. Funktioniert aber leider nur in sehr begrenzten Browserversionen. http://css.fractatulum.net/sample/experimente4.htm ("Demonstration" anklicken mit mindestens aktuellem Mozilla oder Opera ab Vers. 7)
Es wäre toll, wenn mir einer einen Tip geben könnte oder auf welcher Seite man so etwas benutzt hat, um sich den Code anzuschauen.
LG
Auron

[Christoph Schnauß]

hallo Auron,

Es wäre toll, wenn mir einer einen Tip geben könnte oder auf welcher Seite man so etwas benutzt hat, um sich den Code anzuschauen.

Das kann ich: http://www.christoph-schnauss.de/prog/javascript/menu4.php

Grüße aus Berlin

Christoph S.

[Auron]

hallo Auron,

Es wäre toll, wenn mir einer einen Tip geben könnte oder auf welcher Seite man so etwas benutzt hat, um sich den Code anzuschauen.

Das kann ich: http://www.christoph-schnauss.de/prog/javascript/menu4.php

Danke Christoph für die schnelle Antwort,
der Code von Micha ist gut, Deiner ist natürlich bei einer Mehrzahl von Links eleganter. Daher werde ich Ihn benutzten. Zu Deinem Post davor: Natürlich habe ich den CSS Code verstanden, nur funktioniert er mit den wenigsten Browserversionen. Nicht zB mit dem IE. Auch der von Jeena funktioniert nur begrenzt mit dem IE 6, da er beim letzten Bild hängen bleibt. Aber egal, JS funktioniert bestens, also danke nochmal.
LG nach Berlin aus HH
Auron

[Christoph Schnauß]

hallo Auron,

der Code von Micha ist gut, Deiner ist natürlich bei einer Mehrzahl von Links eleganter.

Es handelt sich um ziemlich exakt denselben Javascript-Code. Nur biete ich eben zusätzlich die Möglichkeit an, mehrere Bilder zu wechseln, wie du das ja offensichtlich gerne haben möchtest. Programmiertechnisch hat dir Micha aber genau dasselbe gezeigt, was du auch auf meiner Seite gelesen hast. Der einzige Vorteil bei meiner Wortmeldung war/ist, daß ich es eben gleich auch an einem Beispiel zeigen kann und nicht nur mit einem Code-Snippet. Die Antwort von Micha war genauso zielführend wie meine.

Daher werde ich Ihn benutzten.

Bittesehr. Das steht dir frei.

Zu Deinem Post davor: Natürlich habe ich den CSS Code verstanden, nur funktioniert er mit den wenigsten Browserversionen. Nicht zB mit dem IE.

Das kann ich nicht recht glauben. Der Effekt, den du gerne haben möchtest, läßt sich durchaus auch mit CSS erreichen. Und wenn du es mit CSS machst, hast du den Vorteil, daß es da eben _keinen_ Browser gibt, der das ausschaltet. Javascript kann man dagegen deaktivieren.

Auch der von Jeena funktioniert nur begrenzt mit dem IE 6, da er beim letzten Bild hängen bleibt.

Es wäre schön, wenn du das genauer zeigen könntest, eventuell anhand eines zuständigen Code-Schnipsels. Jeena kennt sich mit CSS ziemlich gut aus und erzählt dir nichts, was er nicht selbst dreitausendmal ausprobiert hat.

Aber egal, JS funktioniert bestens, also danke nochmal.

Naja, nein, da hast du das Forum noch nicht richtig verstanden. Wir sind nicht nur "Problemlöser", wir wollen auch bei einem Widerspruch gegen eine vorgeschlagene Lösung wirklich _genau_ wissen, worauf dieser Widerspruch beruht. Es _kann_ ja sein, daß du experimentell irgendwas herausgefunden hast, was bisher noch niemand kannte ...
Und letzten Endes kommt es nicht so sehr darauf an, ob die vorgeschlagenen Lösungen auch deinen bisherigen Überlegungen entsprechen. Das Forum versucht, dir die bestmögliche _webtaugliche_ Lösung zu offerieren, und da kann es halt durchaus mal mehrere Wege geben, die nicht immer dem entsprechen müssen, woran du bisher gedacht hast.

Grüße aus Berlin

Christoph S.

[Cybaer]

Hi,

Das kann ich nicht recht glauben. Der Effekt, den du gerne haben möchtest, läßt sich durchaus auch mit CSS erreichen.

Klar - man kann viele Techniken vergewaltigen. =:->

Und wenn du es mit CSS machst, hast du den Vorteil, daß es da eben _keinen_ Browser gibt, der das ausschaltet.

Hmm, JavaScript auch nicht. =:-o Aber was der User bei seinem Browser an CSS durchläßt (oder auch alternativ verarbeitet haben möchte), daß bestimmt er selbst. :-)

Es wäre schön, wenn du das genauer zeigen könntest, eventuell anhand eines zuständigen Code-Schnipsels.

Der Code ist vom CSS-Guru himself Eric Meyer - und er sagt dort doch selbst, daß es Probleme gibt mit dem IE/Win - die ich auch locker nachvollziehen kann.

Aber egal, JS funktioniert bestens, also danke nochmal.
Naja, nein, da hast du das Forum noch nicht richtig verstanden. Wir sind nicht nur "Problemlöser", wir wollen auch bei einem Widerspruch gegen eine vorgeschlagene Lösung wirklich _genau_ wissen, worauf dieser Widerspruch beruht.

Ist ebendort nachzulesen.

Und für einen solchen Klicki-Bunti-Spiel-Effekt ist IMHO JS auch immer noch exakt das richtige Mittel.

Allemal besser als ein Gewürge, mag dies auch noch so hipp und modern sein. >:->

Gruß, Cybaer

[derletztekick]

Hallo,

Gib den Bild einen Namen oder eine ID, so das Du mit getElement(s)By... drauf zugreifen kannst. Nun änderst Du beim onmouseover das Bild, in dem Du dem Objekt eine neue Bildadresse zuweist, die Du beim onmouseout wieder rückgängig machst - zb so (nicht perfekt aber zur Erläuterung des Problems sicher ausreichend):

  
<img id="menu" src="http://src.selfhtml.org/logo.gif">  
<a href="#" onmouseover="document.getElementById('menu').src='http://www.google.de/intl/de_de/images/logo.gif'" onmouseout="document.getElementById('menu').src='http://src.selfhtml.org/logo.gif'">Link</a>  

Mit freundlichem Gruß
Micha

[Auron]

Hallo Micha,

danke, war genau das, was ich gesucht habe.

LG
Auron

[Cybaer]

Hi,

<img id="menu" src="http://src.selfhtml.org/logo.gif">
<a href="#" onmouseover="document.getElementById('menu').src='http://www.google.de/intl/de_de/images/logo.gif'" onmouseout="document.getElementById('menu').src='http://src.selfhtml.org/logo.gif'">Link</a>

  
Da getElementById erst ab JS 1.5 existiert, ist das allerdings eine sehr sinnvolle Methode, wenn man möchte, daß hier Browser mit JS <1.5, ja auch da gibt es noch welche - sogar noch relativ neue - mit einer Fehlermeldung aussteigen. ;-)  
  
Besser:  
 id="menu" -> name="menu"  
 document.getElementById('menu') -> document.images['menu']  
  
  
Gruß, Cybaer  
  
PS: Die \*ganz\* saubere Umklammerung des ganzen für JS-1.0-Browser ('if(document.images){ ... }') schenke ich mir jetzt ausnahmsweise mal ... ;-)  

-- 
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!

[derletztekick]

Hallo,

Da getElementById erst ab JS 1.5 existiert, ist das allerdings eine sehr sinnvolle Methode, wenn man möchte, daß hier Browser mit JS <1.5, ja auch da gibt es noch welche - sogar noch relativ neue - mit einer Fehlermeldung aussteigen. ;-)

Daher auch mein Hinweis:

Gib den Bild einen *Namen* oder eine ID, so das Du mit getElement(s)By...

Mit freundlichem Gruß
Micha

[molily]

Hallo,

Da getElementById erst ab JS 1.5 existiert

JavaScript 1.5 enthält keine Methode »document.getElementById«. Meinst du zufällig Document Object Model Core? :)

Mathias

[Cybaer]

Hi,

Da getElementById erst ab JS 1.5 existiert

JavaScript 1.5 enthält keine Methode »document.getElementById«.

Meinst du zufällig Document Object Model Core? :)

Nein, denn das ist ja für sich genommen nutzlos. :)

Möönsch, das wußte doch schon Edward Teller: Erst die zwei richtigen Kerne zusammengebracht, geben einen nutzbaren Knall! =;-)

Gruß, Cybaer

[Jeena Paradies]

Hallo,

Ich glaube das was du suchst lässt sich wunderbar auch ohne JavaScrip, nur mit einfachem CSS lösen. Auf den Seiten Eric Meyers findet sich dieses Beispiel: Pure CSS Popups Using Pictures

Grüße
Jeena Paradies

[Christoph Schnauß]

hallo Jeena,

Ich glaube das was du suchst lässt sich wunderbar auch ohne JavaScrip, nur mit einfachem CSS lösen.

Das ist richtig. Ich habs nur deswegen nicht angesprochen, weil ich annahm, der OP wüßte bei der Topicwahl, warum er eben "Javascript" wählt.

Auf den Seiten Eric Meyers findet sich dieses Beispiel: Pure CSS Popups Using Pictures

Ausreichend wäre bereits http://aktuell.de.selfhtml.org/tippstricks/css/infobox/index.htm. Und was an der von Auron bereits selbst gefundenen Adresse http://css.fractatulum.net/sample/experimente4.htm so schwer zu verstehen ist, müßte er uns noch genauer erläutern.

Grüße aus Berlin

Christoph S.