Count textarea character - JSFiddle

by Ying Chor Ding

HTML

<div id="main-banner">
	<div id="director_images">
    <img src="http://www.tiongwoon.com/images/Mr.Ang_Kah_Hong.jpg" alt="Ang_Kah_Hong" name="Ang_Kah_Hong" width="668" usemap="#Map" class="director_Ang_Kah_Hong"  />   
    <img src="http://www.tiongwoon.com/images/Mr.Ang_Kha_King.jpg" name="Ang_Kha_King" width="668" usemap="#Map" class="director_Ang_Kha_King displayImg"  />
    <img src="http://www.tiongwoon.com/images/Mrs.Carrie_Cheong.jpg" name="Carrie_Cheong" width="668" usemap="#Map" class="director_Carrie_Cheong displayImg"  />
    <img src="http://www.tiongwoon.com/images/Mr.Wong_King_Kheng.jpg" name="Wong_King_Kheng" width="668" usemap="#Map" class="director_Wong_King_Kheng displayImg"  />
    <img src="http://www.tiongwoon.com/images/Mr.Tan_Swee_Khim.jpg" name="Tan_Swee_Khim" width="668" usemap="#Map" class="director_Tan_Swee_Khim displayImg"  />
    <img src="http://www.tiongwoon.com/images/Mr.Ang_Guan_Hwa.jpg" name="Ang_Guan_Hwa" width="668" usemap="#Map" class="director_Ang_Guan_Hwa displayImg"  /> 
   <map name="Map" id="Map">
   	<area id="bernard-map" alt="Ang_Kah_Hong"  shape="poly" coords="277,150,255,158,245,179,244,198,251,211,255,223,227,231,206,244,201,277,189,299,188,327,194,344,256,351,282,346,282,356,318,360,336,351,363,354,396,339,388,316,382,297,373,288,363,272,366,239,356,228,321,225,303,226,306,216,311,202,313,192,314,178,309,165,303,158,294,152" href="#"/>
    <area alt="Ang_Kha_King" shape="poly" coords="206,26,191,33,183,42,181,47,178,53,180,61,179,68,183,74,185,79,187,85,188,89,193,91,190,98,188,104,189,104,149,115,159,128,163,149,162,160,163,178,167,287,161,291,156,314,151,339,187,340,187,308,189,298,198,277,203,247,216,235,229,229,253,223,244,201,243,179,250,164,254,157,277,148,276,131,254,114,239,111,227,94,235,86,243,64,244,51,233,39" href="#" />
    <area alt="Carrie_Cheong" shape="poly"...

CSS

#director_images .displayImg, .profile { display: none; }

#sub-ir_bodContainer { width:668px; margin-top:15px; }
#sub-ir_bodContainer h3 { font-size: 15px; }
.sub-nav { padding: 8px 0 0 10px; background: #202020; color: #F7932E; display: block; font-size: 11px; height: 60px; line-height: 25px; width: 658px; }
.sub-nav { color: #F7932E; font-size: 12px; line-height: 25px; }
.sub-nav a:hover, .sub-nav a.active { color: #fff; }
.sub-nav a.first { padding-left: 0; }
.sub-nav a { color: #727272; display: inline; padding: 0 20px; text-decoration: none; }
.sub-nav span.kong {  padding:0 57px 0 57px; padding:0 59px 0 58px\9; content:".";}
*+html .sub-nav span.kong { padding:0 57px;}
.sub-nav span.kong0{ padding:0 0 0 113px;}
.sub-nav span.kong1 { padding:0 10px 0 20px}
.sub-nav span.kong2 { padding:0 10px 0 20px;}
.sub-nav span.kong3{ padding:0 9px 0 17px;}
.sub-nav span.kong4 {padding:0 7px 0 0px;}

JavaScript

$(document).ready(function(){
  $(".profile").hide().first().show();
  var director = '';
  var last_director_showed = 'Ang_Kah_Hong';

  $(".sub-nav a").bind('click', function(){
    $(".sub-nav a.active").removeClass('active');
    $(".sub-nav a#" + this.id).addClass('active');
    $(".profile").hide();
    $("#" + this.id + "-wrapper").show();
    var director =  this.id;
    $('#main-banner #director_images img').hide();
    $('#main-banner .director_' + director).show();
    return false;
  });

  $('#Map area').bind('mouseover', function(){

    var director =  this.alt;
    $('#main-banner #director_images img').hide();
    $('#main-banner .director_' + director).show();
  });

  $('#Map area').bind('mouseleave', function(){
    $('#main-banner #director_images img').hide();
    $('#main-banner .director_' + last_director_showed).show();
  });

  $('#Map area').bind('click', function(){
    var director =  this.alt;
    last_director_showed = director;
    $(".sub-nav a.active").removeClass('active');
    $(".sub-nav a#" + this.alt).addClass('active');
    $(".profile").hide();
    $("#" + this.alt + "-wrapper").show();
    return false;
  });
});