안녕하세요?

제로보드나 이 사이트에서와 같이 페이지 링크 번호를 클릭할 때,

1. 선택되지 않은 페이지번호 -> 대괄호로 표시 (예, [1] [2] [3] [4])

2. 현재 활성화된 페이지번호 -> 대괄호 없이 '굵은 숫자'로 표시 (예, 3페이지가 선택됐을 경우 --> [1] [2] 3 [4] [5])

되게하는 자바스크립트 소스 좀 알려주세요.

아래 전체 소스는 전자앨범을 만들어 주는 툴에서 만들어진 자바소스입니다.
이 소스는 위 1, 2 경우 모두 대괄호로만 표시돼서 현재 선택되어 있는 페이지가 어느 페이지인지 혼동됩니다.
전체 소스중,  

var page_length = '';
for(i=1; i<=Math.ceil(gallery_list.length/(g_width_length*g_height_length)); i++) {
page_length += '<a href="#" onclick="show_image('+page_add_no[i-1]+');" onmouseover="window.status='PAGE : '+i+''; return true;" onmouseout="window.status=''; return true;" onfocus="this.blur();" class="g_page_no">['+i+']</a>'; }

이 부분에서 어떻게 수정하면 될 것 같은데 자바스크립트를 모르는 저에게는 엄두가 나질 않습니다.

한번 살펴 보신 후 도움 부탁드립니다.  감사합니다.

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

