IMG in einer Tabelle ändern

  • Hallo Leute :)


    Bin absoluter Neuling was Java angeht.


    In einer Tabelle wird beim Starten der Seite ein Bild geladen.
    Nun möchte ich aber beim klick eines anderen Bildes das Bild der Tabelle mit dem geklickten ersetzen.


    Habe da auch schon etwas gefunden, aber irgendwie habe ich da einen Denkfehler drin.


    Beim klicken auf Startbild soll das Zielbild in der Tabelle durch das Startbild ersetzt werden.


    Hier mein Code :


    <img src="startbild.jpg" height="200px" width="auto" id="start" onclick="test();"> <!-- bei klick function test-->




    <script language="javascript">


    function test() {


    var y = document.getElementById("start").src;


    alert (y + ' melung aus test'); /* prüfen ob korrekt ausgelesen wurde */


    neubild(y);
    } /* ende test */





    function neubild(y) {


    alert(y + ' meldung aus neubild') /* prüfen ob wert korrekt übergeben wurde*/



    var x = document.createElement("IMG");


    x.setAttribute("src", y); /* als y der Pfad vom startbild*/


    x.setAttribute("width", "304");


    x.setAttribute("width", "228");


    x.setAttribute("alt", "Das Zielbild");



    /*document.body.appendChild(x);*/ /* das funktioniert, bild wird angefügt im body */



    /* aber wie bekomme ich es als img in die tabelle um zielbild.jpg zu ersetzen*/
    document.getElementById("hauptbild")= x;



    } /* ende neubild */


    </script>




    <table>


    <tr>


    <td id="hauptbild">


    <img src="zielbild.jpg" >


    </td>


    </tr>


    </table>




    Liegt der Fehler bei der Übergabe "document.getElementById("hauptbild")= x;
    " oder bei <td> ????


    Was mache ich falsch ??


    Vielen Dank für eure Hilfe im voraus.


    LG
    Andi

  • Hej,


    du musst hier garkein neues Element anlegen. Du kannst einfach das src Attribut vom einen Bild ins andere übertragen. Dazu macht es Sinn dem neuen Bild eine ID zu geben um es einfacher auswählen zu können:




    Wenn du dem td-Element eine ID und dem Bild keine zuweisen willst, könntest du das so machen:


    HTML
    1. <td id="hauptbild">
    2. <img src="zielbild.jpg">
    3. </td>


    JavaScript
    1. function neubild(y) {
    2. document.getElementById("hauptbild").getElementsByTagName("img")[0].src = y;
    3. }


    Deine Zeile "document.getElementById("hauptbild") = x;" macht so keinen Sinn. Es gibt in Zuweisungen 2 Arten von Werten. Die Left Hand Assignments und die Right Hand Assignments. Left Hand gehört (wie der Name schon sagt) auf die linke Seite des Gleichheitszeichens, Right Hand natürlich auf die rechte.


    In diesem Fall ist aber "document.getElementById("hauptbild")" der Wert und gehört somit auf die rechte Seite. Es handelt sich dabei um eine Funktion und dieser kann nichts zugewiesen werden.