아주빠른 롤오버 이미지 - 아무리 많은 메뉴아이템에서도 2개의 이미지만 사용
작성일 07-07-11 17:48
페이지 정보
작성자서방님 조회 191회 댓글 2건본문
<script>
<!---Edited by JASKO-->
<!---Web Site : http://www.javascript.co.kr-->
<!-- Beginning of JavaScript -
// 이미지맵의 가로사이즈
var menuwidth=600
// 이미지맵의 세로사이즈
var menuheight=43
// 왼쪽, 위쪽 여백
var pos_left=100
var pos_top=0
// 요기까지만 수정하세요
var cliptop=0
var clipbottom=menuheight
var clipleft=0
var clipright=0
var cliprightmax=0
function initiate() {
if (document.all) {
document.all.menutop.style.posLeft=pos_left
document.all.menutop.style.posTop=pos_top
document.all.menubelow.style.posLeft=pos_left
document.all.menubelow.style.posTop=pos_top
document.all.menutop.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
}
if (document.layers) {
document.menubelow.left=pos_left
document.menubelow.top=pos_top
document.menutop.left=pos_left
document.menutop.top=pos_top
document.menutop.clip.left=clipleft
document.menutop.clip.right=clipright
document.menutop.clip.top=cliptop
document.menutop.clip.bottom=clipbottom
}
}
function clipthis(cliplef,cliprightma) {
clipright=cliprightma
clipleft=cliplef
cliprightmax=cliprightma
if (document.all) {
document.all.menutop.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
}
if (document.layers) {
document.menutop.clip.left=clipleft
document.menutop.clip.right=clipright
document.menutop.clip.top=cliptop
document.menutop.clip.bottom=clipbottom
}
}
// - End of JavaScript - -->
</script>
</HEAD>
<!--2. <BODY> 태그내에 onload="" 혹은 onunload 부분이 있으면 복사해 넣으세요-->
<BODY BGCOLOR="#FFFFFF" onLoad="initiate()">
<!--3. <BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
<div id="menubelow" style="position:absolute;">
<!-- 이미지 맵을 만들어 맵 코드를 삽입하세요 -->
<!--마우스 아웃시 보여줄 이미지의 맵-->
<IMG src="http://www.google.co.kr/ig/f/AaEyQnOaAr4/intl/ALL_kr/svc_sprite_all.gif" USEMAP="#menubelowmap" BORDER="0">
<MAP NAME="menubelowmap">
<AREA SHAPE=RECT COORDS="1,0,96,52" HREF="http://www.jasko.co.kr" onMouseOver="clipthis(0,99)" target="_blank">
<AREA SHAPE=RECT COORDS="101,0,186,51" HREF="http://www.jasko.co.kr" onMouseOver="clipthis(102,199)" target="_blank">
<AREA SHAPE=RECT COORDS="192,1,282,50" HREF="http://www.jasko.co.kr" onMouseOver="clipthis(200,299)" target="_blank">
<AREA SHAPE=RECT COORDS="287,1,386,50" HREF="http://www.jasko.co.kr" onMouseOver="clipthis(300,399)" target="_blank">
<AREA SHAPE=RECT COORDS="391,1,495,50" HREF="http://www.jasko.co.kr" onMouseOver="clipthis(400,499)" target="_blank">
<AREA SHAPE=RECT COORDS="501,0,596,49" HREF="http://www.jasko.co.kr" onMouseOver="clipthis(500,599)">
</MAP>
</div>
<!--마우스 오버시 보여줄 이미지의 맵-->
<div id="menutop" style="position:absolute;">
<IMG src="http://seobangnim.xinour.net/zb5/files/images/0006/94/43/5bd894841c840dec4dbfeb22e77c4b98.png" USEMAP="#menutopmap" BORDER="0">
<MAP NAME="menutopmap">
<AREA SHAPE=RECT COORDS="1,0,96,52" HREF="http://www.jasko.co.kr" target="_blank">
<AREA SHAPE=RECT COORDS="101,0,186,51" HREF="http://www.jasko.co.kr" target="_blank">
<AREA SHAPE=RECT COORDS="192,1,282,50" HREF="http://www.jasko.co.kr" target="_blank">
<AREA SHAPE=RECT COORDS="287,1,386,50" HREF="http://www.jasko.co.kr" target="_blank">
<AREA SHAPE=RECT COORDS="391,1,495,50" HREF="http://www.jasko.co.kr" target="_blank">
<AREA SHAPE=RECT COORDS="501,0,596,49" HREF="http://www.jasko.co.kr" target="_blank">
</MAP>
</div>
댓글목록
서방님님의 댓글
서방님
작성일
서방님님의 댓글
서방님
작성일