JScript verschiebt Images

[Damo]

Moin auch,
zuerst einmal: Dies ist mein erster Thread, und ich würde mir keinen Account in einem Forum erstellen wenn ich nicht absolut verzweifelt wäre.
Ich befasse mich nun schon seit geraumer Zeit mit JS, noch wesentlich länger mit html ... Doch bisher gab es bei mir kein Problem das sich so hartnäckig verhielt.

Eine vereinfachte Version vom problematischen Code:
Dazu im Voraus: Es sind zwei Bilder und für jedes der Bilder ein Radio-Button. Die Bilder sind quasi "übereinander", und aus dem Grund ist immer nur eins von beiden sichtbar
Über die beiden Radios werden jeweils folgende Funktionen aufgerufen um auf simpelstem Weg die Bilder wechseln zu lassen.

function funktion1(){
                document.getElementById("image_1").style.display="none";
                document.getElementById("image_2").style.display="block";
}function funktion2(){
                document.getElementById("image_2").style.display="none";
                document.getElementById("image_1").style.display="block";
}

<td>
   <img src="images/bild1" id="image_1"/>
   <img src="images/bild2" id="image_2"/>
</td>
<td align="center">
   <input name="fraktion" onclick="funktion2()" type="radio" checked="checked" />
   <input name="fraktion" onclick="funktion1()" type="radio"/>
</td>

Mein Problem ist nun das beide Bilder, sobald ich sie über einen der Radio-Buttons ein/ausschalte um(ich habe nicht nachgemessen) geschätzte 20px nach oben und rechts verschoben werden und dort dann auch permanent verharren. Erst ein F5 auf die Seite setzt die Position zurück. Das für mich erstaunliche ist allerdings dass selbst das Bild, welches von Beginn an angezeigt wird, durch einen Klick auf den Radio-Button eine neue Position erhält...
Wie ich regelmäßig in Foren lese wird als Antwort nichts getan als auf die SuFu zu verweisen. Diesbezüglich möchte ich einmal sagen das ich diese benutzt, und aufgrund dutzender "Wie verschiebe ich Bilder mit Javascript?"-Threads nichts zu meinem Thema gefunden habe.

Vielen Dank schon im Vorfeld
-Damo

 

[thecain]

erstmal: funktion1 als funktionsname ist ja grauenhaft... das ganze könntest du mit einer funktion abdecken statt mit 2 und die ID mitgeben...

zum Problem: ohne es getestet zu haben. <img> ist standardmässig ein Inlineelement. Mit display = "block"; änderst du dies. Also statt display = "block", display = "inline" verwenden.

 

[Damo]

erstmal: funktion1 als funktionsname ist ja grauenhaft...

Eine vereinfachte Version vom problematischen Code:

Dennoch grundsätzlich danke.
Funktioniert(auch wenn ich mich grad schämen muss das ich selbst nicht drauf gekommen bin) nun so wie es soll.