<style>
<!--
<!--
.g_page_no
.g_page_no:hover
.g_image_border_show
.g_image_border_hide
//-->
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
.g_page_no {color:#000000; font-size:9pt; font-family:arial;}
.g_page_no:hover {color:#0033ff;}
.g_image_border_show {border:1 solid #000000;}
.g_image_border_hide {border:1 solid #FFFFFF;}
//-->
</style>

<script language="javascript">
<!--

var cell_fo_color ='#F0F0F0';
var cell_bg_color ='#FFFFFF';
var small_width =120;
//var small_height =120;
var cellp_px =4
var g_width_length =4;
var g_height_length =4;
var maximage=(g_height_length*small_width);
var mainpic_color ='#FFFFFF';
var image_count =66;
var effect_style =25
var pic_align_kind =2
var pic_max_width =400
var caption_msg ='<b>'+'Kids - Analog'+'</b>'
if (pic_align_kind==3) {var maximage=0};
var slideonoff = "off"
var slideon=-1;
if (slideonoff=='off') slideon=0;
// 툴에서 삽입 종료

var ipos=0;

var image_url="Viewimage0.jpg";
var blend_type='';
if (effect_style<24) { blend_type=' style="filter:revealTrans(duration=1)" '; }
if (effect_style==24) { blend_type=' style="filter: blendTrans(duration=1)" '; }

var gallery_list = new Array();
for(var i=0; i<image_count; i++) {
gallery_list[i] = 'Image'+i+'.jpg';}

gallery_table='<table width="100%"><tr><td height="20"><p align="center"><font color="black" face="Tahoma"><span style="font-size:9pt;">'+caption_msg+'</p></td></tr></table>';

if (pic_align_kind!=4){
gallery_table += '<table bgcolor="'+cell_bg_color+'" cellpadding="'+cellp_px+'" style="border-collapse:collapse;" width="'+parseInt(((small_width+(cellp_px*2))*g_width_length)+g_width_length+maximage+cellp_px+cellp_px+cellp_px)+'" height="'+parseInt(((small_width+(cellp_px*2))*g_height_length)+g_height_length)+'" bordercolorlight="#999999" bordercolordark="#ffffff" cellspacing="0" cellpadding="0">'; }
gallery_table += '<caption id="caption_code"> </caption>';

if (pic_align_kind==4){
gallery_table +='<table bgcolor="'+mainpic_color+'" cellpadding="'+cellp_px+'" style="border-collapse:collapse;" width="100%" height="100%" bordercolorlight="#999999" bordercolordark="#ffffff" cellspacing="0" cellpadding="0">';
gallery_table += '<tr align="center"><td><table align="center" border="1" cellspacing="0" cellpadding="7" bordercolordark="white" bordercolorlight="#999999" ><tr><td bgcolor="#FFFFFF" width="10" height="10" ><a href="#" onfocus="this.blur();"><img src="introimage.jpg" border=0 onerror="Berror()" onload="e_start()" onclick="autoon()" align="middle" name="bigimage" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" '+blend_type+'></a><//td></tr></table></td></tr>' ; }

if (pic_align_kind<4) {

for(i=0; i<g_height_length; i++)
{
gallery_table += '<tr align="center">';
for(var j=0; j<g_width_length; j++)
{
if (pic_align_kind==0) {
if (i==0) {
if (j==0 ) { gallery_table += '<td bgcolor="'+mainpic_color+'" width="'+ '+ '+maximage+'" rowspan="'+g_height_length+'" style="border-width:1px; border-color:rgb(204,204,204); border-style:solid;"><table border="1" cellspacing="0" cellpadding="7" bordercolordark="white" bordercolorlight="#999999" ><tr><td bgcolor="#FFFFFF" width="10" height="10" ><a href="#" onfocus="this.blur();"><img src="introimage.jpg" border=0 onerror="Berror()" onload="e_start()" onclick="autoon()" align="middle" name="bigimage" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" '+blend_type+'></a></td></tr></table></td>' ; }}}

if (pic_align_kind<4)
{ gallery_table += '<td id="g_t" onMouseOver="this.style.backgroundColor=''+cell_fo_color+'';" onMouseOut="this.style.backgroundColor='';" style="border-width:1px; border-color:rgb(204,204,204); border-style:solid;" width="'+parseInt(small_width)+'" height="'+parseInt(small_width)+'"> </td>'; }

if (pic_align_kind==2) {
if (i==0) {
if (j==(g_width_length-1) ) { gallery_table += '<td bgcolor="'+mainpic_color+'" width="'+maximage+'" rowspan="'+g_height_length+'" style="border-width:1px; border-color:rgb(204,204,204); border-style:solid;"><table border="1" cellspacing="0" cellpadding="7" bordercolordark="white" bordercolorlight="#999999" ><tr><td bgcolor="#FFFFFF" width="10" height="10" ><a href="#" onfocus="this.blur();"><img src="introimage.jpg" border=0 onerror="Berror()" onload="e_start()" onclick="autoon()" align="middle" name="bigimage" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" '+blend_type+'></a></td></tr></table></td>' ; }}}

if (pic_align_kind==1) {
if (i==0) {
if ((parseInt(((g_width_length-1)/2)))==j) { gallery_table += '<td bgcolor="'+mainpic_color+'" width="'+maximage+'" rowspan="'+g_height_length+'" style="border-width:1px; border-color:rgb(204,204,204); border-style:solid;"><table border="1" cellspacing="0" cellpadding="7" bordercolordark="white" bordercolorlight="#999999" ><tr><td bgcolor="#FFFFFF" width="10" height="10" ><a href="#" onfocus="this.blur();"><img src="introimage.jpg" border=0 onerror="Berror()" onload="e_start()" onclick="autoon()" align="middle" name="bigimage" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" '+blend_type+'></a></td></tr></table></td>'+ ' ; }}}
}

gallery_table += '</tr>'; }
}

if (pic_align_kind<4){
if ((g_width_length*g_height_length)< image_count) {
gallery_table += '</table>';
gallery_table += '<table border="0" width="'+parseInt((small_width*g_width_length)+maximage+30)+'" height="30" cellspacing="0" cellpadding="0">';
gallery_table += '<tr align="center">';
gallery_table += '<td id="page_prev" width="35"><a href="#" onfocus="this.blur();" onclick="move_page('prev');" onmouseover="window.status='Previous'; return true;" onmouseout="window.status=''; return true;" class="g_page_no"><img src="m_p_t_p_i_left.jpg" border="0" ></a></td>';
gallery_table += '<td id="page_info"> </td>';
gallery_table += '<td id="page_next" width="35"><a href="#" onfocus="this.blur();" onclick="move_page('next');" onmouseover="window.status='+ 'Next'; return true;" onmouseout="window.status=''; return true;" class="g_page_no"><img src="m_p_t_p_i_right.jpg" border="0" ></a></td>';
gallery_table += '</tr>';
gallery_table += '</table>';
}}
var page_status = '';
function show_image(page_no) {
if (pic_align_kind<4) {page_status = page_no;
for(i=0; i<g_width_length*g_height_length; i++) {
if(gallery_list[i+page_no] != undefined) {
g_t[i].innerHTML = '<a href="#" onclick="view_image('+(i+page_no)+');" onfocus="this.blur();">'+
'<img src="'+gallery_list[i+page_no]+'" onerror="error_debug('+i+');" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onmouseover="this.className='g_image_border_show';" onmouseout="this.className='g_image_border_hide';" border="0" class="g_image_border_hide"></a>';
} else { g_t[i].innerHTML = ' '; } } }

var show_page = parseInt((page_no/(g_width_length*g_height_length))+1);

}
function move_page(porn) {
if(porn == 'prev') { if(page_status == 0) { alert('처음입니다.'); show_image(0);}
else { show_image(page_status-(g_width_length*g_height_length)); } }
else if(porn == 'next') { if(page_status == page_add_no[page_add_no.length-1]) { alert('끝입니다.'); show_image(page_add_no[page_add_no.length-1]); }
else { show_image(page_status+(g_width_length*g_height_length)); } } }

var page_add_no = new Array();
for(i=0; i<gallery_list.length/(g_width_length*g_height_length); i++) {
page_add_no[i] = i*(g_width_length*g_height_length); }

var page_length = '';
for(i=1; i<=Math.ceil(gallery_list.length/(g_width_length*g_height_length)); i++) {
page_length += '<a href="#" onclick="show_image('+page_add_no[i-1]+');" onmouseover="window.status='PAGE : '+i+''; return true;" onmouseout="window.status=''; return true;" onfocus="this.blur();" class="g_page_no">['+i+']</a>'; }

function show_page() {
if ((g_width_length*g_height_length)< image_count)
if (pic_align_kind<4) {
{ page_info.innerHTML = page_length; }
}}

function e_start() {
if (pic_align_kind!=3) {
if (effect_style<24) { bigimage.filters.item(0).transition = effect_style; bigimage.filters.item(0).play(); }
if (effect_style==24) { bigimage.filters.blendTrans.duration=1.1; bigimage.filters.blendTrans.play(); }

}}
function autoslide(){
ipos=ipos+1;
if (image_count==ipos) ipos=0;
if (effect_style<24) { bigimage.filters.item(0).apply() ;}
if (effect_style==24) { bigimage.filters.blendTrans.apply();}

bigimage.src='Viewimage'+ipos+'.jpg';

}

function autoon(){
if (pic_align_kind==4)
{
if (slideon==0 ) { intervalid=setInterval("autoslide()",4000);slideon=1; } else
{ clearInterval(intervalid); slideon=0; }

} else
{ if (slideon==0 ) { intervalid=setInterval("autoslide()",4000);} slideon=1; }

}
function view_image(iurl) {
if (iurl==-1) {iurl=0; ipos=0; slideon=1; intervalid=setInterval("autoslide()",4000) } else
{ ipos=iurl; slideon=0; clearInterval(intervalid); }

image_url='Viewimage'+iurl+'.jpg';
if (pic_align_kind!=3)
{
if (effect_style==24) bigimage.filters.blendTrans.apply();
if (effect_style<24) bigimage.filters.item(0).apply();
bigimage.src= image_url;
}

if (pic_align_kind==3) {popup_image(image_url);}
}

function error_Berror() { bigimage.src="introimage.jpg" };
function error_debug(error_no)
{ g_t[error_no].innerHTML = '<div class="g_page_no"><font color="#ff0000"><b></b></font><br><br></div>'; }

var intervalid;
function load_hig()
{if (pic_align_kind<4){ show_image(0); show_page();} if (pic_align_kind!=3) {view_image(slideon)};

}

function popup_image(image_url) {
enlarge(image_url,event);
}

var ie=document.all
var ns=document.layers
var ns6=document.getElementById&&!document.all

function enlarge(which,e){

if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
crossobj.style.visibility="hidden"
crossobj.innerHTML='<div id=drag align=right style=background:#008800><img onClick=closepreview() src=quitimage.jpg style=cursor:hand></div><img src="'+which+'" name="bigimage" onClick=closepreview() onload="crossonload()">'
return false
}

else if (document.layers){
if (document.showimage.visibility=="hide"){
document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>')
document.showimage.document.close()
document.showimage.left=e.x
document.showimage.top=e.y
document.showimage.visibility="show"
}
else
document.showimage.visibility="hide"
return false
}

else
return true
}

function closepreview(){
crossobj.style.visibility="hidden"
}
function crossonload(){
crossobj.style.width=bigimage.width+4;
crossobj.style.visibility="visible"
}
//-->
</script>


<script language="JavaScript1.2">
<!--

var nsx,nsy,nstemp

function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
}
return false
}

function initializedrag(e){
if (ie&&event.srcElement.id=="drag"||ns6&&e.target.id=="drag"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}

document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

//-->
</script>
<head>
<META http-equiv="imagetoolbar" content="no">
</head>
<title>GALLERY PAGE</title>

<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onload="load_hig();">


<body bgcolor= "#FFFFFF">
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">

<p align="center"><b><script language="javascript">
<!--
document.write(gallery_table);
//-->
</script>
</b></p>
<div id="showimage" style="border-width:2; border-color:black; border-style:solid; width:20px; height:19px; position:absolute; left:30px; top:30px; z-index:1; visibility:hidden;">
</body>
</html>

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