깔끔한 롤오버 이미지버튼 메뉴 스크립트 입니다
<!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>
<!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>
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 1330 | 18년 전 | 1489 | ||
| 1329 | 18년 전 | 1719 | ||
| 1328 | 18년 전 | 1008 | ||
| 1327 | 18년 전 | 1425 | ||
| 1326 | 18년 전 | 2263 | ||
| 1325 | 18년 전 | 1145 | ||
| 1324 | 18년 전 | 1306 | ||
| 1323 | 18년 전 | 1569 | ||
| 1322 | 18년 전 | 1182 | ||
| 1321 | 18년 전 | 976 | ||
| 1320 | 18년 전 | 1197 | ||
| 1319 | 18년 전 | 1523 | ||
| 1318 | 18년 전 | 1651 | ||
| 1317 | 18년 전 | 1602 | ||
| 1316 | 18년 전 | 1213 | ||
| 1315 |
|
18년 전 | 8603 | |
| 1314 | 18년 전 | 1912 | ||
| 1313 | 18년 전 | 1497 | ||
| 1312 | 18년 전 | 1491 | ||
| 1311 | 18년 전 | 1786 | ||
| 1310 | 18년 전 | 1838 | ||
| 1309 | 18년 전 | 1229 | ||
| 1308 | 18년 전 | 988 | ||
| 1307 | 18년 전 | 2760 | ||
| 1306 | 18년 전 | 3110 | ||
| 1305 | 18년 전 | 2175 | ||
| 1304 | 18년 전 | 1558 | ||
| 1303 | 18년 전 | 1426 | ||
| 1302 | 18년 전 | 893 | ||
| 1301 | 18년 전 | 1788 | ||
| 1300 | 18년 전 | 5141 | ||
| 1299 | 18년 전 | 2861 | ||
| 1298 |
mixdesign
|
18년 전 | 2111 | |
| 1297 | 18년 전 | 3081 | ||
| 1296 | 18년 전 | 2550 | ||
| 1295 | 18년 전 | 2243 | ||
| 1294 |
onweb
|
18년 전 | 4560 | |
| 1293 |
onweb
|
18년 전 | 3491 | |
| 1292 | 18년 전 | 3457 | ||
| 1291 | 18년 전 | 4044 | ||
| 1290 | 18년 전 | 1905 | ||
| 1289 | 18년 전 | 1764 | ||
| 1288 | 18년 전 | 1734 | ||
| 1287 | 18년 전 | 1433 | ||
| 1286 | 18년 전 | 1272 | ||
| 1285 | 18년 전 | 1160 | ||
| 1284 | 18년 전 | 1161 | ||
| 1283 | 18년 전 | 1518 | ||
| 1282 | 18년 전 | 920 | ||
| 1281 | 18년 전 | 1272 | ||
| 1280 | 18년 전 | 1134 | ||
| 1279 | 18년 전 | 1150 | ||
| 1278 | 18년 전 | 3027 | ||
| 1277 | 18년 전 | 949 | ||
| 1276 | 18년 전 | 1162 | ||
| 1275 | 18년 전 | 2099 | ||
| 1274 | 18년 전 | 2227 | ||
| 1273 | 18년 전 | 1322 | ||
| 1272 | 18년 전 | 1916 | ||
| 1271 | 18년 전 | 1169 | ||
| 1270 | 18년 전 | 2498 | ||
| 1269 | 18년 전 | 6600 | ||
| 1268 |
페이지팩트
|
18년 전 | 3823 | |
| 1267 |
페이지팩트
|
18년 전 | 2232 | |
| 1266 |
|
18년 전 | 6299 | |
| 1265 | 18년 전 | 2590 | ||
| 1264 | 18년 전 | 2623 | ||
| 1263 | 18년 전 | 2124 | ||
| 1262 | 18년 전 | 2118 | ||
| 1261 |
페이지팩트
|
18년 전 | 2127 | |
| 1260 | 18년 전 | 3889 | ||
| 1259 |
|
18년 전 | 3936 | |
| 1258 |
|
18년 전 | 5047 | |
| 1257 | 18년 전 | 4145 | ||
| 1256 | 18년 전 | 2582 | ||
| 1255 | 18년 전 | 1814 | ||
| 1254 | 18년 전 | 2783 | ||
| 1253 | 18년 전 | 2717 | ||
| 1252 | 18년 전 | 2242 | ||
| 1251 | 18년 전 | 5421 | ||
| 1250 |
jbsstyle
|
18년 전 | 4766 | |
| 1249 |
|
18년 전 | 3775 | |
| 1248 | 18년 전 | 3454 | ||
| 1247 | 18년 전 | 2141 | ||
| 1246 | 18년 전 | 2136 | ||
| 1245 | 18년 전 | 3642 | ||
| 1244 |
|
18년 전 | 2288 | |
| 1243 |
|
18년 전 | 2494 | |
| 1242 | 18년 전 | 1770 | ||
| 1241 | 18년 전 | 4465 | ||
| 1240 | 18년 전 | 2154 | ||
| 1239 | 18년 전 | 2305 | ||
| 1238 | 18년 전 | 4044 | ||
| 1237 |
hwatta
|
18년 전 | 3897 | |
| 1236 | 18년 전 | 2122 | ||
| 1235 | 18년 전 | 2772 | ||
| 1234 | 18년 전 | 5149 | ||
| 1233 | 18년 전 | 2416 | ||
| 1232 |
|
18년 전 | 2955 | |
| 1231 | 18년 전 | 8505 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기