제이쿼리 질문입니다 상단메뉴롤오버로 div이미지를 열리게 하려는데 엉망입니다 정보
제이쿼리 질문입니다 상단메뉴롤오버로 div이미지를 열리게 하려는데 엉망입니다관련링크
첨부파일
본문
홈버튼은 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~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>
댓글 전체
$("img.imgRollOver0").mouseover(function(){
$('div.111').hide('1000');
$('div.222').hide('1000');
$('div.333').hide('1000');
......
});
이렇게 수정해보세요
$('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>
미숙하지만 구현해 봣습니다.
참고가 되셧으면 좋겠습니다.
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>
미숙하지만 구현해 봣습니다.
참고가 되셧으면 좋겠습니다.
