вместо
$(document).ready(function(){
        
            $('#btn1').click(function(){
            document.img1.src='on2.png'
                $.ajax({
                    url: "page1.html",
                    cache: false,
                    success: function(html){
                        $("#content").html(html);
                    }
                });
            });
            
            $('#btn2').click(function(){
                $.ajax({
                    url: "page2.html",
                    cache: false,
                    success: function(html){
                        $("#content").html(html);
                    }
                });
            });
            $('#btn3').click(function(){
                $.ajax({
                    url: "page3.html",
                    cache: false,
                    success: function(html){
                        $("#content").html(html);
                    }
                });
            });
        });
вставьте
$(document).ready(function(){
        
$( "div.content form input" ).click(function(){
$("div.content form img").attr( "src", function(a,b){ return b.replace(/(\w+)3(\.png)/, "$1$2") } );
var num = this.id.replace(/\W+/,'')
$( "div.content form img[name='img"+num+"']" ).attr( "src", function(a,b){ return b.replace(/(\w+)(\.png)/, "$13$2") } );
                $.ajax({
                    url: "page"+num+".html",
                    cache: false,
                    success: function(html){
                        $("#content").html(html);
                    }
                });
});
});
это не помогло. мешает обработчик mouseout. он вставляет картинку обратно.
сделайте через :hover