테스트 사이트 - 개발 중인 베타 버전입니다

제이쿼리 질문입니다 상단메뉴롤오버로 div이미지를 열리게 하려는데 엉망입니다

· 11년 전 · 2948 · 2
홈버튼은 div전부 닫히게 하고 그나머지 상단메뉴는 지정된div빼고는 다닫히게 하고 지정된div는 열리게 하려는데
최적화가 안되어선지 홈버튼에서 전부열렸다고 순차적으로 닫히고 버튼을 이리저리 롤오버시키면 2~3개 열렸다가 닫히고 지멋대로 입니다
좋은 방법없을까요? 링크보세요
도와주세요ㅜㅜ

class="imgRollOver0"></a></td>
<td>
<a href="./main1.php" onfocus="blur();">
<img src="./img/q_02.jpg" width="95" height="94" class="imgRollOver1" border="0"></td>
<td>
<a href="./main2.php" onfocus="blur();">
<img src="./img/q_03.jpg" width="96" height="94" class="imgRollOver2" border="0"></td>
<td>
<a href="./main3.php" onfocus="blur();">
<img src="./img/q_04.jpg" width="95" height="94" class="imgRollOver3" border="0"></td>
<td>
<a href="./main4.php" onfocus="blur();">
<img src="./img/q_05.jpg" width="95" height="94" class="imgRollOver4" border="0"></td>
<td>
<a href="./main5.php" onfocus="blur();">
<img src="./img/q_06.jpg" width="95" height="94" class="imgRollOver5" border="0"></td>
<td>
<a href="./main6.php" onfocus="blur();">
<img src="./img/q_07.jpg" width="96" height="94" class="imgRollOver6" border="0"></td>
<td>
<a href="http://www.boxpop.co.kr/" onfocus="blur();">
<img src="./img/q_08.jpg" width="187" height="94" class="imgRollOver7" border="0"></td>
</tr>
</table></td></tr></table><tr>
<td align="center" valign="top"width="100%" bgcolor="#FFFFFF">
<div class="666">
<img src="./img/sub script menu 6.jpg" alt="" border="0" usemap="#Map1" />
</div>
<div class="555">
<img src="./img/sub script menu 5.jpg" alt="" border="0" usemap="#Map1" />
</div>
<div class="444">
<img src="./img/sub script menu 4.jpg" alt="" border="0" usemap="#Map1" />
</div>
<div class="333">
<img src="./img/sub script menu 3.jpg" alt="" border="0" usemap="#Map1" />
</div>
<div class="222">
<img src="./img/sub script menu 2.jpg" alt="" border="0" usemap="#Map1" />
<map name="Map1" id="Map">
<area shape="rect" coords="19,36,31,66" href="http://www.naver.com" target="_blank" />
<area shape="rect" coords="96,42,127,70" href="http://www.daum.net" target="_blank" />
</map>
</div>

<div class="111">
<img src="./img/sub script menu 1.jpg" alt="" border="0 usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="19,36,31,66" href="http://www.naver.com" target="_blank" />
<area shape="rect" coords="96,42,127,70" href="http://www.daum.net" target="_blank" />
</map>
</div>

</td>
</tr>
</table>
<script type="text/javascript">
$(function(){
$("img.imgRollOver0").mouseover(function(){
$('div.111').hide('1000', function(){
$('div.222').hide('1000', function(){
$('div.333').hide('1000', function(){
$('div.444').hide('1000', function(){
$('div.555').hide('1000', function(){
$('div.666').hide('1000', function(){
});});});});});});
});
});

$(function(){
$("img.imgRollOver1").mouseover(function(){

$('div.222').hide('1000', function(){
$('div.333').hide('1000', function(){
$('div.444').hide('1000', function(){
$('div.555').hide('1000', function(){
$('div.666').hide('1000', function(){

$('div.111').show('1000', function(){
});});});});});
});
});
});

$(function(){
$("img.imgRollOver2").mouseover(function(){

$('div.111').hide('1000', function(){
$('div.333').hide('1000', function(){
$('div.444').hide('1000', function(){
$('div.555').hide('1000', function(){
$('div.666').hide('1000', function(){

$('div.222').show('1000', function(){
});});});});});
});
});
});

$(function(){
$("img.imgRollOver3").mouseover(function(){

$('div.222').hide('1000', function(){
$('div.111').hide('1000', function(){
$('div.444').hide('1000', function(){
$('div.555').hide('1000', function(){
$('div.666').hide('1000', function(){

$('div.333').show('1000', function(){
});});});});});
});
});
});

$(function(){
$("img.imgRollOver4").mouseover(function(){

$('div.222').hide('1000', function(){
$('div.333').hide('1000', function(){
$('div.111').hide('1000', function(){
$('div.555').hide('1000', function(){
$('div.666').hide('1000', function(){

$('div.444').show('1000', function(){
});});});});});
});
});
});

$(function(){
$("img.imgRollOver5").mouseover(function(){

$('div.222').hide('1000', function(){
$('div.333').hide('1000', function(){
$('div.444').hide('1000', function(){
$('div.111').hide('1000', function(){
$('div.666').hide('1000', function(){

$('div.555').show('1000', function(){
});});});});});
});
});
});


$(function(){
$("img.imgRollOver6").mouseover(function(){

$('div.222').hide('1000', function(){
$('div.333').hide('1000', function(){
$('div.444').hide('1000', function(){
$('div.555').hide('1000', function(){
$('div.111').hide('1000', function(){

$('div.666').show('1000', function(){
});});});});});
});
});
});


