Code:
<!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[*/
.highlighton {
border:solid red 4px;
}
.tooltip {
position:absolute;z-Index:101;visibility:hidden;left:0px;top:0px;width:100px;background-Color:#FFCC66;text-Align:center;
}
#info {
position:absolute;left:650px;top:20px;width:100px;height:200px;background-Color:#FFCC66;border:solid red 1px;
}
/*]]>*/
</style></head>
<body>
<img id="img1" class="highlight" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img id="img2" class="highlight" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img id="img3" class="highlight" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<div id="info" >
<div id="img1-tooltip" class="tooltip" >Tool Tip 1</div>
<div id="img2-tooltip" class="tooltip" >Tool Tip 2</div>
<div id="img3-tooltip" class="tooltip" >Tool Tip 3</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcHighLightImage(o){
var oop=this,cls=o.ClassName,acls=o.ActiveClass,i=o.SelectIndex,imgs=document.getElementsByTagName('IMG'),c,ary=[],tt,z0=0;
o={
ary:[],
cnt:typeof(i)=='number'?i:-1
}
for (var z0=0;z0<imgs.length;z0++){
c=imgs[z0].className;
if ((' '+c+' ').match(' '+cls+' ')){
tt=document.getElementById(imgs[z0].id+'-tooltip');;
o.ary.push([imgs[z0],c,c+' '+acls,tt,tt?tt.offsetLeft:null,tt?tt.offsetTop:null,0]);
this.addevt(imgs[z0],'mouseover','select',o,o.ary.length-1);
}
}
o.lgth=o.ary.length-1,
this.select(o,o.cnt);
// this.addevt(document,'keypress','key',o);
this.addevt(document,'keydown','key',o);
}
zxcHighLightImage.prototype={
key:function(o,p1,e){
var cc=e.which?e.which:event.keyCode,c=o.cnt,p;
if (cc==37||cc==39){
c+=(cc==39?1:-1);
c=c<0?o.lgth:c>o.lgth?0:c;
this.select(o,c);
}
o.cnt=c;
return false;
},
select:function(o,c){
if (o.ary[c]){
o.ary[o.cnt]?o.ary[o.cnt][0].className=o.ary[o.cnt][1]:null;
o.ary[o.cnt]&&o.ary[o.cnt][3]?o.ary[o.cnt][3].style.visibility='hidden':null;
o.ary[c]?o.ary[c][0].className=o.ary[c][2]:null;
if (o.ary[c][3]){
o.ary[c][3].style.visibility='visible';
}
o.cnt=c;
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
}
}
}
new zxcHighLightImage({
ClassName:'highlight',
ActiveClass:'highlighton',
SelectIndex:1
})
/*]]>*/
</script>
</body>
</html>
Bookmarks