텝메뉴 마우스 오버시 시간

텝메뉴 마우스 오버시 시간 정보

텝메뉴 마우스 오버시 시간

본문

sir사이트내 텝메뉴를 보시면 마우스를올리면 약간 딜레이 있다가 다음 화면 넘어가는데,

현재 제가 만든 텝메뉴는 바로바로 다음 화면이 넘어갑니다.

그래서 좌우에 있는 텝메뉴를 왔다리 갔다리 마우스를 하면 다른 레이어에 있는 텝메뉴가 반짝 거리면서 이미지가 눈에 거슬리게 보이는데요.

sir처럼 텝메뉴처럼 조금 무겁게 마우스를 좌우로 막가따되어도 쉽게 변동이 안되게하려면 어떻게 하는지, 힌트나 비슷한 스킨좀 추천해주세요.

링크1 메인화면이며 텝메뉴에 마우스 왔다 갓다하시면 옆에 이미지들이 반짝 사라지는 느낌이듭니다.

링크2 는 목진철님이 만드신 텝메뉴 스킨입니다.

원하는 결과값은 sir메인 텝메뉴입니다.

설명드리기가 좀 어렵네요 ㅎㅎ.

아래는 소스입니다.

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
?>

<STYLE TYPE="text/css">
.on { background-image:url('<?=$tab_img?>/on.gif'); cursor:pointer; font-weight:bold; color:#f0761c; }
.off { background-image:url('<?=$tab_img?>/off.gif'); cursor:pointer; font-weight:bold; color:#bbbbbb; }
</style>
<script language="javascript">
  function tap(td,v){
    for(var i = 0; i <= <?=count($s_titles)-1?> ; i++) {
     img = document.getElementById('tap'+i);
     img.className = "off";
     eval("document.getElementById('tab_view"+i+"')").style.display="none";
    }
   td.className = "on"
   eval("document.getElementById('tab_view"+v+"')").style.display="";
  }
</script>

<table width='<?=$width?>' cellpadding=0 cellspacing=0 border=0>
<tr>
<? for ($i=0 ; $i <= count($s_titles)-1 ;$i++) { ?>
   <td width=68 background='<?=$tab_img?>/bg.gif'>
   <table cellpadding=0 cellspacing=0 width=90>
    <tr><td id="tap<?=$i?>" width="90" height="28" align=center onmouseover="tap(this,<?=$i?>)" class="off" class="a" onclick=location.href="<?=$g4[path]?>/bbs/board.php?bo_table=<?=$s_boarders[$i]?>">
    <span class=small><?=$s_titles[$i]?></span>
    </td></tr>
   </table>
   </td>

<? } ?>
<td width='<?=$width?>' background='<?=$tab_img?>/bg.gif' align='right' valign='bottom'>
<table width='82' cellpadding=0 cellspacing=0 border=0>
<tr height='23'><td background='<?=$tab_img?>/bg2.gif' align='center'><span style="font-family:돋음;color:#33aabb;font-size:7pt;"><?=$title?></span></td></tr></table>
</td>
</tr>
</table>

<table width='<?=$width?>' cellpadding=0 cellspacing=0 border=0>
<tr height='<?=$height?>'>
  <td width='5' background='<?=$g4[path]?>/img/v2/box_4.gif'></td>
  <td width='<?=$width?>'>
   <? for ($i=0 ; $i <= count($s_titles)-1 ;$i++) { // 아래부분을 반복문으로 했지만 각 게시판마다 다른 최근스킨을 부르면 수동으로 나열하면 됨?>
   <div id="tab_view<?=$i?>" style=display:none;>
   <?=latest('tab',$s_boarders[$i], $list, $len); ?>
   </div>
   <? } ?>
  </td>
  <td width='5' background='<?=$g4[path]?>/img/v2/box_5.gif'></td>
</tr>
<tr height='5'>
  <td background='<?=$g4[path]?>/img/v2/box_6.gif'></td>
  <td background='<?=$g4[path]?>/img/v2/box_7.gif'></td>
  <td background='<?=$g4[path]?>/img/v2/box_8.gif'></td>
</tr>
</table>

복사
공유하기

댓글 전체

새나라어른 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

07.11.19 22:09:41

function tap(td,v){
이 부분에서 시간을 딜레이 시키는겁니다.

그누보드 메인을 확인하니까..

0.5초 후에 탭을 보여주게 되어있네요..

마우스오버 > 시간딜레이 > 탭뷰~

이해가 가셨는데.. 구현하기 어려우시다면...

힌트만...^^;;

function show_tab(number, time) <----탭에 마우스가 가면.. 호출...
{
if (time == null) time = 500; <--시간설정

tab_option = setTimeout( "change_tab("+number+")", time); <--시간 .5초후 chang_tab 호출
}

function change_tab(number) <--실제 탭 보여주는 function

엑박 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

07.11.20 00:20:07

감사합니다.

텝메뉴 마우스 오버시 시간 > 그누4 질문답변

그누4 질문답변