일반적인 웹 페이지에서 IE 브라우저의 기본 오른쪽 클릭 메뉴는 변함없는 고정 모드로, 대부분의 네티즌들은 웹 페이지를 탐색할 때 이를 잘 활용하지 않습니다. 전문 웹 디자이너라면 오른쪽 클릭 메뉴를 개인화된 콘텐츠로 디자인할 수 있다면 정말 멋지고 편리할 것입니다.
사용자가 귀하의 웹사이트를 마우스 오른쪽 버튼으로 클릭하면 신중하게 구성된 "링크"와 "메시지 보내기"가 표시되며 여기에는 다채로운 대화형 플래시 애니메이션도 포함되어 있다고 상상해 보십시오! 그림 1과 같이 침을 흘리지 말고 갈증을 해소하고 만드는 방법을 살펴보세요 :).
오른쪽 클릭 메뉴를 변환하는 두 가지 방법이 있습니다(사실 본질은 동일하며 둘 다 JavaScript입니다).
첫 번째 방법은 이전의 방법으로, 다음 소스 코드를 웹 페이지의 HTML 파일에 복사하면 됩니다.
<스타일>
< !--
.skin0 {
위치:절대;
텍스트 정렬:왼쪽;
너비:200px;
테두리:2px 단색 검정색;
배경색:메뉴;
글꼴 계열:Verdana;
줄 높이:20px;
커서:기본값;
가시성:숨김;
}
.skin1 {
커서:기본값;
글꼴:메뉴텍스트;
위치:절대;
텍스트 정렬:왼쪽;
글꼴 모음: Arial, Helvetica, sans-serif;
글꼴 크기: 10pt;
너비:120px;
배경색:메뉴;
테두리:단색 단추면 1개;
가시성:숨김;
테두리:2 시작 버튼강조 표시;
}
.menuitems {
왼쪽 패딩:15px;
오른쪽 패딩:10px;
}
-->
</style>
< SCRIPT LANGUAGE="JavaScript1.2">
< !-- 웹 사이트: http://www.painting- effects.co.uk -->
< !-- 이 스크립트와 기타 스크립트는 -->에서 온라인으로 무료로 사용할 수 있습니다.
< !-- 자바스크립트 소스!! http://javascript.internet.com -->
< !-- 시작
var menuskin = "skin1"; // 스킨0 또는 스킨1
var display_url = 0; // 상태 표시줄에 URL을 표시하시겠습니까?
함수 showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var Bottomedge = document.body.clientHeight-event.clientY;
if (오른쪽 가장자리 < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX -
ie5menu.offsetWidth;
또 다른
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if(하단 가장자리 < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY -
ie5menu.offset높이;
또 다른
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "표시";
거짓을 반환;
}
함수 hidemenuie5() {
ie5menu.style.visibility = "숨김";
}
함수 하이라이트5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.BackgroundColor = "강조 표시";
event.srcElement.style.color = "흰색";
if(display_url)
window.status = event.srcElement.url;
}
}
함수 lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.BackgroundColor = "";
event.srcElement.style.color = "검은색";
window.status = "";
}
}
함수 jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
또 다른
window.location = event.srcElement.url;
}
}
// 끝 -->
</script>
< div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();">
< div class="menuitems" url="javascript:history.back();">뒤로</div>
< div class="menuitems" url=" http://javacool.3322.net ">홈페이지로 돌아가기</div>
<시간>
< div class="menuitems" url=" http://www.163.com ">NetEase</div>
< div class="menuitems" url=" http://www.sohu.com ">소후</div>
<시간>
< div class="menuitems" url=" http://www.sina.com.cn ">시나</div>
< div class="menuitems" url=" http://www.yahoo.com.cn ">야후</div>
< /div>
<스크립트 언어="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = 메뉴스킨;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</script>
효과는 다음과 같습니다.
두 번째 방법은 Dreamweaver용 플러그인인 Right_Click_Menu_Buil-der를 사용하는 것입니다. 이 플러그인은 http://www.macromedia.com 에서 다운로드할 수 있습니다. 설치 후 Dreamweaver의 "명령" 메뉴에서 "오른쪽 클릭 메뉴 빌더" 명령을 찾을 수 있습니다.
이 명령을 클릭하면 그림 3과 같은 설정 상자가 나타납니다. 주로 "메뉴"와 "스타일"의 두 부분으로 구성됩니다.
메뉴는 기능을 설정하기 위한 것입니다. 여기에서는 최대 10개의 연결을 설정할 수 있습니다. 이 선택 상자의 "메뉴 텍스트"는 마우스 오른쪽 버튼을 클릭할 때 표시되는 텍스트입니다(중국어로 변경). "URL"에 해당 링크 경로를 쓰면 "대상"이 새 창인지 현재 창인지 결정됩니다. 표시에는 창이 사용됩니다. Dreamweaver의 "Target" 설정과 동일하게 "Blank"를 입력하면 링크의 내용이 새 창에 표시됩니다.
스타일은 메뉴 모양을 설정하는 역할을 합니다. 두 가지 옵션이 있습니다.
img src=" "Windows 유형 메뉴(기본값)"는 기본 항목입니다. 가장 단순한 모양, 친숙한 Windows 스타일입니다.
"사용자 정의 메뉴" 사용자 정의 메뉴, 이 항목을 선택하는 경우 다음 내용도 설정해야 합니다.
"메뉴 너비", 메뉴 너비.
"글꼴", 글꼴;
"글꼴 색상", 글꼴 색상;
"글꼴 측면", 글꼴 크기;
"배경 색상", "배경 이미지", 배경 색상 및 배경 이미지;
마우스 스타일을 선택하는 데 사용되는 "커서"도 있습니다.
위와 같이 설정한 후 "추가"를 클릭하여 효과를 생성할 수 있습니다. 미리보기,
그럼 플래시는 어떻게 추가하나요? 방법은 다음과 같습니다. 웹 페이지에 "테이블"을 추가합니다. "W" 너비를 "100%"로 설정하는 것이 좋습니다. 이렇게 하면 아래에 추가하는 다양한 요소의 위치를 쉽게 지정할 수 있습니다. 좋아, Flash SWF 파일을 "테이블"에 삽입하고 위치를 "중앙"으로 설정합니다. (주로 위치 지정을 용이하게 하기 위해 물론 특정 문제를 자세히 분석할 수 있으며 더 많은 시도를 통해 통찰력을 얻을 수 있습니다.)
팁: 플래시 애니메이션은 대화형 링크로 만들어질 수도 있습니다. 이유는 무엇입니까? 이렇게 하면 원하는 만큼 하이퍼링크를 추가할 수 있습니다. 플러그인 자체의 항목 제한은 최대 10개인데, 플래시를 이용하면 해결 가능합니다 ^_^