JQuery Not working properly

Question

I am trying to accomplish swap images with text using the .html() function in JQuery. I am having some issues.

FIRST:

If the mouse moves around too fast, the function is delayed and does not work. The onHover even seems to get stuck on the mouse over and onmouse out does not fire.

HTML:

<table border=0 cellPadding=2 cellSpacing=5 width=100% class=showlangs>
    <tr>
        <td id="arabic">
            <img src="theImages/languages/arabic.png" />
        </td>
        <td id="khmer">
            <img src="theImages/languages/khmer.png" />
        </td>
    </tr>
    <tr>
        <td id="armenian">
            <img src="theImages/languages/armenian.png" />
        </td>
        <td id="korean">
            <img src="theImages/languages/korean.png" />
        </td>
    </tr>
    <tr>
        <td id="bengali">
            <img src="theImages/languages/bengali.png" />
        </td>
        <td id="laotian">
            <img src="theImages/languages/laotian.png" />
        </td>
    </tr>
    <tr>
        <td id="cantonese">
            <img src="theImages/languages/cantonese.png" />
        </td>
        <td id="mandarin">
            <img src="theImages/languages/mandarin.png" />
        </td>
    </tr>
    <tr>
        <td id="english">
            <img src="theImages/languages/english.png" />
        </td>
        <td id="polish">
            <img src="theImages/languages/polish.png" />
        </td>
    </tr>
    <tr>
        <td id="french">
            <img src="theImages/languages/french.png" />
        </td>
        <td id="portugese">
            <img src="theImages/languages/portugese.png" />
        </td>
    </tr>
    <tr>
        <td id="german">
            <img src="theImages/languages/german.png" />
        </td>
        <td id="russian">
            <img src="theImages/languages/russian.png" />
        </td>
    </tr>
    <tr>
        <td id="hindi">
            <img src="theImages/languages/hindi.png" />
        </td>
        <td id="spanish">
            <img src="theImages/languages/spanish.png" />
        </td>
    </tr>
    <tr>
        <td id="hmong">
            <img src="theImages/languages/hmong.png" />
        </td>
        <td id="tagalog">
            <img src="theImages/languages/tagalog.png" />
        </td>
    </tr>
    <tr>
        <td id="italian">
            <img src="theImages/languages/italian.png" />
        </td>
        <td id="thai">
            <img src="theImages/languages/thai.png" />
        </td>
    </tr>
    <tr>
        <td id="japanese">
            <img src="theImages/languages/japanese.png" />
        </td>
        <td id="vietnamese">
            <img src="theImages/languages/vietnamese.png" />
        </td>
    </tr>
</table>

JQuery:

$(document).ready(function() {

    $("#arabic").hover(function(){
        $("#arabic").html('<b class="langs">ARABIC</b>');
        },function(){
        $("#arabic").html('<img src="theImages/languages/arabic.png" />');
    });
    $("#armenian").hover(function(){
        $("#armenian").html('<b class="langs">ARMENIAN</b>');
        },function(){
        $("#armenian").html('<img src="theImages/languages/armenian.png" />');
    });
    $("#bengali").hover(function(){
        $("#bengali").html('<b class="langs">BENGALI</b>');
        },function(){
        $("#bengali").html('<img src="theImages/languages/bengali.png" />');
    });
    $("#cantonese").hover(function(){
        $("#cantonese").html('<b class="langs">CANTONESE</b>');
        },function(){
        $("#cantonese").html('<img src="theImages/languages/cantonese.png" />');
    });
    $("#english").hover(function(){
        $("#english").html('<b class="langs">ENGLISH</b>');
        },function(){
        $("#english").html('<img src="theImages/languages/english.png" />');
    });
    $("#french").hover(function(){
        $("#french").html('<b class="langs">FRENCH</b>');
        },function(){
        $("#french").html('<img src="theImages/languages/french.png" />');
    });
    $("#german").hover(function(){
        $("#german").html('<b class="langs">GERMAN</b>');
        },function(){
        $("#german").html('<img src="theImages/languages/german.png" />');
    });
    $("#hindi").hover(function(){
        $("#hindi").html('<b class="langs">HINDI</b>');
        },function(){
        $("#hindi").html('<img src="theImages/languages/hindi.png" />');
    });
    $("#hmong").hover(function(){
        $("#hmong").html('<b class="langs">HMONG</b>');
        },function(){
        $("#hmong").html('<img src="theImages/languages/hmong.png" />');
    });
    $("#italian").hover(function(){
        $("#italian").html('<b class="langs">ITALIAN</b>');
        },function(){
        $("#italian").html('<img src="theImages/languages/italian.png" />');
    });
    $("#japanese").hover(function(){
        $("#japanese").html('<b class="langs">JAPANESE</b>');
        },function(){
        $("#japanese").html('<img src="theImages/languages/japanese.png" />');
    });
    $("#khmer").hover(function(){
        $("#khmer").html('<b class="langs">KHMER</b>');
        },function(){
        $("#khmer").html('<img src="theImages/languages/khmer.png" />');
    });
    $("#korean").hover(function(){
        $("#korean").html('<b class="langs">KOREAN</b>');
        },function(){
        $("#korean").html('<img src="theImages/languages/korean.png" />');
    });
    $("#laotian").hover(function(){
        $("#laotian").html('<b class="langs">LAOTIAN</b>');
        },function(){
        $("#laotian").html('<img src="theImages/languages/laotian.png" />');
    });
    $("#mandarin").hover(function(){
        $("#mandarin").html('<b class="langs">MANDARIN</b>');
        },function(){
        $("#mandarin").html('<img src="theImages/languages/mandarin.png" />');
    });
    $("#polish").hover(function(){
        $("#polish").html('<b class="langs">POLISH</b>');
        },function(){
        $("#polish").html('<img src="theImages/languages/polish.png" />');
    });
    $("#portugese").hover(function(){
        $("#portugese").html('<b class="langs">PORTUGESE</b>');
        },function(){
        $("#portugese").html('<img src="theImages/languages/portugese.png" />');
    });
    $("#russian").hover(function(){
        $("#russian").html('<b class="langs">RUSSIAN</b>');
        },function(){
        $("#russian").html('<img src="theImages/languages/russian.png" />');
    });
    $("#spanish").hover(function(){
        $("#spanish").html('<b class="langs">SPANISH</b>');
        },function(){
        $("#spanish").html('<img src="theImages/languages/spanish.png" />');
    });
    $("#tagalog").hover(function(){
        $("#tagalog").html('<b class="langs">TAGALOG</b>');
        },function(){
        $("#tagalog").html('<img src="theImages/languages/tagalog.png" />');
    });
    $("#thai").hover(function(){
        $("#thai").html('<b class="langs">THAI</b>');
        },function(){
        $("#thai").html('<img src="theImages/languages/thai.png" />');
    });
    $("#vietnamese").hover(function(){
        $("#vietnamese").html('<b class="langs">VIETNAMESE</b>');
        },function(){
        $("#vietnamese").html('<img src="theImages/languages/vietnamese.png" />');
    });
});

