Javascript Textzeile dynamisch ausgeben

mikune

Ich habe in einer HTML-Seite per Javascript 7 Bilder in einem Array, die per Mausklick auf 7 icons aufgerufen und angezeigt werden (angezeigt wird jeweils nur 1 Bild von den 7).

Ich möchte zu den 7 Bildern dynamisch Bildunterschriften anzeigen lassen.

Im Head definiere ich den Text-array mit den Bildunterschriften.

Code

<script type="text/javascript"> 
	<!--                          


var bildtext=new Array("bild-text1-blabla","bild-text2-blabla","bild-text3-blabla","bild-text4-blabla","bild-text5-blabla","bild-text6-blabla","bild-text7-blabla");


	//-->                          
</script>

Im Body würde ich gerne den Text zum jeweiligen Bild aufrufen. Das Bild wird mit der Variable nr aufgerufen, diese Variable würde ich gerne nutzen um auch den zugehörigen Text aufzurufen:

Code

<script>
		<!--
		 document.writeln(bildtext);
		//-->
</script>

Aber der Aufruf funktioniert nicht.... Es erscheint kein Text.

Wer kann mir bei diesem Anfängerproblem helfen?

Ronald

Moin!

Deine Lösung kann nicht funktionieren, weil du ja immer das komplette Array ausgeben würdest. Normalerweise (wenn das Script korrekt wäre) würde dort dann immer das Wort "Array" auftauchen. Du willst aber nur ein bestimmtest Teiles des gesammten Arrays ausgeben.

Document.writeln ist für das was du vor hast auch nicht so geeignet, da es immer neuen Text anfügen würde. Du willst aber ja keine Liste mit allen Texten erzeugen, sondern immer nur den zum Bild gehörenden Text anzeigen, sprich die Texte je nach Bild austauschen.

Es gibt dafür mehrere Lösungen, eine könnte so aussehen:

HTML

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<head>
<title></title>
<script type="text/javascript" language="JavaScript">
<!--
var bildtext = new Array("","bild-text1-blabla","bild-text2-blabla","bild-text3-blabla","bild-text4-blabla","bild-text5-blabla","bild-text6-blabla","bild-text7-blabla");


function show(t)
  {
  document.getElementById("TA").firstChild.data = bildtext[t];
  }


//-->
</script>
</head>
<body>
Hier erscheint der Text: <span id="TA" style="color:#BF0000"></span>




</p>
[url='javascript:show(1)']Text 1[/url]  
[url='javascript:show(2)']Text 2[/url]  
[url='javascript:show(3)']Text 3[/url]  
[url='javascript:show(4)']Text 4[/url]  
[url='javascript:show(5)']Text 5[/url]  
[url='javascript:show(6)']Text 6[/url]  
[url='javascript:show(7)']Text 7[/url]  
</body>
</html>

Alles anzeigen

Wichtig ist das Leerzeichen vor dem "", da der Textaustausch nur funktioniert, wenn auch Text vorhanden ist. Leider wandelt der Code-Modus dieses Forum den Quelltext "&nbsp," in ein Leerzeichen um, im Originalquelltext steht da "".

Probiere es mal aus, vermutlich kommst du dann schon allein weiter - sonst melde dich wieder.

G.a.d.M.

Ronald

mikune

Das ist perfekt.

Vielen Dank!!!

Gruß, Michael

mikune

Hallo, habe mich zu früh gefreut.

Doch nicht perfekt.

Auf Firefox läuft das Skript wunderbar,
IE jedoch meldet im Fenster für Skriptfehler:

document.getElementById(...).firstChild ist Null oder kein Objekt

GreenRover

verwende innerHTML anstat firstChild.data das kennen alle browser

mikune

Stimmt.

Danke

Ronald

Du hast min Posting nicht richtig gelesen, du mußt das Leerzeichen vor " gegen"" austauschen - dieses Forum kann "" in Code-Quelltexten nicht darstellen, zeigt stattdessen ein Leerzeichen an.
Das Problem ist, daß Text vorhanden sein muß, der ausgetauscht wird. Mit dieser Änderung funktioniert es auch im IE.

"firstChild" wird übrigens von wesentlich mehr Browsern unterstützt, als "innerHTML".

firstChild:
- DOM 1.0 (Document Object Model) ab Version 1.0
- Javascript ab Version 1.5
- Netscape ab Version 6.0
- IE ab Version 5.0
- Opera ab Version 7.0
- Firefox alle Versionen
- Konqueror ab Version 3.3
- Safari ab Version 1. 2

innerHTML:
- DOM (Document Object Model) keine Unterstützung
- Javascript alle, aber nur in der Microsoft-Version
- Netscape keine Unterstützung
- IE ab Version 4.0
- Opera ab Version 7.0
- Firefox alle Versionen
- Konqueror ab Version 3.3.
- Safari keine Unterstützung

Wenn du also deine Webseite möglichst kompatibel halten willst, dann solltest du firstChild verwenden und nicht innerHTML.

G.a.d.M.

Ronald

GreenRover

also der netzscape unterstüzt innerHTMl meienr meinung anch, und safari. Joa keine Ahnung. Da war ich mal so frecht den zu ignorieren :-p nutz eh keiner.

firstchild bekomme ich tatsächlich auf ie zum laufen mit " " vor

sieht so aus: " "

aber: die beiden anführungszeichen zeigt er mir leider auch zu beginn beim laden der seite an, bevor ich ein bild (mit text) lade, was nicht so gut ist...

innerhtml läuft auf safari, ie und firefox.

weitere habe ich noch nicht getestet.

danke, michael

Ronald

Mach es so:

G.a.d.M.

Ronald

GreenRover

Naja ich kann IE, sämtliche MOZ versionen, Netscape (benutzen ja selbe enginbe :-p ) und opera bestätigen.

Javascript Textzeile dynamisch ausgeben

Tags

Benutzer online in diesem Thema