제이쿼리 질문입니다 마우스이미지롤오버 하위이미지표현되는데 다른 버튼 롤오버시 변경되게 어떻게 하죠
본문
1,2번 단추가 있고 1번을 롤오버 하면 1번하위 이미지 단추가 나오고 2번을 롤오버하면 2번이미지 단추가 나오게 하려고 합니다.(다른 버튼이 롤오버되면 다른단추의 하위이미지를 닫게 하고 싶습니다.)
임의적으로 close라고 수정했는데 안닫히고 변화가 없습니다
어떻게 수정해야 할까요
(모든 하위이미지 닫기라는 명령도 있다면 알려주세요, 모든하위이미지 닫고 지정단추 하위이미지 열기,가능할까요.-단추를 많이 만들면 코드가 길어질것 같아서요)
(그리고 단추이미지도 색상변경해서 변화를 주고 싶습니다)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<style type="text/css">
div{display:none;}
</style>
</head>
<body>
//단추시작
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://menu.mt.co.kr/new_navi2/logo_mt2.png" class="imgRollOver" /></td>
<td><img src="http://image.chosun.com/main/201003/chosun_logo.gif" class="imgRollOver1" /></td>
</tr>
</table>
단추종료//
// 첫단추 하위 숨김이미지 단추
<div class="222">
<img src="http://icon.daumcdn.net/w/c/12/11/10192021148946703.png" 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="http://www.designbook.co.kr/shop/data/skin/season2/img/banner/logo.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>
<script type="text/javascript">
$(function(){
$("img.imgRollOver").mouseover(function(){
$('div.111').show('1000', function(){
$('div.222').close('1000', function(){
});
});
});
});
$(function(){
$("img.imgRollOver1").mouseover(function(){
$('div.222').show('1000', function(){
$('div.111').close('1000', function(){
});
});
});
});
</script>
</body>
</html>
임의적으로 close라고 수정했는데 안닫히고 변화가 없습니다
어떻게 수정해야 할까요
(모든 하위이미지 닫기라는 명령도 있다면 알려주세요, 모든하위이미지 닫고 지정단추 하위이미지 열기,가능할까요.-단추를 많이 만들면 코드가 길어질것 같아서요)
(그리고 단추이미지도 색상변경해서 변화를 주고 싶습니다)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<style type="text/css">
div{display:none;}
</style>
</head>
<body>
//단추시작
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://menu.mt.co.kr/new_navi2/logo_mt2.png" class="imgRollOver" /></td>
<td><img src="http://image.chosun.com/main/201003/chosun_logo.gif" class="imgRollOver1" /></td>
</tr>
</table>
단추종료//
// 첫단추 하위 숨김이미지 단추
<div class="222">
<img src="http://icon.daumcdn.net/w/c/12/11/10192021148946703.png" 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="http://www.designbook.co.kr/shop/data/skin/season2/img/banner/logo.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>
<script type="text/javascript">
$(function(){
$("img.imgRollOver").mouseover(function(){
$('div.111').show('1000', function(){
$('div.222').close('1000', function(){
});
});
});
});
$(function(){
$("img.imgRollOver1").mouseover(function(){
$('div.222').show('1000', function(){
$('div.111').close('1000', function(){
});
});
});
});
</script>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.