ｱｲｺﾝ画像を5個並べて表示した下にそれぞれの内容を切り替えて表示するのですね？
(※ﾃﾞﾌｫﾙﾄではｱｲｺﾝ1の内容を表示)
次のようにして試してみてください｡

･HTML例(※ﾘﾝｸを設定する必要はありません｡)

<div id="menu">
 <img src="icon1.gif" width="130" height="55" border="0" class="menu-ico">
 <img src="icon2.gif" width="130" height="55" border="0" class="menu-ico">
 <img src="icon3.gif" width="130" height="55" border="0" class="menu-ico">
 <img src="icon4.gif" width="130" height="55" border="0" class="menu-ico">
 <img src="icon5.gif" width="130" height="55" border="0" class="menu-ico">
</div>
<div id="content-box">
 <p class="info current">画像1の内容？</p>
 <p class="info">画像2の内容？</p>
 <p class="info">画像3の内容？</p>
 <p class="info">画像4の内容？</p>
 <p class="info">画像5の内容？</p>
</div>

･CSS例(※ｱｲｺﾝ画像1の内容のみ表示して､他を非表示にするｽﾀｲﾙｼｰﾄです｡)

#content-box .info {
 display: none;
}
#content-box .current {
 display: block;
}

記述する順番は上記のままにしてください｡


･jQuery例

$(function(){
 $( "#menu .menu-ico" ).click(function() {
 var imgid = $( this ).index();
 $("#content-box .info").hide();
 $("#content-box .info").eq(imgid).show();
 });
});

※ﾎﾞｯｸｽ要素を分けているので､そのままでもｱｲｺﾝ画像の下に余白ができるはずですが､好みの間隔に調整したい場合は､以下のｽﾀｲﾙを追加で記述してみてください｡

#menu {
 margin-bottom: 15px; // ここで好きな数値を指定
}

【※ 追記 ※】

ｱｲｺﾝの下に､同一ﾍﾟｰｼﾞで社員の座席表がでて､名前をﾘﾝｸ
させてｸﾘｯｸすると､その下に紹介が､

前の質問の補足ﾒｯｾｰｼﾞを確認して､変更したｺｰﾄﾞを追記します｡

･HTML例

<div id="menu">
 <img src="icon1.gif" width="130" height="55" border="0" class="menu-ico">
 <img src="icon2.gif" width="130" height="55" border="0" class="menu-ico">
 <img src="icon3.gif" width="130" height="55" border="0" class="menu-ico">
 <img src="icon4.gif" width="130" height="55" border="0" class="menu-ico">
 <img src="icon5.gif" width="130" height="55" border="0" class="menu-ico">
</div>
<div id="content-box">
 <div class="info current">
 <h3>画像1の内容？</h3>
 <table id="seating-plan" border="1" cellspacing="0" cellpadding="3">
 <tr>
 <td class="a">A</td><td class="b">B</td><td class="c">C</td>
 </tr>
 <tr>
 <td class="d">D</td><td class="e">E</td><td class="f">F</td>
 </tr>
 </table>
 <div id="profile">
 <table class="a"><tr><td>Aのﾌﾟﾛﾌｨｰﾙ</td></tr></table>
 <table class="b"><tr><td>Bのﾌﾟﾛﾌｨｰﾙ</td></tr></table>
 <table class="c"><tr><td>Cのﾌﾟﾛﾌｨｰﾙ</td></tr></table>
 <table class="d"><tr><td>Dのﾌﾟﾛﾌｨｰﾙ</td></tr></table>
 <table class="e"><tr><td>Eのﾌﾟﾛﾌｨｰﾙ</td></tr></table>
 <table class="f"><tr><td>Fのﾌﾟﾛﾌｨｰﾙ</td></tr></table>
 </div>
 </div>
 <div class="info">画像2の内容？</div>
 <div class="info">画像3の内容？</div>
 <div class="info">画像4の内容？</div>
 <div class="info">画像5の内容？</div>
</div>

※座席表のtableﾀｸﾞを配置する為､pからdivに変更しています｡(W3Cに沿った変更です｡)
※ｱｲｺﾝ画像1の内容にしましたが､ｱｲｺﾝ2?ｱｲｺﾝ5のどのｱｲｺﾝ画像の内容にしても大丈夫です｡

･CSS例

#content-box .info {
 display: none;
}
#content-box .current {
 display: block;
}
#profile table {
 display: none;
}

･jQuery例

$(function(){
 $( "#menu .menu-ico" ).click(function() {
 var imgid = $( this ).index();
 $("#content-box .info").hide();
 $("#content-box .info").eq(imgid).show();
 $("#profile table").hide();
 });
 $( "#seating-plan td" ).click(function() {
 var pid = $( this ).attr("class");
 $("#profile table").hide();
 $("table." + pid).show();
 });
});

【※ 追記 ※】


画像や社員名にﾏｳｽｵｰﾊﾞｰした時のｶｰｿﾙの形状をﾘﾝｸと同じにする記述を追加したｽﾀｲﾙｼｰﾄです｡

#content-box .info {
 display: none;
}
#content-box .current {
 display: block;
}
#profile table {
 display: none;
}
/* この下を追加していますが､上に追加しても大丈夫です */
#menu .menu-ico,
#seating-plan td {
 cursor: pointer;
}

･ﾄｯﾌﾟﾍﾟｰｼﾞ > ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ > cursor
http://www.htmq.com/style/cursor.shtml

大変お世話になります｡m(_ _)m
返信が遅くなりまして､すいませんでした｡
いまからやってみます｡
大変すみませんが､やってみてわからない時は自分でも調べてみますが､
どうしても､というときは､また教えていただけますでしょうか｡
よろしくお願いします｡m(_ _)m