I need pop up box to be displayed on hover or click like the image attached.
Any suggestion of DD scripts?
Attachment 4946
One possibility is customizing Anylink CSS menu at http://www.dynamicdrive.com/dynamici...anylinkcss.htm
Printable View
I need pop up box to be displayed on hover or click like the image attached.
Any suggestion of DD scripts?
Attachment 4946
One possibility is customizing Anylink CSS menu at http://www.dynamicdrive.com/dynamici...anylinkcss.htm
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[*/
.pop {
position:absolute;z-Index:101;top:300px;left:0px;width:100px;height:100px;background-Color:#FFCC66;border:solid red 1px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Clip PopUp. (24-Febuary-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
function zxcClipPopUp(cls){
var reg=new RegExp('\\W'+cls+'\\W'),els=document.body.getElementsByTagName('*'),ul,o,s,i,z0=0,z0a;
for (;z0<els.length;z0++){
if(reg.test(' '+els[z0].className+' ')){
o={};
s=els[z0].className.split(' ');
for (z0a=0;z0a<s.length;z0a++){
i=s[z0a].indexOf(':');
if (i>2){
o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
}
}
new zxcClipPU(o,els[z0]);
}
}
}
function zxcClipPU(o,obj){
var pop=document.getElementById(o.popupid);
if (pop){
var m=o.mode,m=isFinite(m*1)&&m>0&&m<7?m*1:0,t=o.eventtype,t=t=='click'?'click':t=='toggle'?'toggle':'mouseover',ms=isFinite(o.speed*1)?o.speed*1:1000,w=pop.offsetWidth,h=pop.offsetHeight,ow=obj.offsetWidth,oh=obj.offsetHeight,osx=isFinite(o.offsetx*1)?o.offsetx*1:0,osy=isFinite(o.offsety*1)?o.offsety*1:oh;
document.body.appendChild(pop);
pop.style.display='block';
pop.style.position='absolute';
pop.style.visibility='hidden';
o=this;
o.obj=obj;
o.pop=pop;
o.m=m;
o.ary=[
['clip',[0,w,h,0],[0,w,0,0]], // 0 = down,
['clip',[0,w,h,0],[h,w,h,0]], // 1 = up,
['clip',[0,w,h,0],[0,0,h,0]], // 2 = right,
['clip',[0,w,h,0],[0,w,h,w]], // 3 = left,
['clip',[0,w,h,0],[Math.ceil(h/2),Math.floor(w/2),Math.floor(h/2),Math.ceil(w/2)]], // 4 = center,
['clip',[0,w,h,0],[0,Math.floor(w/2),h,Math.ceil(w/2)]], // 5 = horizontal,
['clip',[0,w,h,0],[Math.ceil(h/2),w,Math.floor(h/2),0]] // 6 = vertical,
];
o.g=[null,[200],[0],[0]];
o.osx=osx;
o.osy=osy;
o.ms=ms;
o.close=t=='mouseover'?1000:200;
o.ud=false;
if (t=='toggle'){
o.addevt(o.obj,'click','toggle',false);
}
else {
o.addevt(o.obj,t,'Pop',true);
o.addevt(pop,t,'Pop',true);
}
if (t=='mouseover'){
o.addevt(o.obj,'mouseout','Pop',false);
o.addevt(pop,'mouseout','Pop',false);
}
o.addevt(document,'click','click');
}
}
zxcClipPU.prototype={
Pop:function(ud,e){
var o=this
var o=this,p=o.pos(o.obj),f=o.g[3],t=o.g[ud?1:2],ms=o.ms*Math.abs((t[0]-f[0])/o.g[1])||20;
clearTimeout(o.to);
o.to=setTimeout(function(){ o.animate(o.pop,o.ary[o.m],o.ary[o.m][3]||o.ary[o.m][2],o.ary[o.m][ud?1:2],new Date(),ms);
o.animate(false,o.g,f,t,new Date(),ms);
o.pop.style.visibility='visible';
o.ud=ud;
},ud?200:o.close);
o.pop.style.left=p[0]+o.osx+'px';
o.pop.style.top=p[1]+o.osy+'px';
},
toggle:function(){
this.Pop(!this.ud);
},
animate:function(obj,ary,f,t,srt,mS){
clearTimeout(ary[4]);
var o=this,ms=new Date().getTime()-srt,nu,n=[],z0=0;
for (;z0<4;z0++){
nu=(t[z0]-f[z0])/mS*ms+f[z0];
if (isFinite(nu)){
n[z0]=Math.round(nu);
}
}
ary[3]=n;
obj?obj.style.clip='rect('+n[0]+'px,'+n[1]+'px,'+n[2]+'px,'+n[3]+'px)':null;
if (ms<mS){
ary[4]=setTimeout(function(){ o.animate(obj,ary,f,t,srt,mS); },10);
}
else {
ary[3]=t;
obj?obj.style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)':null;
!ary[0]&&t==0?o.pop.style.visibility='hidden':null;
}
},
click:function(p,e){
if (e){
var o=this,obj=e.target?e.target:e.srcElement;
if (obj){
while (obj.parentNode){
if (obj==o.pop||obj==o.obj){
return;
}
obj=obj.parentNode;
}
}
o.Pop(false);
}
},
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); });
}
}
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
// parameter 0 = the common class name of the elements to attach a PopUP.
zxcClipPopUp('master');
// <img id="img1" class="popup PopUpID:pop1 Mode:4 EventType:mouseover Speed:500 " src="Egypt5.jpg" alt="img" width="100" height="75" />
// Class Name Options
// PopUpID = the unique ID name of the Pop Up element.
// Mode = the mode of execution, 0 = down, 1 = up, 2 = right, 3 = left, 4 = center, 5 = horizontal, 6 = vertical.
// EventType = the evvent type to open/close the PopUp.
// Speed = the animattion duration in milli seconds.
// OffsetX = the horizontal offset from the PopUp master element.
// OffsetY = the vertical offset from the PopUp master element.
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<img id="img1" class="master PopUpID:pop1 Mode:4 EventType:mouseover Speed:500 " src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75" />
<img id="img2" class="master PopUpID:pop2 Mode:0 EventType:mouseover Speed:500 offsetX:100 offsety:0" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75" />
<br />
<img id="img3" class="master PopUpID:pop3 Mode:2 EventType:click Speed:500 " src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75" />
<img id="img4" class="master PopUpID:pop4 Mode:2 EventType:toggle Speed:500 " src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75" />
<div id="pop1" class="pop" >PopUp 1</div>
<div id="pop2" class="pop" style="height:75px;background-Color:#FFFFCC;">PopUp 2</div>
<div id="pop3" class="pop" >PopUp 3</div>
<div id="pop4" class="pop" >PopUp 4</div>
</body>
</html>