вместо
$(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