mit JavaScript ein Bild (Imagemap) mit HTML-Datei ersetzen

[Contentbiene]

Hallo!

Ich bin wahrscheinlich weniger als ein Anfänger in JavaScript, kann also sein, dass das, was ich machen möchte, gar nicht geht ...

Ich arbeite an einem Imagemap, das auf Klick auf die einzelnen Bildbereiche jeweils nicht nur ein neues Bild, sondern gleich eine zum neuen Bild passende neue Imagemap laden soll. Daher dachte ich daran, dass über die erste Imagemap nicht einfach das Bild ausgetauscht werden soll, sondern sich eine HTML-Datei öffnet. Das gedachte ich mit href="javascript:location.replace('{RELPATH}files/bild2.htm') zu erreichen. In der bild2.htm hatte ich für´s Zurückspringen dann href="javascript:history.back()" eingebaut.

Leider geht das history schon mal gar nicht. Ein weiteres Problem stellt sich dadurch dar, dass meine erste Imagemap nur ein Teil einer Umgebung ist (weiß nicht wie ich es anders erläutern soll ...), es ist so etwas ähnliches wie ein iframe. Das gesamte Projekt wird später als eine dicke js-Datei veröffentlicht, daher habe ich auf diese Umgebung so gar keinen Zugriff. Die Umgebung beinhaltet aber das globale Navigationsmenü und muss daher auf jeden Fall erhalten bleiben.

Kann man sowas überhaupt als Teil in einem HTML/js-Konstrukt umsetzen und wenn ja, wie??

Danke für Euren Input!

[Matthias Apsel]

Om nah hoo pez nyeetz, Contentbiene!

Ich arbeite an einem Imagemap, das auf Klick auf die einzelnen Bildbereiche jeweils nicht nur ein neues Bild, sondern gleich eine zum neuen Bild passende neue Imagemap laden soll. Daher dachte ich daran, dass über die erste Imagemap nicht einfach das Bild ausgetauscht werden soll, sondern sich eine HTML-Datei öffnet. Das gedachte ich mit href="javascript:location.replace('{RELPATH}files/bild2.htm') zu erreichen.

Warum nimmst du nicht einen normalen Link <a href="…">

In der bild2.htm hatte ich für´s Zurückspringen dann href="javascript:history.back()" eingebaut.

Wenn die neue Datei in einem neuen Fenster/Tab geöffnet wird, gibts natürlich in der History keine Seiten, die vorher in diesem Tab geöffnet werden sollen.

Ansonsten kannst du dich voll und ganz auf die Funktionalität des Browsers verlassen.

Kann es sein, dass du eigentlich nur eine ganz normale Navigation bauen möchtest?

Matthias

[Der Martin]

Hallo,

Wenn die neue Datei in einem neuen Fenster/Tab geöffnet wird, gibts natürlich in der History keine Seiten, die vorher in diesem Tab geöffnet werden sollen.

stimmt, aber diesen Tatbestand kann ich hier nicht erkennen.

Allerdings wird bei Verwendung von location.replace() auch kein neuer History-Eintrag erzeugt, sondern nur der aktuelle überschrieben, womit man die Verwendung von history.back() implizit ausschließt.

Kann es sein, dass du eigentlich nur eine ganz normale Navigation bauen möchtest?

Ein bisschen "fancy", aber im Grunde scheint es genau das zu sein.

Ciao,
 Martin

[Contentbiene]

Hallo, Martin

Allerdings wird bei Verwendung von location.replace() auch kein neuer History-Eintrag erzeugt, sondern nur der aktuelle überschrieben, womit man die Verwendung von history.back() implizit ausschließt.

Heißt das, dass ich statt history.back() dieses location.replace() nehmen kann, mit dem Verweis auf ... ja was denn? Denn eine externe html mit dem Ursprungs-Imagemap habe ich ja nicht :-(

Kann es sein, dass du eigentlich nur eine ganz normale Navigation bauen möchtest?

Ein bisschen "fancy", aber im Grunde scheint es genau das zu sein.

nahein ... keine Navigation, sondern eher so etwas wie eine beschriftete Detailkarte ... wenn man jetzt mal einen Vergleich braucht ;-)

Danke und LG, Contentbiene

[Contentbiene]

Om nah hoo pez nyeetz, Contentbiene!

??? ;-)

Warum nimmst du nicht einen normalen Link <a href="…">

