replace html elements

Hello

I want to build a website, which looks similar like a chessboard. Some of the fields of the chessboard are buttons and when such a button gets clicked different images
should get shown. The shown images have a size of 1*1, 1*2 or 2*2 chessboard fields.

The html looks like this.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
        <title>Untitled Document</title>
        <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="jque.js"></script>
        <style type="text/css"></style>
        <link rel="stylesheet" type="text/css" href="css/firstr4.css"></link>

    </head>
    <body onload="init()">

        <div id="allsquares">
            <img src="./img/Z01_01-03P1_skal.gif" alt=""></img><img src="./img/Z01_04-05P1.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img id="news" src="./img/Z01_08-08P1.gif" alt=""></img>
            <div id="info"></div> <img src="./img/bground.gif" alt=""></img>

            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img id="team" src="./img/Z02_04-04P1.gif" alt=""></img><img id="team1" src="./img/bground.gif" alt=""></img><img id="team2" src="./img/bground.gif" alt=""></img><img id="team3" src="./img/bground.gif" alt=""></img>
            <img id="team4" src="./img/bground.gif" alt=""></img><img id="team5" src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>

            <img id="filme" src="./img/Z03_01-01P1.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img id="service" src="./img/Z03_11-11P1.gif" alt=""></img>

            <div id="container"><img id="film1" src="./img/bground.gif" alt=""></img></div><img id="text1" src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>

            <img id="text2" src="./img/bground.gif" alt=""></img><img id="film2" src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>

            <img id="film3" src="./img/bground.gif" alt=""></img><img id="text3" src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>

            <img id="text4" src="./img/bground.gif" alt=""></img><img id="film4" src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>

            <img id="film5" src="./img/bground.gif" alt=""></img><img id="text5" src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" class="mon4" alt=""></img>
            <img src="./img/bground.gif" class="mon4" alt=""></img><img src="./img/bground.gif" class="mon5" alt=""></img><img src="./img/bground.gif" class="mon5" alt=""></img><img src="./img/bground.gif" class="mon6" alt=""></img>
            <img src="./img/bground.gif" class="mon6" alt=""></img><img src="./img/bground.gif" class="mon7" alt=""></img><img src="./img/bground.gif" class="mon7" alt=""></img>

            <img id="text6" src="./img/bground.gif" alt=""></img><img id="film6" src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img>

            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img>

            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>
            <img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img><img src="./img/bground.gif" alt=""></img>

        </div>

    </body>
</html>

The problem to change one image with another image of the same size(1*1) is solved by using the attr()-function of jquery with wich i change the src attribute of the img-tag.

For the other problems i tried to change bigger parts of the html with the replaceWith()-function of jquery, but this does not work, because the html does not replace elements, but add some elements.

function init()
{
    var state = 0;
    $(document).ready(function()
    {
        $("#film1").click(function ()
        {
              $('.mon5').replaceWith('<img src="./img/GrossZ09_06-07.jpg" width="160" height="85"></img>');
        });
}
}

Untitled Document

After clicking on film1 i have a new line of fields with two elements and all elements get moved two places to the right, but my intension was to put the two fields of film1 away and displace with an image of exactly the same size than the two fields i put away, so that nothing gets moved and there is no new line at the bottom of the chessboard field.

I hope you understand what i mean, but it's difficult to explain for me in english without showing the problem and i would be very happy when someone could help me.

Kind regards,
Michael

Topic Participants
ms
kbwood.au

replace html elements

replace html elements

Topic Participants

ms

kbwood.au