SO-20160770

by Tushar Gupta

HTML

<img id="logo_layer2" src="images/logo/logo_compass_a_layer2_red.png">
<ul id="letters">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
    <li>O</li>
    <li>P</li>
    <li>Q</li>
    <li>R</li>
    <li>S</li>
    <li>T</li>
    <li>U</li>
    <li>V</li>
    <li>W</li>
    <li>X</li>
    <li>Y</li>
    <li>Z</li>
</ul>

CSS

#letters li {
    list-style: none;
    display: inline-block;
    text-align: center;
    padding-bottom: 2px;
    background: #fff;
    height: 14px;
    width: 15px;
    border: 1px solid #858585;
}
#letters li:hover {
    outline:2px solid #fff;
    cursor:pointer;
}

JavaScript

$('#letters li').click(function(){
    var txt =$(this).text().toLowerCase();
    $('#logo_layer2').attr('src',function(_,old_src){
        return old_src.replace(/_(\w)_/g,'_'+txt+'_');
    });
});