|
Wiele osób, mających strony www, nie chciało
by żeby ktoś ingerował im w kod źródłowy strony, a
zabezpieczenia typu zablokowanie prawego przycisku są nie zawsze
skuteczne, i nie za ciekawie to wygląda kiedy coś zaczyna
brzdękać :). W takim też wypadku proponuje, zrobić menu pod
prawym przyciskiem, takie jakie jest u mnie na stronie, które
urozmaici wygląd strony. Na początek tworzymy 3 pliki
odpowiedzialne za wygląd, menu_b.js, menu_s.js i style.css. W
każdym z tych plików musi się znajdować poszczególny kod:
menu_b.js
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
menu_s.js
var menuskin = "skin1"; // wybierz skin,
można go edytowac powyżej
var display_url = 0; // czy pokazywac URL na dole?
function showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX -
ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY -
ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
function highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white"; // kolor czcionki po
zamianie
if (display_url)
window.status = event.srcElement.url;
}
}
function lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black"; // kolor czcionki po
zamianie, zostanie
window.status = "";
}
}
function jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url,
event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url;
}
}
style.css
<style TYPE="text/css">
<!--
.skin1 { cursor: default; font-style: normal; font-variant:
normal; font-weight: normal;
position: absolute; text-align: left; font-family: Verdana;
font-size: 8pt; width: 150px; background-color: #C0C0C0;
visibility: hidden; border: 1 solid #000000 }
.menuitems {
padding-left: 10px;
padding-right: 10px;
font-weight: #005D84;
cursor: hand;
}
.skin0 {
position: absolute;
text-align: left;
width: 200px;
border: 2px solid black;
background-color: #C6C6C6;
font-family: Verdana;
line-height: 20px;
visibility: hidden;
}
-->
</style>
Po wkopiowaniu wszystkich tych kodów do
danych plików, wklejamy poniższy kod na stronę www:
<head></head>
<SCRIPT LANGUAGE="JavaScript1.2" src="menu_s.js"></script>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
<body></body>
<div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class="menuitems" url="http://www.siteql.prv.pl/">Siteql</div>
<hr color="#000000" size="1" style="border: 1 dotted #000000">
<div class="menuitems" url="ADRES">zobacz</div>
<div class="menuitems" url="ADRES">zobacz</div>
<div class="menuitems" url="ADRES">zobacz</div>
<div class="menuitems" url="ADRES">zobacz</div>
<div class="menuitems" url="ADRES">zobacz</div>
<hr color="#000000" size="1" style="border: 1 dotted #000000">
<div class="menuitems" url="mailto:twój@e-mail.pl">e-mail</div>
</div>
<script language="JavaScript1.2" src="menu_b.js"></script>
To już chyba wszystko pamiętaj, tylko że
pliki menu_b.js , menu_s.js i style.css muszą byś w tym samym
katalogu co strona na której ma działać to menu. Życzę
powodzenia.
Autor:
Rafał Stasiak
Autor Skryptu:
Kamil Dziedzic dla
webhelp.
Dodano: 17.05.2002 |