Neee, es muss eine Imagemap sein, es sollen sieben Bildbereiche anzuklicken sein. Auf jedem ausgetauschten Bild ist dann der Bildbereich des urspungsbildes zu sehen und ein Text dazu. Blöderweise sind ja dann immer alle Hotspots der Imagemap immer noch anklickbar. Das ist schonmal das erste Problem, das ich durch das Laden einer neuen Imagemap (an der ich dann irgendwie ein "zurück" definiere) ausschalten sollte. Ich kann aber leider eben nicht simpel einfach eine neue html-Datei aufrufen, weil ja eben dieses Drumherum da ist, das nicht von mir kommt, sondern vom Kunden schon vorgegeben ist. Ich bastele leider nur an einem Teilstück hreum, also muss alles innerhalb dieses Teilstückes funzen ...

Wenn die neue Datei in einem neuen Fenster/Tab geöffnet wird, gibts natürlich in der History keine Seiten, die vorher in diesem Tab geöffnet werden sollen.

Okay, kapiert. Gibt es eine andere Lösung, mit der ich zurück kann? Bzw. wenn sich wie oben erklärt, irgendwie eine neue Imagemap laden läßt, könnte ich mit dem gleichen Trick ja auch die erste wieder laden ...

Ansonsten kannst du dich voll und ganz auf die Funktionalität des Browsers verlassen.

Nope. Das ist im Gesamtpaket ausgeschaltet. Es wird ein Popup gestartet und alle Menüs, Buttons sowie auch der rechte Mausklick sind nicht möglich ...

Kann es sein, dass du eigentlich nur eine ganz normale Navigation bauen möchtest?

Nein ;-) Siehe oben!

[Matthias Apsel]

Om nah hoo pez nyeetz, Contentbiene!

Aus einem Teil der Image-Map soll bei Klick auf dieses ein Iframe drübergelegt werden?

Matthias

[Contentbiene]

Om nah hoo pez nyeetz, Contentbiene!

Aus einem Teil der Image-Map soll bei Klick auf dieses ein Iframe drübergelegt werden?

Matthias

Muss nicht zwingend so sein ... ich versuche nur irgendwie eine Lösung zu finden ...

Zwischenzeitlich habe ich auch daran überlegt, ob und wie ich vielleicht mit etwas wie document.write() quasi einen HTML-Baustein (der ja meine Imagemap sein kann) lade, bzw. den einen durch einen anderen ersetze. Theoretisch müsste das doch machbar sein ... so wie ein href eine HTML-Datei durch eine andere ersetzt, gibt es doch bestimmt auch einen Weg mit Javascript HTML-Brocken durch andere HTML-Brocken zu ersetzen. Oder??

[Matthias Apsel]

Om nah hoo pez nyeetz, Contentbiene!

Zwischenzeitlich habe ich auch daran überlegt, ob und wie ich vielleicht mit etwas wie document.write() quasi einen HTML-Baustein (der ja meine Imagemap sein kann) lade, bzw. den einen durch einen anderen ersetze. Theoretisch müsste das doch machbar sein ... so wie ein href eine HTML-Datei durch eine andere ersetzt, gibt es doch bestimmt auch einen Weg mit Javascript HTML-Brocken durch andere HTML-Brocken zu ersetzen. Oder??

Folgendes HTML:

<img ID="Map">  
<div ID="Inhalt1"></div>  
<div ID="Inhalt2"></div>  
...  
<div ID="Blende"></div>

Per JS gibst du dem img eine Klasse, z.B. Inhalt1, die Blende ist ein halbtransparentes, absolut positioniertes div.

CSS

#Map [id=^Inhalt], #Map #Blende {  
  display: none;  
}  
#Map[class=^Inhalt] #Blende {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  z-index: 100;  
}  
#Map[class=^Inhalt] #Inhalt1 {  
  position: absolute;  
  ...  
  z-index: 101  
}

ungetestet.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

#Map [id=^Inhalt], #Map #Blende {

#Map[class=^Inhalt] #Blende {

