html4 zu xhtml -> funktioniert javascript nicht mehr?

[soc]

hi!
ich habe neulich eine internetseite von html4 auf xhtml umgestellt.
auf einer seite gab es ein script, das bei einem klick auf ein thumbnail (hat ein _tn im dateinamen!) das thumbnail durch das große bild ersetzte (hat kein _tn im dateinamen!) und bei einem klick auf ein großes bild das große bild durch ein thumbnail.
der code funktionierte zwar in html4 aber jetzt nicht mehr in xhtml! was mache ich falsch???

hier ist das html4 script das funktioniert:
<script type='text/javascript'>
function changePicture(imgname)
{
 var bild = imgname.src;
  if((bild.search('_tn.jpg')==-1)){
  bild=bild.replace('.jpg','_tn.jpg');
  imgname.src=bild;
 }
 else{
  bild=bild.replace('_tn.jpg','.jpg');
  imgname.src=bild;
 }
}
</script>

und hier das xhtml das nicht mehr funktioniert:
<script type='text/javascript'>
function changePicture(imgname)
{
 var bild = document.getElementsByName(imgname).src;
 alert(bild);
 if((bild.search('_tn.jpg')==-1)){
  bild=bild.replace('.jpg','_tn.jpg');
  document.getElementsByName(imgname).src=bild;
 }else{
  bild=bild.replace('_tn.jpg','.jpg');
  document.getElementsByName(imgname).src=bild;
 }
}
</script>

und hier ein bild dazu in xhtml (in html4 fehlte nur das "document.getElementsByName" bei changePicture):
<a href="javascript:void(0);" onDblClick="location.href='/pics/index.php?todo=showThumbnails&amp;big&album=./alben/19.07.06#1'" onClick="changePicture(document.getElementsByName('image1'))"><img id="1" name="image1" src="./alben/19.07.06/robert001_tn.jpg" hspace="5" vspace="5" align="middle" style="border:1px solid black" /></a>

das alert(bild) hab ich nur zu testzwecken drin, das meldet immer "undefined".
kann mir jemand sagen was da los ist???
danke im voraus!
simon

[Utz]

Hallo,

onClick="changePicture(document.getElementsByName('image1'))"

Hier übergibst Du der Funktion changePicture() ein Element, und zwar das mit dem Namen 'image1'

function changePicture(imgname)
{
var bild = document.getElementsByName(imgname).src;

imgname ist hier also nicht mehr der Bildname, sondern schon ein Element; getElementsByName(imgname) kann also nicht mehr zu einem vernünftigen Ergebnis führen. Wie wärs wenn Du einfach nur den Bildnamen übergäbest?

Grüße,
Utz

[Sven Rautenberg]

Moin!

onClick="changePicture(document.getElementsByName('image1'))"

Hier übergibst Du der Funktion changePicture() ein Element, und zwar das mit dem Namen 'image1'

function changePicture(imgname)
{
var bild = document.getElementsByName(imgname).src;

imgname ist hier also nicht mehr der Bildname, sondern schon ein Element; getElementsByName(imgname) kann also nicht mehr zu einem vernünftigen Ergebnis führen. Wie wärs wenn Du einfach nur den Bildnamen übergäbest?

Oder einfach den alten Zustand der Funktion wiederherstellst - der funktioniert nämlich.

PS: XHTML erfordert, dass alle Attribute kleingeschrieben werden. onClick ist falsch, onclick ist richtig. onDblClick ist falsch, ondblclick ist richtig.

- Sven Rautenberg

[soc]

Moin!

onClick="changePicture(document.getElementsByName('image1'))"

Hier übergibst Du der Funktion changePicture() ein Element, und zwar das mit dem Namen 'image1'

function changePicture(imgname)
{
var bild = document.getElementsByName(imgname).src;

imgname ist hier also nicht mehr der Bildname, sondern schon ein Element; getElementsByName(imgname) kann also nicht mehr zu einem vernünftigen Ergebnis führen. Wie wärs wenn Du einfach nur den Bildnamen übergäbest?

wie kann ich den bildnamen übergeben? byName ist ja das attribut "name"

PS: XHTML erfordert, dass alle Attribute kleingeschrieben werden. onClick ist falsch, onclick ist richtig. onDblClick ist falsch, ondblclick ist richtig.

ok, das habe ich korrigiert

der code sieht jetzt so aus, funktionieren tut er nicht:
---------------------
<script type='text/javascript'>
function changePicture(imgname)
{
 var bild = imgname.src;
 alert(bild);
 if((bild.search('_tn.jpg')==-1)){
  bild=bild.replace('.jpg','_tn.jpg');
  imgname.src=bild;
 }else{
  bild=bild.replace('_tn.jpg','.jpg');
  imgname.src=bild;
 }
}
</script>
---------------------
der link:
---------------------
<a href="javascript:void(0);" ondblclick="location.href='/pics/index.php?todo=showThumbnails&amp;big&album=./alben/19.07.06#1'" onclick="changePicture(document.getElementsByName('image1'))"><img id="1" name="image1" src="./alben/19.07.06/robert001_tn.jpg" hspace="5" vspace="5" align="middle" style="border:1px solid black" /></a>
---------------------
danke für eure mühe!

[soc]

so wie es aussieht liegt das problem schon vor dem "alert(bild)", weil er da schon ein undefined ausgibt ... könnte es sein, dass er sich irgendwie an dem "id" verschluckt?
mfg
simon

[soc]

oder noch eine andere idee: kann es sein, dass ich das javascript mit diesem /* [CDATA[ */ kapseln muss oder wie das heißt?
thx!
soc

[Utz]

Hallo,

solange Du https://forum.selfhtml.org/?t=133345&m=863812 oder alternativ https://forum.selfhtml.org/?t=133345&m=863823 nicht beherzigst, wird's nicht funktionieren.

Grüße,
Utz

[Axel Richter]

Hallo,

der code sieht jetzt so aus, funktionieren tut er nicht:

<script type='text/javascript'>
function changePicture(imgname)
{
var bild = imgname.src;

...

</script>

der link:

<a onclick="changePicture(document.getElementsByName('image1'))"><img id="1" name="image1" src="./alben/19.07.06/robert001_tn.jpg" hspace="5" vspace="5" align="middle" style="border:1px solid black" /></a>

Schau Dir bitte an, was genau .getElementsByName zurückgibt. Es ist _immer_ eine Auflistung von Elementen, manchmal ist in dieser Auflistung nur ein Element drin (document.getElementsByName('image1')[0]) aber Du musst dieses Element trotzdem als Teil der Auflistung ansprechen.

Wo Du dann beim Studieren bist, sieh Dir bitte auch gleich noch an, dass es genau diese Auflistung aller Bilder in einem Dokument bereits als document.images gibt. Du musst sie also nicht erst per geElementsByName erzeugen. Dein Bild wäre hier document.images["image1"].

viele Grüße

Axel

[Ashura]

Hallo Utz.

onClick="changePicture(document.getElementsByName('image1'))"

Hier übergibst Du der Funktion changePicture() ein Element, und zwar das mit dem Namen 'image1'

Nein, er übergibt eine Knotenliste. Ohne einen Index kann man hier nicht auf ein einzelnes Objekt zugreifen.

Einen schönen Donnerstag noch.

Gruß, Ashura