I've been thinking for some time how best to approach the subject of image theft by somehow stopping people from taking (stealing) images and text from web sites without any regard to copyright laws. And I know some of you dislike copyright messages that pop us when you right-click on an image, and I know there is no easy solution, and I also know that there is no sure fire way of stopping it either, however, I think I may have a solution that some of you may like to use. Basically it's a menu that, when you right click anywhere on the page, pops up in place of the default context menu.
If people want to get at your images they will. You can't stop them, but this menu helps. And the menu itself is just great too. Imagine all the things you can do with it.
I actually found it on the Dynamic Drive web site (great site btw). Visit this link:
http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm and right click anywhere on the page to see what it can do.
The good thing about this menu system is that it's relatively small, highly customizable, and easy to setup. You can have any link you like and as many as you want. And the best part about it is it's totally free to use (just so long as you leave all that copyright stuff intact).
Unfortunately I donБ─≥t know how well it works with browsers other than IE and I don't know if the code will work with older versions of X-Cart (can't see why it shouldn't) so if you have any problems getting it to work under Firefox, as an example, it probably means that those browsers don't support it so you'll probably end up with the default context menu instead.
If you do have an older version of X-Cart and it doesn't work, you may want to ask some of the more experience X-Cart people for assistance as I am not all that experienced to help.
Ok, this is how I got it to work in X-Cart 4.0.13 and IE.
Copy the following CSS code to you skin1.css file (anywhere you like. I place it right at the bottom)
Code:
.skin0{
position:absolute;
width:165px;
border:1px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:14px;
z-index:100;
visibility:hidden;
}
.body_menuitems{
padding-left:10px;
padding-right:10px;
}
Save the file.
Now create a new file called xcart/skin1/body_menu.tpl and insert the following code:
Code:
{* $Id: body_menu.tpl, 2005/05/13 12:12:00 Exp $ *}
<head>
<!--Context menu Script- б╘ Dynamic Drive (
www.dynamicdrive.com) Last updated: 01/08/22
For full source code and Terms Of Use, visit http://www.dynamicdrive.com -->
<LINK rel="stylesheet" href="{$SkinDir}/{#CSSFile#}">
<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>
<div class="body_menuitems" url="{$xcart}/store/help.php"Help</div>
<div class="body_menuitems" url="{$xcart}/store/help.php?section=about">About Us</div>
<div class="body_menuitems" url="{$xcart}/store/help.php?section=contactus&mode=update">Contact Us</div>
<div class="body_menuitems" url="{$xcart}/store/help.php?section=FAQ">FAQ</div>
<div class="body_menuitems" url="{$xcart}/store/help.php?section=business">Privacy Statement</div>
<div class="body_menuitems" url="{$xcart}/store/help.php?section=conditions">Terms & Conditions</div>
</div>
</head>
<body>
<script language=JavaScript1.2 src="{$SkinDir}/body_menu.js"></script>
</body>
At this point I need to explain that some of the links above may not exist in your store so you will need to edit them to suite your needs. You may need to remove '/store' and replace it with '/xcart', '/shop' or remove it altogether if X-Cart is in the root directory. The various Help links I used may also not exist so this is where you're on you own. A very simple way of finding out existing links is to place your mouse over one of the links on your page and see the URL displayed on the bottom left corner of your screen.
Save the file.
Now create a new file called xcart/skin1/body_menu.js and insert the following code:
Code:
//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6)
var menuobj=document.getElementById("ie5menu")
function showmenuie5(e){
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX
//same concept with the vertical position
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY
menuobj.style.visibility="visible"
return false
}
function hidemenuie5(e){
menuobj.style.visibility="hidden"
}
function highlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor="highlight"
firingobj.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}
function lowlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor=""
firingobj.style.color="black"
window.status=''
}
}
function jumptoie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode
if (firingobj.getAttribute("target"))
window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
else
window.location=firingobj.getAttribute("url")
}
}
if (ie5||ns6){
menuobj.style.display=''
document.oncontextmenu=showmenuie5
document.onclick=hidemenuie5
}
Save the file.
Finally, you now need to add the following line (somewhere near the top) to the xtcart/skin1/customer/home.tpl
Code:
{ include file="body_menu.tpl" }
Ok, that's it! You're done. Hope you like it.