So what is suppose to happen is, for example: If I hover my mouse over the arabic image, it should replace the image with the "ARABIC" text and if I move the mouse out, it should replace the text with the image. But if I move the mouse too fast around all the TD some onmouseout does not fire. Also can I have the fade in/out effect with the onmouseover and onmouseout event? (makes it more fancy)

SECOND: I know there is a way to shorten the JQuery code above so it doesn't take up so many lines because it's doing the same thing for all the TD. How would I shorten the code, if possible?

Answer 1

You could also store the language name in the alt text of the image (and thus be ADA compliant). You could then use a class selector for your td elements and swap out the alt text with the image. This has the benefit of still being kind to screen readers.

EDIT Because you are having issues with mouse movement speed, I would recommend against using .fadeIn and .fadeOut see alternate javascript below.

So, something akin to the following (and Fiddle):

Javascript/jQuery

$(document).on('mouseenter', '.showlangs td', function(event){
    var _img = $(this).find('img');
    var _lang = $(_img).prop('alt');
    $(this).append('<span class="hidden"><strong>' + _lang + '</strong></span>');
    var _txt = $(this).find('span');
    $(_img).fadeOut();
    $(_txt).fadeIn();
});

$(document).on('mouseleave', '.showlangs td', function(event){
    $(this).find('img').fadeIn();
    $(this).find('span').fadeOut(function(){
        $(this).remove();
    });
});

Alternate Javascript/jQuery

$(document).on('mouseenter', '.showlangs td', function(event){
    var _img = $(this).find('img');
    $(_img).hide();
    $(this).append('<b>' + $(_img).prop('alt') + '</b>');
});

$(document).on('mouseleave', '.showlangs td', function(event){
    $(this).find('b').remove();
    $(this).find('img').show();
});

EDIT: Cleaned up answer to shorten wall of code and use the asker's document selectors.

Answer 2

$('table.showlangs td').hover(function() {
     this.innerHTML = '<b class="langs">'+ this.id.toUpperCase() +'</b>';
 , function() {
     this.innerHTML = '<img src="theImages/languages/'+ this.id +'.png"/>';
});

Using fadeIn and fadeOut methods:

$('table.showlangs td').hover(function() {
     var $this = $(this),
         content = $this.children('b').length
                   ? '<img src="theImages/languages/'+ this.id +'.png"/>'
                   : '<b class="langs">'+ this.id.toUpperCase() +'</b>';
     $this.fadeOut('fast', function() {
         $this.html(content).fadeIn('fast');
     })   
});

Answer 3

You can give Id to your table like

<table id="myTable" border=0 cellPadding=2 cellSpacing=5 width=100% class=showlangs> ...

Then you can use that Id to hook events

$("td", "#myTable").hover(function () {
    $(this).find("img").hide();
    $(this).find("b").show();
}, function () {
    $(this).find("img").show();
    $(this).find("b").hide();
});

The .html() changes the DOM and loads new image which may take time, instead you should include the object but hide/show it

<tr>
    <td id="arabic">
        <img src="theImages/languages/arabic.png" />
        <b class="langs" style="display: none;">ARABIC</b>
    </td>
    ...
</tr>

Answer 4

I would forego using JavaScript in place of CSS transitions as the browser will handle these on its own better than you ever could with JS. This won't really work if you need to support the transitions with IE9-, but the showing/hiding will still work.

td strong, td img {
    transition: opacity .5s;
}
strong {
    opacity: 0;
}
td:hover img {
    opacity: 0;
}
td:hover strong {
    opacity: 1;
}

http://jsfiddle.net/sgjqZ/1/