참고로 이글에는 스킨은 첨부되어 있지 않습니다. 요 아래글의 첨부파일을 받으셔서 여기 설명을 참고하셔서 수정해서 쓰시라고 올린 글입니다.
이건...스킨이라기 보단 팁이라고 해야....지 싶은데요...
아래글과 연결된 팁이니 이곳에 적겠습니다...
텍스트로 불려오는 대메뉴를 약간 꼼수를 써서 이미지로 불러오도록 하는겁니다...
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="20">
<td>
<div class="menu_container">
<ul>
<?
$html = "";
// 1차 분류
$result = sql_query(" select * from $shop[category_table] where category = '1' and view = '1' order by position asc, id asc ");
for ($i=0; $category1=sql_fetch_array($result); $i++) {
$tmp_data = $category1;
$hover = ""; if (shop_split("|", $tmp_data['log'], "1") == $ct_id) { $hover = "hover"; }
$html .= "<li class='".$hover."'><a href='".$shop['path']."/list.php?ct_id=".$tmp_data['id']."'>".$tmp_data['subject']."</a><span class='partition'>|</span>"; // 1차 start
// 2차 분류
$result2 = sql_query(" select * from $shop[category_table] where code = '".$category1['id']."' and view = '1' order by position asc, id asc ");
for ($ii=0; $category2=sql_fetch_array($result2); $ii++) {
$tmp_data = $category2;
if ($ii == '0') { $html .= "\n<ul>\n"; } // 2차
$html .= "<li><a href='".$shop['path']."/list.php?ct_id=".$tmp_data['id']."'>".$tmp_data['subject']."</a>";
$html .= "</li>\n"; // 2차
}
if ($ii) { $html .= "</ul>\n"; } // 2차
$html .= "</li>\n"; // 1차
}
echo $html;
?>
</ul>
</div>
</td>
</tr>
</table>
위소스에서 빨간색부분의 1차카테고리명을 불러오는 부분인 ".$tmp_data['subject']." 를 아래처럼 카테고리ID 제목을 가진 이미지로 대체합니다.
<img src='".$dmshop_wmbar_path."/img/btn_".$tmp_data['id']."_off.png' border='0' class='png' name='".$tmp_data['id']."'>
이미지제작시에 파일명을 카테고리ID로 지어주셔야 합니다. 예를들어 첫번째 카테고리 아이디가 1이라면 이미지명은 btn_1_off.png 와 btn_1_on.png가 되겠죠...
그리고 롤오버효과를 위해 <td> 에 클래스를 주고 스크립트를 추가해주면 롤오버효과까지 끝입니다...
전체 소스를 보면....
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="20">
<td class="top_menu_btn">
<div class="menu_container">
<ul>
<?
$html = "";
// 1차 분류
$result = sql_query(" select * from $shop[category_table] where category = '1' and view = '1' order by position asc, id asc ");
for ($i=0; $category1=sql_fetch_array($result); $i++) {
$tmp_data = $category1;
$hover = ""; if (shop_split("|", $tmp_data['log'], "1") == $ct_id) { $hover = "hover"; }
$html .= "<li class='".$hover."'><a href='".$shop['path']."/list.php?ct_id=".$tmp_data['id']."'><img src='".$dmshop_wmbar_path."/img/btn_".$tmp_data['id']."_off.png' border='0' class='png' name='".$tmp_data['id']."'></a><span class='partition'>|</span>"; // 1차 start
// 2차 분류
$result2 = sql_query(" select * from $shop[category_table] where code = '".$category1['id']."' and view = '1' order by position asc, id asc ");
for ($ii=0; $category2=sql_fetch_array($result2); $ii++) {
$tmp_data = $category2;
if ($ii == '0') { $html .= "\n<ul>\n"; } // 2차
$html .= "<li><a href='".$shop['path']."/list.php?ct_id=".$tmp_data['id']."'>".$tmp_data['subject']."</a>";
$html .= "</li>\n"; // 2차
}
if ($ii) { $html .= "</ul>\n"; } // 2차
$html .= "</li>\n"; // 1차
}
echo $html;
?>
</ul>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
$(function() {
$(".top_menu_btn a img").mouseenter(function() {
$(this).attr("src", "<?=$dmshop_wmbar_path?>/img/btn_"+$(this).attr("name")+"_on.png");
}).mouseleave(function(){
$(this).attr("src", "<?=$dmshop_wmbar_path?>/img/btn_"+$(this).attr("name")+"_off.png");
});
});
</script>
이렇게 되겠죠....
이상칠정회원
