view.skin.php 파일에서 관련 코드입니다.

<script type="text/javascript">
$(function(){
 $("#imgList li>img").hover(function(){
  $("#mainImg img").attr('src', $(this).attr('src'));
 });
});

</script>

  
<style>

 #mainImg{text-align:center;padding-top:0px;border:1px solid #ddd;}
 #mainImg img{width:900px;height:600px;}
 #imgList{list-style:none; padding:0;*zoom:1;margin:8px 0px 5px 4px;}
 #imgList:after{content:""; display:block; clear:both;}
 #imgList li{float:left;padding:0px;margin:0px;border:2px solid #e9e9e9;}
 #imgList li img{width:79px;height:50px;}

 .viewInfo{border-collapse:collapse; border-top:0px solid #ddd;border-bottom:0px solid #ddd;width:100%;}
 .viewInfo th, .viewInfo td{font-size:12px;color: #777;padding:11px 8px 10px 18px;text-align:left;border:0px solid #ededed;}
 .viewInfo th{background:url("<?=$board_skin_path?>/img/map_icon.gif") 4px 12px no-repeat;}
</style>

<div id="mainImg"><img src='<?=$view['y1']?>' /></div>

<p id='young999' align="center"><?=$view['wr_1']?></p>

<?php
if($view['wr_0']) {
echo "<ul id='imgList'>";
for($i=1; $i<=$view['wr_0'];$i++)
{
if($view['y'.$i]['view'])
echo "<li data-index='{$i}'><img src='{$view['y'.$i]}' /></li>";
}
echo "</ul>";
}
?>

------------------------------------------------------------------------

아래 썸네일 이미지에 마우스 올렸을 때 윗부분의 큰 이미지가 바뀌는데

위 이미지의 제목(id='young999') 부분도 바뀐 이미지의 제목으로 바꾸고 싶은데 바뀌질 않네요

어떻게 해야 할까요?