'-Zeichen maskieren

[michi]

Hallo, ich habe folgendes Problem:
Ich möchte bei Javascript in einer Variable einen HTML-Code abspeichern. Dieser enthält einen Link mit Mouseover-Effekt, welcher eine Javascript-Funktion auslöst.
Den Inhalt der Variable schreibe ich ja zwischen zwei ', und bei dem Mouseover-Effekt muss ich auch etwas zwischen zwei ' schreiben. Dann würde der Browser aber denken, die Variable wäre schon beim Mouseover-' zu ende, obwohl es ja noch weitergeht.
Ich habe mir gedacht, man könnte die ' bei dem Mouseover-Effekt vielleicht mit \ maskieren (wie im Beispiel unten), aber dann steht in der Fehlerkonsole, dass \ ein ungültiges Zeichen ist.
Und den Mouseover-Effekt ohne ' zu schreiben oder in eine Funktion zu packen, die dann ohne ' aufgerufen werden kann, klappt nicht.

var Neu = '<a href="seite.html"><img src="bild.png" border="0" onmouseover="return escape('Text für den Mouseover-Effekt')"></a>

Wie kriege ich das hin, dass es funktioniert?

[D.R.]

Hallo,

var Neu = '<a href="seite.html"><img src="bild.png" border="0" onmouseover="return escape('Text für den Mouseover-Effekt')"></a>

So kannst du das aber nicht ohne weiteres in's Dokument schreiben. Verwende lieber das DOM!

Wie kriege ich das hin, dass es funktioniert?

  
var Neu = document.createElement("a");  
Neu.href = "seite.html";  
Neu.appendChild(document.createElement("img"));  
Neu.lastChild.src = "bild.png";  
Neu.lastChild.border = "0";  
Neu.lastChild.onmouseover = function(){return escape("Text für den Mouseover-Effekt")};  

Um die Variable dann einzufügen, könntest du

Ausgabeelement.http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild(Neu);

oder http://de.selfhtml.org/javascript/objekte/node.htm#insert_before@title=insertBefore verwenden.
Das Ganz sieht vielleicht Anfangs noch ein wenig kompliziert aus, hat aber den Vorteil, dass es unabhängig von HTML/XHTML immer gleich funktioniert und nicht erst vom Browser zu einem DOM-Baum umgewandelt werden muss. Außerdem sollte dein Problem damit gelöst sein :)

mfg. Daniel

[Ingo Turski]

Hi,

Den Inhalt der Variable schreibe ich ja zwischen zwei ', und bei dem Mouseover-Effekt muss ich auch etwas zwischen zwei ' schreiben. Dann würde der Browser aber denken, die Variable wäre schon beim Mouseover-' zu ende, obwohl es ja noch weitergeht.

abgesehen davon, dass man hofer-effekte besser über CSS realisiert:
Du könntest vermutlich eine Entity für den Quote nehmen oder einfach den String in Teilen in die Variable setzen, also:

var Neu = '<a href="seite.html"><img src="bild.png" border="0" onmouseover="return escape(' + "'Text für den Mouseover-Effekt'" + ')"><' + '/a>';

freundliche Grüße
Ingo

[MudGuard]

Hi,

abgesehen davon, dass man hofer-effekte besser über CSS realisiert:

Ob CSS den Tirolern gegen Napoleon geholfen hätte, wage ich zu bezweifeln ...

cu,
Andreas

[michi]

var Neu = '<a href="seite.html"><img src="bild.png" border="0" onmouseover="return escape(' + "'Text für den Mouseover-Effekt'" + ')"><' + '/a>';

Hm es geht immer noch nicht.

Kann es vielleicht damit zusammenhängen, dass ich den HTML-Code mit Hilfe des Befehls

document.all.feld.innerHTML = Neu;

austausche?

Ich habe nämlich eine Seite mit Links, die diesen Mouseover-Effekt haben, und da nicht alle Links auf die Seite passen, ohne dass dabei mein Design kaputt geht, habe ich die verschiedenen Seiten in Variablen gepackt und lasse sie mit dem Befehl oben austauschen, wenn der Benutzer den Link für die nächste Seite anklickt.
Das merkwürdige ist, dass der Mouseover-Effekt zu Beginn geht, aber nicht mehr wenn man die Seite wechselt.

