jQuery.hover with AJAX not working properly

Question

Hey guys,

I am struggling with my jquery hover combined with $.post.

My goal was to create a bunch of select buttons and if I hover it an image would change(a path to this image would load by $.post). The image would change to its default on mouseout.

And if the select button is clicked it would change the image permanently.

The issue is that the image is sometimes changed permanently even on hover.

Try it yourselves at link text Try to hover over the selects furiously for a while and the image won't change back.

How can I fix this please?

var origpic;
var klik;
var inputval;
var newpic;
var origbnazev;
var cesta = "/ajaxobrazek.php";
$("input[name='barva']").hover(function() { 
    klik = 0;
    inputval = $(this).val();
    origbnazev = $("#bnazev").text();
    origpic = $("#kocarekimg").attr("src");
    $.post(cesta, {dodavatel_id : "<?php echo $row['dodavatel_id']?>", barva_cislo : inputval},     

    function(data){
        $("#kocarekimg").attr("src","/images/maly-"+data+".jpg");
     });
    $.post("/ajaxbarva.php", {barva_cislo : inputval}, function(data){
            $("#bnazev").text(data);
        });

    },function(){ 
    if (klik == 0) {
    $("#bnazev").text(origbnazev);  
    $("#kocarekimg").attr("src",origpic);}  
    });  

    $("input[name='barva']").click(function() { 
    klik = 1;

    $.post(cesta, {dodavatel_id : "<?php echo $row['dodavatel_id']?>", barva_cislo : inputval}, 

    function(data){
     $("#kocarekimg").attr("src","/images/maly-"+data+".jpg");
     origpic = "/images/maly-"+data+".jpg";
     }); 

     });

    //thumbnails
   $(".imgtn").hover(function() { 
    origpic = $("#kocarekimg").attr("src");
    newpic = $(this).attr("src");
    newpic = newpic.replace("tn-","maly-");
    $("#kocarekimg").attr("src",newpic); 
    },function(){ 
   $("#kocarekimg").attr("src",origpic);  
    });  

Answer 1

I don't have any problem in Chrome, nor in Firefox and IE. The only thing I see is that the site is not as responsive as it should, and - frankly speaking - I don't understand why you're not caching the images refs once they're loaded.

Your script makes an ajax call at every single hover, that's nonsense.