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

마우스를 움직이면 화살표가 따라 움직이고, 클릭하면 화살표가 붙어 있는 롤오버 메뉴 스크립트 만들기

Elbis
프로필 보기이 회원 글보기
 · 19년 전 · 1827
깔끔한 롤오버 이미지버튼 메뉴 스크립트 입니다

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> jasko sample script </title>

<!---- [1단계] 아래 코드를 <HEAD> 와 <HEAD> 태그 사이에 붙여 넣으세요 --->

<SCRIPT LANGUAGE="javascript">

var num = 0;

// 메뉴에 사용할 이미지들을 설정 합니다

Image1on = new Image();
Image1on.src = "menu_1_on.gif"; // 마우스를 올렸을때의 이미지
Image1off = new Image();
Image1off.src = "menu_1.gif"; // 평상시의 이미지

Image2on = new Image();
Image2on.src = "menu_2_on.gif";
Image2off = new Image();
Image2off.src = "menu_2.gif";

Image3on = new Image();
Image3on.src = "menu_3_on.gif";
Image3off = new Image();
Image3off.src = "menu_3.gif";

Image4on = new Image();
Image4on.src = "menu_4_on.gif";
Image4off = new Image();
Image4off.src = "menu_4.gif";

Image5on = new Image();
Image5on.src = "menu_5_on.gif";
Image5off = new Image();
Image5off.src = "menu_5.gif";

// 이런식으로 메뉴에 사용할 이미지들을 추가해서 사용합니다

function img_act(imgName) {
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;
}
function img_inact(imgName) {
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
function inact(imgName) {
img_inact(imgName);
change(0);
}
function change(selected_num) {
if(selected_num != 0) {
num = selected_num;
}
for(i = 1; i <= 5; i++) {
imgName = "Image" + i;

if(num !=i ) {
img_inact(imgName);
} else {
img_act(imgName);
}
}
}

</SCRIPT>

<!------------------------- 여기까지 ------------------------------------>

</HEAD>

<!---- [2단계] 아래 코드를 <BODY> 태그 안에 붙여 넣으세요 --->

<BODY onLoad="change(1)">

<!---- [2단계] 아래의 방법으로 <BODY> 와 <BODY> 태그 사이에 붙여 넣으세요 --->

<A HREF="#" onfocus="this.blur()" onMouseout="inact('Image1')" onMouseover="img_act('Image1')" onClick="change(1)">
<IMG NAME="Image1" BORDER="0" SRC="menu_1.gif"></A><BR>
<A HREF="#" onfocus="this.blur()" onMouseout="inact('Image2')" onMouseover="img_act('Image2')" onClick="change(2)">
<IMG NAME="Image2" BORDER="0" src="menu_2.gif"></A><BR>
<A HREF="#" onfocus="this.blur()" onMouseout="inact('Image3')" onMouseover="img_act('Image3')" onClick="change(3)">
<IMG NAME="Image3" BORDER="0" src="menu_3.gif"></A><BR>
<A HREF="#" onfocus="this.blur()" onMouseout="inact('Image4')" onMouseover="img_act('Image4')" onClick="change(4)">
<IMG NAME="Image4" BORDER="0" src="menu_4.gif"></A><BR>
<A HREF="#" onfocus="this.blur()" onMouseout="inact('Image5')" onMouseover="img_act('Image5')" onClick="change(5)">
<IMG NAME="Image5" BORDER="0" src="menu_5.gif"></A>

<p>마우스를 올리거나 클릭 해 보세요

<!------------------------- 여기까지 ------------------------------------>

</BODY>
</HTML><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
11690
PHP 한국 IP대역 체크
11689
웹서버 특정 폴더에서 PHP 실행 금지하기[펌]
11688
MySQL 1원짜리 팁이에요. auto_increment에 대한 것이에요
11687
JavaScript 중첩없이 랜덤수 뽑아내기
11686
웹서버 리눅스 쉘스크립트 배열을 이용해 webliazer 에서 다중 로그 분석
11685
웹서버 htaccess를 이용한 짧은 주소 만들기
11684
웹서버 네임서버 zone 파일 인쿠르드
11682
JavaScript 자바스크립트에서 for문 사용시 속도차이 1
11679
PHP [펌] PHP 문자열 더할 때 속도 비교 2
11675
Mobile html5 지원되는 os별 버전보기 3
11674
기타 Polyfill 폴리필 용어해설 및 관련사이트 링크
11673
PHP 외부에서 아이프레임으로 불러오는 게시판 글 읽기 모드로 열기
11669
OS centos 7 버전 다운로드 / 강좌주소 3
11668
PHP $_POST 또는 $_GET 을 일반변수로 바꾸기
11667
PHP 많은 파라미터값을 전달받아야 할경우 체크 방법.
11658
기타 개발자를 위한 유용한 사이트 공유 8
11657
PHP 그누보드 환경설정시 에러나는 부분 해결
11635
기타 홈페이지를 어플로 만들어 봅시다.. 21
11633
JavaScript 그누보드5 에 Daum 우편번호 찾기 API 연동 하기 1
11632
JavaScript 그누보드4 에 Daum 우편번호 찾기 API 연동 하기.
20292
기타 호환성모드 오류(?)처리 (X-UA-Compatible) 5
11631
기타 이벤트 핸들러관련 자바 문법들 정리 (안드로이드)
11630
기타 아마존 서버 이용시 지역별 ping 조사
11628
MySQL MYSQL 기본 명령어들 모음 1
11625
기타 소스코드를 자동으로 정렬해주는... 2
이전 다음
전체 목록