aspx using html and javascript not changing images in html and javascript coding

Question

I have a website, very simple one page that uses a master page and one web page. This is done in aspx, but I want to do my coding in html to abide by Markup Validation Service's standards.

So, on my page, I have a main image:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <img id="imgM" alt="Main Image" runat="server" src="~/images/main-images/01.JPG"/>

and i have 10 image buttons. i will list the first 3

<table style="padding: 0 38px">
        <tr>
            <td>
                <input type="image" id="ith1" src="images/thumb-images/01.JPG" alt="01" onclick="changePic(1)" />
            </td>
            <td>
                <input type="image" id="ith2" src="images/thumb-images/02.JPG" alt="02"  onclick="changePic(2)" />
            </td>
            <td>
                <input type="image" id="ith3" src="images/thumb-images/03.JPG" alt="03"  onclick="changePic(3)" />
            </td>

Now I have this code for java script, in my content placeholder for head

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        function changePic(num) {
            switch (num) {
                case 1:
                    mypic = "/images/main_images/01.jpg";
                    break;
                case 2:
                    mypic = "/images/main_images/02.jpg";
                    break;
                case 3:
                    mypic = "/images/main_images/03.jpg";
                    break;
                case 5:
                    mypic = "/images/main_images/05.jpg";
                    break;
            }
            document.getElementById("imgM").src = mypic;
        }
    </script>
</asp:Content>

Which I got of the net by looking at examples of changing pictures. What I have noticed is that without a runat="server" my main image will not display. But try as I might, I can't get the image to change once I've clicked on a image button. What am I doing wrong here? Is it because this is a master page and content page thing? Or am I just coding this wrong? I can do this via .cs pages easily. It's just that I would also have to learn about WS3 validators and how to do my websites in html

Answer 1

Have you checked for any javascript errors or debugged the javascript execution so that you know that the script runs?

Do you use jQuery?

*Edit - add alert() * Change the

case 1:
    mypic = "/images/main_images/01.jpg";
    break;

to

case 1:
  alert('1');
  mypic = "/images/main_images/01.jpg";
  break;

If the javascript runs, you'll get an alert box whenever you try to change to img 1.

-------- Edit 2 ---------------

I wrote a small examle that works:

<img id="imgM" runat="server" src="~/Images/accent.png"/>
    <input type="image" id="ith1" src="~/Images/bullet.png" alt="01" onclick="changePic(1)" />
    <script type="text/javascript">
        function changePic(num) {
            var mypic = "";
            switch (num) {
            case 1:
                mypic = "/Images/heroAccent.png";
                alert(mypic);
                break;
            }
            document.getElementById("imgM").src = mypic;
        }

    </script>

Do you use jquery? does the src attribute of the img tag get changed?