오른쪽마우스,클릭하면 나타나는 메뉴
바탕화면 아무곳이나 오른쪽 마우스로 클릭하면 메뉴가 나타나여.
여기 예제는 iframe으로 넣었으니까 분홍바탕안에서 오른쪽 마우스로 클릭해 보세여.
<!--1. 아래 스크립트를 HEAD 부분에 복사해 넣으세요. -->
<style type="text/css">
<!--
font{ font-family:"굴림"; font-size: 9pt; line-height:17px; }
td{ font-family:"굴림"; font-size: 9pt; line-height:17px; }
a:visited {color:#FFFFFF; text-decoration: none }
a:link { color:#FFFFFF; text-decoration: none; }
a:active { color:#00ff00; text-decoration: none; }
a:hover { color:#FFA217; text-decoration: underline; }
-->
</style>
<style>
<!--
.BorderOn { width:90px; margin-left:10px; border:1px solid #FFA217 }
.BorderOff { width:90px; margin-left:0px; border:1px solid #00CCFF }
A.mBlue:link {color:#00CCFF; text-decoration:none;}
A.mBlue:visited {color:#00CCFF; text-decoration:none;}
A.mBlue:active {color:#00CCFF; text-decoration:none;}
A.mBlue:hover {color:#FF0000; text-decoration:underline;}
A.mGreen:link {color:#00FF80; text-decoration:none;}
A.mGreen:visited {color:#00FF80; text-decoration:none;}
A.mGreen:active {color:#00FF80; text-decoration:none;}
A.mGreen:hover {color:#FF0000; text-decoration:underline;}
A.mYellow:link {color:#FFFF00; text-decoration:none;}
A.mYellow:visited {color:#FFFF00; text-decoration:none;}
A.mYellow:active {color:#FFFF00; text-decoration:none;}
A.mYellow:hover {color:#FF0000; text-decoration:underline;}
//-->
</style>
<script language="JavaScript1.2">
<!--
<!--home page: : www.yeoyoo.com -->
offMessage = "Welcome to yeoyoo.com"
function boxOn(which,message){
if (document.all||document.getElementById){
which.className='BorderOn'
if (document.getElementById) {document.getElementById("Message").innerHTML = message}
else {Message.innerHTML = message}
}
}
function boxOff(which){
if (document.all||document.getElementById){
which.className='BorderOff'
if (document.getElementById) {document.getElementById("Message").innerHTML = offMessage}
else {Message.innerHTML = offMessage}
}
}
//-->
</script>
<!--<BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
<div ID="rightmenu" style="position: absolute; visibility:hidden; width:200">
<table cellpadding="3" cellspacing="0" bgcolor="#000000" class="BorderOff">
<tr>
<td><font color="#FEDCBA" size="2" face="Arial">메뉴판 목록</font></td>
</tr>
</table>
<img src="spacer.gif" width="5" height="5"><br>
<!-- 첫번째 메뉴 테이블-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'여어자1번 메뉴의 설명 입니다')" onMouseout="boxOff(this)">
<tr>
<td><font color="#00FF80" size="2" face="Arial"><a class="mBlue" href="http://www.yeoyoo.com" target="_blank">첫번째
메뉴</a></font></td>
</tr>
</table>
//spacer.gif는2*2 흰색으로 만들어 넣으세여.//
<img src="spacer.gif" width="2" height="2"><br>
<!-- 두번째 메뉴 테이블-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'여어자2번 메뉴의 설명 입니다')" onMouseout="boxOff(this)">
<tr>
<td><font color="#00FF80" size="2" face="Arial"><a class="mBlue" href="http://www.yeoyoo.com" target="_blank">두번째
메뉴</a></font></td>
</tr>
</table>
<img src="spacer.gif" width="5" height="5"><br>
<!-- 세번째 메뉴 테이블-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'여어자3번 메뉴의 설명 입니다')" onMouseout="boxOff(this)">
<tr>
<td><font color="#00FF80" size="2" face="Arial"><a class="mGreen" href="http://www.yeoyoo.com" target="_blank">세번째
메뉴</a></font></td>
</tr>
</table>
<img src="spacer.gif" width="2" height="2"><br>
<!-- 네번째 메뉴 테이블-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'여어자4번 메뉴의 설명 입니다')" onMouseout="boxOff(this)">
<tr>
<td><font color="#00FF80" size="2" face="Arial"><a class="mYellow" href="http://www.yeoyoo.com" target="_blank">네번째
메뉴</a></font></td>
</tr>
</table>
<img src="spacer.gif" width="2" height="2"><br>
<!-- 다섯번째 메뉴 테이블-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'여어자5번 메뉴의 설명 입니다')" onMouseout="boxOff(this)">
<tr>
<td><font color="#00FF80" size="2" face="Arial"><a class="mYellow" href="http://www.yeoyoo.com" target="_blank">5번째
메뉴</a></font></td>
</tr>
</table>
<img src="spacer.gif" width="5" height="5"><br>
<!-- 아래쪽 메세지 테이블-->
<table cellpadding="1" cellspacing="0" bgcolor="#444444" width="90">
<tr>
<td>
<table cellpadding="3" cellspacing="0" bgcolor="#000000" width="88" height="100">
<tr>
<td align="left" valign="top"><font id="Message" color="#FFFF66" size="2" face="Arial">Welcome
to yeoyoo.com</font></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script language="JavaScript1.2">
function showRightMenu(){
var testTop = document.body.scrollTop + event.clientY;
var testLeft = document.body.scrollLeft + event.clientX;
var tooltipAbsLft = (testLeft > document.body.scrollLeft + document.body.width - rightmenu.style.width) ? testLeft - rightmenu.style.width : testLeft;
var tooltipAbsTop = (testTop > document.body.scrollTop + document.height - rightmenu.style.height) ? testTop - rightmenu.style.height : testTop;
rightmenu.style.posLeft = tooltipAbsLft;
rightmenu.style.posTop = tooltipAbsTop;
rightmenu.style.visibility = "visible";
return (false);
}
function hideRightMenu(){
rightmenu.style.visibility = "hidden";
}
document.oncontextmenu = showRightMenu;
document.onclick = hideRightMenu;
</script>
'컴퓨터-유용한팁 > 스크립트' 카테고리의 다른 글
| 방문시 마다 다른 index 보여주기 (0) | 2015.09.07 |
|---|---|
| 부드럽게 펼쳐졌다 사라지는 메뉴 (0) | 2015.09.07 |
| 시간대별로 배경색상 바꾸기 (0) | 2015.09.07 |
| 접속시마다 배경음악 다르게 (0) | 2015.09.07 |
| 눈처럼 내려오는 텍스트 (0) | 2015.09.07 |