1

    $('area').click(function()
    {
        var value = $(this).attr('title');
        var upper = true; // change this to false/true for uppercase/lowercase
        alert("a" + value + "b");
        if (upper)
        {
            value = value.toUpperCase();    
        } else {
            value = value.toLowerCase();
        }
        //alert(value);
        switch (input)
        {
            case 0,1:
                var a = $('#name').val();
                if (value.toLowerCase() =="erase".toLowerCase())
                {
                    a = a.substring(0,a.length-1);
                    $('#name').val(a);
                } else {
  
                    //a = a.concat(value);
                    
                    a = a + '' + value;
                    $('#name').val(a);
                }
                break;

2

    
    <!-- keyboard -->
    <img src="/img/tools/keyboard.<?= $this->language;?>.jpg" width="1024" height="768" border="0" usemap="#map" />

    <map name="map">
        
<area shape="rect" coords="172,309,224,361" href="1" title="1" />
<area shape="rect" coords="232,311,284,363" href="2" title="2"/>
<area shape="rect" coords="289,311,341,363" href="3" title="3"/>
<area shape="rect" coords="350,311,402,363" href="4" title="4"/>
<area shape="rect" coords="409,310,461,362" href="5" title="5"/>
<area shape="rect" coords="468,311,520,363" href="6" title="6"/>
<area shape="rect" coords="527,309,579,361" href="7" title="7"/>
<area shape="rect" coords="586,311,638,363" href="8" title="8"/>
<area shape="rect" coords="645,310,697,362" href="9" title="9"/>
<area shape="rect" coords="705,308,757,360" href="0" title="0"/>
<area shape="rect" coords="173,366,225,418" href="a" title="a"/>
<area shape="rect" coords="527,482,579,534" href="b" title="b"/>
<area shape="rect" coords="409,483,461,535" href="c" title="c"/>
<area shape="rect" coords="291,426,343,478" href="d" title="d"/>
<area shape="rect" coords="290,368,342,420" href="e" title="e"/>
<area shape="rect" coords="351,425,403,477" href="f" title="f"/>
<area shape="rect" coords="408,425,460,477" href="g" title="g"/>
<area shape="rect" coords="468,428,520,480" href="h" title="h"/>
<area shape="rect" coords="584,368,636,420" href="i" title="i"/>
<area shape="rect" coords="527,426,579,478" href="j" title="j"/>
<area shape="rect" coords="586,426,638,478" href="k" title="k"/>
<area shape="rect" coords="646,426,698,478" href="l" title="l"/>
<area shape="rect" coords="705,424,757,476" href="m" title="m"/>
<area shape="rect" coords="590,483,642,535" href="n" title="n"/>
<area shape="rect" coords="647,369,699,421" href="o" title="o"/>
<area shape="rect" coords="705,367,757,419" href="p" title="p"/>
<area shape="rect" coords="170,425,222,477" href="q" title="q"/>
<area shape="rect" coords="351,369,403,421" href="r" title="r"/>
<area shape="rect" coords="231,425,283,477" href="s" title="s"/>
<area shape="rect" coords="408,369,460,421" href="t" title="t"/>
<area shape="rect" coords="526,366,578,418" href="u" title="u"/>
<area shape="rect" coords="469,483,521,535" href="v" title="v"/>
<area shape="rect" coords="291,481,343,533" href="w" title="w"/>
<area shape="rect" coords="351,481,403,533" href="x" title="x"/>
<area shape="rect" coords="466,369,518,421" href="y" title="y"/>
<area shape="rect" coords="231,368,283,420" href="z" title="z"/>
<area shape="rect" coords="173,483,225,535" href="@" title="@"/>
<area shape="rect" coords="645,481,759,533" href="erase" title="erase"/>
<area shape="rect" coords="173,539,225,591" href="-" title="-"/>
<area shape="rect" coords="233,538,285,590" href="_" title="_"/>
<area shape="rect" coords="292,540,344,592" href="`" title="`"/>
<area shape="rect" coords="352,539,756,591" href=" " title=" "/>
<area shape="rect" coords="235,483,284,531" href="cc" title="c"/>
    </map>