<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.mask {
position:absolute;z-Index:101;width:200px;height:150px;background-Color:#FFCC66;cursor:pointer;
/* Moz */
opacity: .5;
/* IE5-7 */
filter: alpha(opacity=50);
/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
/*]]>*/
</style></head>
<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" class="MaskClass:mask link:http://www.vicsjavascripts.org.uk/"/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" class="MaskClass:mask link:http://www.webdeveloper.com/"/>
<script type="text/javascript">
/*<![CDATA[*/
function Mask(cls){
var objs=document.getElementsByTagName('*'),cls,i,o,d,z0=0,z0a;
for (var z0=0;z0<objs.length;z0++){
cls=objs[z0].className;
if (cls&&(' '+cls+' ').match(' MaskClass:')){
o={obj:objs[z0]};
cls=cls.split(' ');
for (z0a=0;z0a<cls.length;z0a++){
i=cls[z0a].indexOf(':');
if (i>0){
o[cls[z0a].slice(0,i).toLowerCase()]=cls[z0a].slice(i+1);
}
}
if (o.maskclass){
o.msk=document.createElement('DIV');
o.msk.className=o.maskclass;
o.msk.style.left=o.msk.style.top='-3000px';
document.body.appendChild(o.msk);
this.addevt(o.obj,'mouseover','msk',o);
this.addevt(o.msk,'mouseout','msk',o);
o.link?this.addevt(o.msk,'click','link',o):null;
}
}
}
}
Mask.prototype={
msk:function(o,e){
var p=this.pos(o.obj)
o.msk.style.left=p[0]+'px';
o.msk.style.top=(e.type=='mouseover'?p[1]:-3000)+'px';
},
link:function(o){
window.top.location=o.link;
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}
}
}
new Mask()
/*]]>*/
</script></body>
</html>