</script>
</td>
</tr>
</table>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

11년 전
$("img.imgRollOver0").mouseover(function(){
$('div.111').hide('1000');
$('div.222').hide('1000');
$('div.333').hide('1000');
......

});

이렇게 수정해보세요
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

div{display:none;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){

now_show_div = ""; //메뉴 상태 초기값
$("#Table_01 img").mouseover(function(){ //이미지에 마우스 오버시 동작
menu_img = $(this).attr("class"); //마우스 오버한 이미지 체크

if(menu_img == now_show_div) return false; //열려있는 메뉴라면 중지.

switch(menu_img){
case "imgRollOver0" : ani_hide(); return false;break;
case "imgRollOver1" : $sub_menu_div = $('div.111');break;
case "imgRollOver2" : $sub_menu_div = $('div.222');break;
case "imgRollOver3" : $sub_menu_div = $('div.333');break;
case "imgRollOver4" : $sub_menu_div = $('div.444');break;
case "imgRollOver5" : $sub_menu_div = $('div.555');break;
case "imgRollOver6" : $sub_menu_div = $('div.666');break;
default : $('div').hide("1000");break;
}
ani_hide();
$sub_menu_div.show("1000",function(){now_show_div = menu_img;})
});
});

function ani_hide(){//애니메이션 효과 스킵후 메뉴숨김
$('div').stop(true,true).hide("1000");
now_show_div = ""; //메뉴 상태 초기값
}
</script>

<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td background="http://www.boxsp.com/sphome/img/1sbg.jpg" align="center"><img src="http://www.boxsp.com/sphome/img/1s.jpg" width="1100" height="38" usemap="#Map001" border="0"></td>
</tr>
<tr>
<td valign="top">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="f8f8f8" valign="top">
<tr>
<td align="center">
<table id="Table_01" width="1100" height="94" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="./main.php" onfocus="blur();"><img src="http://www.boxsp.com/sphome/img/q_01.jpg" width="341" height="94" border="0" class="imgRollOver0"></a></td>
<td><a href="./main1.php" onfocus="blur();"><img src="http://www.boxsp.com/sphome/img/q_02.jpg" width="95" height="94" class="imgRollOver1" border="0"></td>
<td><a href="./main2.php" onfocus="blur();"><img src="http://www.boxsp.com/sphome/img/q_03.jpg" width="96" height="94" class="imgRollOver2" border="0"></td>
<td><a href="./main3.php" onfocus="blur();"><img src="http://www.boxsp.com/sphome/img/q_04.jpg" width="95" height="94" class="imgRollOver3" border="0"></td>
<td><a href="./main4.php" onfocus="blur();"><img src="http://www.boxsp.com/sphome/img/q_05.jpg" width="95" height="94" class="imgRollOver4" border="0"></td>
<td><a href="./main5.php" onfocus="blur();"><img src="http://www.boxsp.com/sphome/img/q_06.jpg" width="95" height="94" class="imgRollOver5" border="0"></td>
<td><a href="./main6.php" onfocus="blur();"><img src="http://www.boxsp.com/sphome/img/q_07.jpg" width="96" height="94" class="imgRollOver6" border="0"></td>
<td><a href="http://www.boxpop.co.kr/" onfocus="blur();"><img src="http://www.boxsp.com/sphome/img/q_08.jpg" width="187" height="94" class="imgRollOver7" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="sub_menu" align="center" valign="top"width="100%" bgcolor="#FFFFFF">
<div class="666"><img src="http://www.boxsp.com/sphome/img/sub script menu 6.jpg" alt="" border="0" usemap="#Map1" /></div>
<div class="555"><img src="http://www.boxsp.com/sphome/img/sub script menu 5.jpg" alt="" border="0" usemap="#Map1" /></div>
<div class="444"><img src="http://www.boxsp.com/sphome/img/sub script menu 4.jpg" alt="" border="0" usemap="#Map1" /></div>
<div class="333"><img src="http://www.boxsp.com/sphome/img/sub script menu 3.jpg" alt="" border="0" usemap="#Map1" /></div>
<div class="222"><img src="http://www.boxsp.com/sphome/img/sub script menu 2.jpg" alt="" border="0" usemap="#Map1" /></div>
<div class="111"><img src="http://www.boxsp.com/sphome/img/sub script menu 1.jpg" alt="" border="0" usemap="#Map" /></div>
</td>
</tr>
</table>

<map name="Map001" id="Map001">
<area shape="rect" coords="942,10,1013,26" href="daum.net" />
<area shape="rect" coords="881,10,933,27" href="#" />
<area shape="rect" coords="849,9,872,25" href="#" />
<area shape="rect" coords="271,6,331,28" href="#" />
<area shape="rect" coords="119,8,262,28" href="#" />
</map>
<map name="Map" id="Map">
<area shape="rect" coords="19,36,31,66" href="http://www.naver.com" target="_blank" />
<area shape="rect" coords="96,42,127,70" href="http://www.daum.net" target="_blank" />
</map>
<map name="Map1" id="Map">
<area shape="rect" coords="19,36,31,66" href="http://www.naver.com" target="_blank" />
<area shape="rect" coords="96,42,127,70" href="http://www.daum.net" target="_blank" />
</map>


미숙하지만 구현해 봣습니다.
참고가 되셧으면 좋겠습니다.

게시글 목록

번호 제목
284508
284499
284492
284490
284484
284481
284478
284476
284474
284472
284470
284458
284457
284454
284453
284447
284446
284444
284441
284440