#Map[class=^Inhalt] #Inhalt1 {

  
geeignete Selektoren wären auch nicht schlecht.  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Waffe und Waffeleisen](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=W#waffe).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Der Martin]

Hallo,

Zwischenzeitlich habe ich auch daran überlegt, ob und wie ich vielleicht mit etwas wie document.write() quasi einen HTML-Baustein (der ja meine Imagemap sein kann) lade, bzw. den einen durch einen anderen ersetze. Theoretisch müsste das doch machbar sein ...

nein, nicht mit document.write(). Diese Methode kann nur benutzt werden, *während* das Dokument vom Browser geladen und verarbeitet wird. Sobald document.write() nach dem Laden erneut benutzt wird, *ersetzt* es das gesamte Dokument mit dem neu erzeugten Teil.

so wie ein href eine HTML-Datei durch eine andere ersetzt, gibt es doch bestimmt auch einen Weg mit Javascript HTML-Brocken durch andere HTML-Brocken zu ersetzen. Oder??

Ja. Auch wenn der Vergleich mit href (du meinst einen Link?) unpassend ist.

Man kann jederzeit mit Javascript HTML-Elemente dynamisch erzeugen, ihnen die passenden Eigenschaften geben und sie ins Dokument einbauen oder wieder daraus entfernen. Die Methode document.createElement() wurde in deinem Doppelposting schon erwähnt, dazu gesellen sich Methoden wie z.B. appendChild().

Wem das zu kompliziert ist, der kann einen Mittelweg gehen und mit innerHTML den kompletten Inhalt eines Elements als Quellcode-String neu schreiben.

Das gibt dir hoffentlich genug Anstoß zum Weiterforschen.

So long,
 Martin

PS: Dein Quengelposting habe ich nicht gesperrt, das war noch jemand anders, der es -wie ich- für unangemessen hielt.

[Matthias Apsel]

Om nah hoo pez nyeetz, Contentbiene!

Muss nicht zwingend so sein ... ich versuche nur irgendwie eine Lösung zu finden ...

Was hat dir denn die Auseinandersetzung mit meinem fast JavaScript-freien Lösungsansatz gebracht?

Matthias

[Steel]

Hi!

Da ich irgendwie immer noch nicht genau weiß, was Du da überhaupt bastelst, mal ein paar generelle Tipps:

Ja. Du kannst beliebige HTML-Schnipsel laden. Ajax machts möglich. Mit jQuery ein Einzeiler, ohne etwas mehr.

Ja. Du kannst den HTML-Schnipsel auch direkt mit in dein Script schreiben. Bau Variablen wie tollerSchnpsel[0] = "<h2>Erstazüberschrift</h2>" oder tollerSchnipsel[1] = "geile Tabelle aller 1200 Mitarbeiter"

Ja. Du kannst auch dein HTMl mit DOM-Manipulation gescriptet zusammenbauen.

Du kannst deine komplette Seite aus Modulen zusammenbasteln, die Du in Strings verpackst, wenn Du das willst. Die kannst Du dann beliebig austauschen. Du brauchst überhaupt nur eine einzige Datei und kannst dann alle 120 Unterseiten gescriptet erstellen. Das ist aber keine so dolle Idee, da allein aus Werbeblockgründen so maches JS nicht aktiviert ist und man mit sowas schnell mal vor die Pumpe läuft. Gehn tuts, geben tuts das auch.

Du kannst aber auch: Achtung! Alle Elemente schon in der Seite haben und sie dann nur noch per CSS und etwas JS ein und ausblenden. Magie!!! ;) Leute ohne JS haben dann eben alles aufm Schirm, wenns für die funktionieren soll.

[tami]

hi,

es macht viel Sinn, erstmal bei seinem Thread zu bleiben. (https://forum.selfhtml.org/?t=216712&m=1486667 und https://forum.selfhtml.org/?t=216711&m=1486647). Mit Martin und Matthias hast Du auch zwei gute Ratgeber (bisher gehabt). Wenn Du einen neuen Thread aufmachen willst, macht das wirklich nur Sinn, wenn Du da in eine ganz neue Richtung gehst. Antworter zu provozieren oder zu generieren mit einem neuen Posting bringt hier in der Regel nix. Deshalb wird das - zu Recht - auch unterbunden. Solltest Du mal in die Verlegenheit kommen, nicht genau zu wissen, ob ein neuer Thread nicht angebracht wäre, dann nimm diese Bedenken in dein neues Posting auf und verweise auf das alte und jammere nicht, wenn die Admins/Moderatoren das anders sehen. Schlicht eine Javascript-Funktion zu ändern (bzw. den Eventhandler zu wechseln) ist m.E. kein Grund, einen neuen Thread aufzumachen, das ergibt sich doch aus der Logik Deiner Versuchen (hoffentlich). Wesentlicher ist, die Ratschläge der Ratgeber ernst zu nehmen und dann entsprechend darauf zu antworten, damit Dir weiter geholfen wird ...

mfg

tami

[tami]

hi,

und hier die "Lösung" als Doppelposting ;-): https://forum.selfhtml.org/?t=216756&m=1487087

mfg

tami

[Contentbiene]

Hallo an alle!

Zunächst mal ein großes 'tschuldigung für die Doppelposts - das hab ich als solches schlichtweg nicht erkannt. Kommt nicht mehr vor ;-)

Dann noch ein Danke an den vielfältigen Input! Da mein Problem eines ist, das sich nur auf einen kleinen Teil eines großen Projektes bezieht, das jemand anderes mit Unmengen von JS strickt, war zu guter Letzt die Lösung mit "getElement" diejenige, die am besten funktioniert. btw: das "javascript: void(0)" brauche ich, weil es irgendwelche übergeordneten Handlungsanweisungen gibt, die man damit offensichtlich (warum auch immer) erst einmal aushebeln muss ...

Uff, geschafft, Projekt läuft!

CU!