Ich poste mal hier den HTML-Code:

<script type="text/javascript">
var Neu0 = '<a href="seite.html"><img src="bild.png" border="0" onmouseover="return escape('+"  'Text'  "+')"></a> ...Weitere Links... ';
function Seite0 () {
  document.all.feld.innerHTML = Neu0;
  }

var Neu1 = '...Das selbe wie oben, für die nächste Seite (natürlich mit anderen Links)...';
function Seite1 () {
  document.all.feld.innerHTML = Neu1;
  }

var Neu2 = 'Inhalt der dritten Seite...';
function Seite2 () {
  document.all.feld.innerHTML = Neu2;
  }

</script>
<p id="feld">
<script type="text/javascript">
document.write('Hier steht nochmal der Inhalt von der ersten Seite (wird direkt eingefügt und nicht über die Variable Neu0) ');
</script>
</p>
Seite auswählen: <a href="javascript:Seite0()">[1]</a> <a href="javascript:Seite1()">[2]</a> <a href="javascript:Seite2()">[3]</a>

[rfb]

Moin

du hast dich schon eine gute Lösung bekommen: Lösung mit DOM

Trau dich doch mal document.write und all.innerHTML einfach zu vergessen.

Gruß
rfb

[michi]

Moin

du hast dich schon eine gute Lösung bekommen: Lösung mit DOM

Trau dich doch mal document.write und all.innerHTML einfach zu vergessen.

Gruß
rfb

Das verstehe ich aber nicht und außerdem möchte ich nicht meinen ganzen Quellcode neu schreiben, bis auf dieses eine Problem funktioniert ja alles.

[D.R.]

Hallo,

Trau dich doch mal document.write und all.innerHTML einfach zu vergessen.

Das verstehe ich aber nicht

OK, ich mach's für dich noch mal verständlich:

  
var Neu = document.createElement("a"); //neuen Elementbaum, mit „a“ als Wurzelelement erzeugen  
Neu.href = "seite.html"; //Das „href“-Attribut an dieses Wurzelelement anhängen  
Neu.appendChild(document.createElement("img")); //innerhalb des Links ein „img“-Element erzeugen  
Neu.lastChild.src = "bild.png"; //auf „img“ zugreifen und das Bild referenzieren  
Neu.lastChild.border = "0"; //border-Attribut an's „img“ anhängen  
Neu.lastChild.onmouseover = function(){return escape("Text für den Mouseover-Effekt")}; //onmouseover-Event auf dieses Element setzen.  

Die Ausgabe könnte für dein Beispiel so aussehen:

  
var Ausgabeelement = document.getElementById("feld");  
Ausgabeelement.replaceChild(Neu,Ausgabeelement.firstChild);  

Ich hoffe, das war jetzt etwas verständlicher für dich. Um das DOM zu begreifen, könntest du ja auch mal den DOM-Inspector im Firefox aufmachen. Dort siehst du, was das mit den Kindknoten usw auf sich hat.

und außerdem möchte ich nicht meinen ganzen Quellcode neu schreiben,

Wenn die Link ohnehin oft die selben sind, kommt du doch eigentlich recht gut, wenn du obigen Code in eine Funktion packst, der das, was sich ändert als Parameter zugewiesen werden kann.

bis auf dieses eine Problem funktioniert ja alles.

In welchen Browsern? Safari unterstützt laut SELFHTML kein „document.all“. Und da sich dein Problem mit der proprietären Eigenschaft „innerHTML“ nicht lösen zu lassen scheint, ist es IMHO am besten, HTML gleich richtig zu erzeugen.

mfg. Daniel

[Gernot Back]

Hallo michi,

var Neu = '<a href="seite.html"><img src="bild.png" border="0" onmouseover="return escape('Text für den Mouseover-Effekt')"></a>

Das sieht ja sehr nach dem Tooltip von Walter Zorn aus:

http://www.walterzorn.de/tooltip/tooltip.htm

Das sollte doch ganz einfach gehen, indem du die Sonderzeichen wie in HTML üblich maskierst:

http://webdesign.crissov.de/Typographie#Zitieren

Gruß Gernot