다이나믹한 메뉴 만들자

by 고정석 posted Mar 19, 2001
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

+ - Up Down Comment Print


제목없음










































<html><br><head><br><script language="JavaScript"
src="http://www.nblood.com/mosquito/java/overdiv.js"></script>
<br><script
language="JavaScript" src="http://www.nblood.com/mosquito/java/highlow.js"></script>
<br></head><br><body><br><table
align="center" border="0" cellpadding="0"
cellspacing="0" width="300"><br>    <tr><br>        <td
width="300" colspan="3"><br>            <p><img
src="http://www.nblood.com/mosquito/images/menu1.gif"
width="300" height="20" border="0"></p><br>        </td><br>    </tr><br>    <tr><br>        <td
width="100" height="54"><br>            <p><a
href="http://www.nblood.com" target="_blank"
onmouseover="overdiv(1);" onmouseout="outdiv(1)"
;><img src="http://www.nblood.com/mosquito/images/menu2.gif"
width="100" height="114" border="0"
style="filter:alpha(opacity=40)" onMouseover="high(this)"
onMouseout="low(this)"
></a></p><br>        </td><br>        <td
width="85" height="54"><br>            <p><a
href="http://cafe.daum.net/pcr76" target="_blank"

onmouseover="overdiv(2);" onmouseout="outdiv(2)"

;><img src="http://www.nblood.com/mosquito/images/menu3.gif"
width="100" height="114" border="0"
style="filter:alpha(opacity=40)" onMouseover="high(this)"
onMouseout="low(this)"
></a></p><br>        </td><br>        <td
width="115" height="54"><br>            <p><a
href="http://cafe.daum.net/realflash" target="_blank"
onmouseover="overdiv(3);" onmouseout="outdiv(3)"
;><img src="http://www.nblood.com/mosquito/images/menu4.gif"
width="100" height="114" border="0"
style="filter:alpha(opacity=40)" onMouseover="high(this)"
onMouseout="low(this)"
></a></p><br>        </td><br>    </tr><br>    <tr><br>        <td
width="300" height="24" colspan="3"><br>            
<div
id="tip1" style="width:300px; height:20px; position:absolute;
left:153px; top:155px; z-index:1; visibility:hidden;"><font
color=gray>Flash e-card 엔블러드로 가자^^*</font></div><br>            <div
id="tip2" style="width:300px; height:20px; position:absolute;
left:153px; top:155px; z-index:1; visibility:hidden;"><font
color=gray>모기네 까페에 널러와방~~ 잼날꼬얌~</font></div><br>            <div
id="tip3" style="width:300px; height:20px; position:absolute;
left:153px; top:155px; z-index:1; visibility:hidden;"><font
color=gray>Flash 배우구 시포?  그럼 일루와방^^</font></div>
<br>        </td><br>    </tr><br></table><br></body><br></html>



두가지 효과를 적용해서 멋진 메뉴를 만들어 봐떠염.<br>우선
메뉴에 마우스를 올리면 이미지가 밝아지져?  글궁 밑에 메뉴에
대한 설명두 레이어로 뜨구여... 머쩌머쩌...^^;<br><br>초록색으로
색칠한거쉬 메뉴에 마우스 올려놓으면 밑에 설명이 뜨는 소스예욤<br>다른
부분은 수정하지 마시고 그대로 쓰세요.  레이어<div> ~
</div> 안에 위지조정등의 내용만 수정하시면 되겠지요?<br>레이어 id 는
반듯이 tip1 이렇게 그대로 주시고요.<br>또한 메뉴가 많아질 경우에는
js파일까지 수정하셔야 해요.<br>전 메뉴가 3개라서 tip1 ~ tip3 까지
주었지만 더 늘어날 경우에는 js파일에서 수정하셔야 합니다. <br>필요하신
분은 개인적으로 질문하세요.<br><br>글구 주황색 은 메뉴에 흐릿하게
필터효과를 주고 마우스 올려놓으면 밝아져따가 마우스 띠면 다시 흐릿해
지는 효과를 주는 소스예욤.   필터값은 각자 조정해 보세요.<br><br>그럼...잘



 






Articles

1 2 3 4 5 6

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Designed by sketchbooks.co.kr / sketchbook5 board skin

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5