单击鼠标右键，多边形图片旋转问题55555555555555·······

我已经用javascript实现了当用鼠标右键单击图片的时候，图片顺时针旋转90度了。程序(输出了4张图片)如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
var i=1;
　function playImg1()
　{
image1.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
　 <!--mytimeout=setTimeout("playImg()",1500);-->
　 }
</script><script language="javascript">
var i=1;
　function playImg2()
　{
image2.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
　 <!--mytimeout=setTimeout("playImg()",1500);-->
　 }
</script><script language="javascript">
var i=1;
　function playImg3()
　{
image3.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
　 <!--mytimeout=setTimeout("playImg()",1500);-->
　 }
</script><script language="javascript">
var i=1;
　function playImg4()
　{
image4.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
　 <!--mytimeout=setTimeout("playImg()",1500);-->
　 }
</script>
<body oncontextmenu="return false">
<style>
<!--.drag{position:relative;cursor:hand}
-->
</style>
<script language="JavaScript">
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop 
x=event.clientX
y=event.clientY
document.onmousemove=move
}}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</script>
<img src="picture/1.gif" name="image1" class="drag" height="150" width="150" oncontextmenu="playImg1()">
<img src="picture/2.gif" name="image2" class="drag" height="150" width="150" oncontextmenu="playImg2()">
<img src="picture/3.gif" name="image3" class="drag" height="150" width="150" oncontextmenu="playImg3()">
<img src="picture/4.gif" name="image4" class="drag" height="150" width="150" oncontextmenu="playImg4()">
</body>
</html>
我的4张图片是从运行的系统上面用qq裁剪下来的，裁剪的图片里面有多边形，而属于裁剪的图片的区域是矩形的区域。现在我只是想要已经用qq裁剪的图片里面的多边形，不要图片里面多边形之外的区域。
因为我想在网页中，当右键单击多边形里面的区域的时候，多边形旋转，而单击多边形区域之外的图片的其他区域，图片不旋转。不知道各位高手有什么办法可以实现我要的效果，望给小弟指点指点，谢谢了！