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[*/
.popup {
position:absolute;z-Index:101;left:105px;top:0px;width:200px;height:150px;border:solid red 1px;
}
.popup IMG{
width:200px;height:150px;border-Width:0px;
}
.popup2 {
position:absolute;z-Index:101;left:-205px;top:-40px;width:200px;height:150px;border:solid red 1px;
}
.popup2 IMG{
width:200px;height:150px;border-Width:0px;
}
/*]]>*/
</style>
</head>
<body>
<center>
<br />
<br />
<a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt5,jpg"
onclick="return zxcSPopUp('tst',1000,'popup',['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg']);"
>
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75" />
</a>
<br />
<br />
<a onclick="return zxcSPopUp('tst2',2000);" >
<img id="tst2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75" />
</a>
</center>
<script type="text/javascript">
/*<![CDATA[*/
// Simple Pop Up Slide Show. (14-January-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
function zxcSPopUp(id,ms,cls,ary){
var o=zxcSPopUp['zxc'+id],obj=document.getElementById(id),p,pop;
if (!o&&obj&&typeof(cls)=='string'&&typeof(ary)=='object'&&ary.constructor==Array){
var pop=document.createElement('DIV'),a=document.createElement('A'),img=document.createElement('IMG'),z0=0;
pop.className=cls;
pop.style.visibility='hidden';
a.href=obj.parentNode.href;
pop.appendChild(a);
for (;z0<ary.length;z0++){
img=img.cloneNode(false);
img.src=ary[z0];
img.style.position='absolute';
img.style.zIndex='0';
img.style.left='0px';
img.style.top='0px';
ary[z0]=img;
a.appendChild(img);
}
pop.appendChild(a);
document.body.appendChild(pop);
o=zxcSPopUp['zxc'+id]={
pop:pop,
ary:ary,
lft:pop.offsetLeft,
top:pop.offsetTop,
ud:false,
cnt:0
}
pop.onmousemove=function(){ clearTimeout(o.to); }
pop.onmouseout=function(){ rotate(o,100); }
pop.onmouseup=function(){ zxcSPopUp(); }
}
if (zxcSPopUp.pop&&zxcSPopUp.pop!=o){
pop=zxcSPopUp.pop;
pop.pop.style.visibility='hidden';
pop.ary[pop.cnt].style.zIndex='0';
pop.ud=false;
clearTimeout(pop.to);
}
if (o&&typeof(ms)=='number'&&ms>0){
p=this.pos(obj);
o.pop.style.left=p[0]+o.lft+'px';
o.pop.style.top=p[1]+o.top+'px';
o.ary[o.cnt].style.zIndex='0';
o.cnt=0;
o.pop.style.visibility=o.ud?'hidden':'visible';
o.ud=!o.ud;
clearTimeout(o.to);
o.ms=ms;
if (o.ud){
rotate(o);
}
zxcSPopUp.pop=o;
}
return false
}
function rotate(o,ms){
o.ary[o.cnt].style.zIndex='2';
o.to=setTimeout(function(){ o.ary[o.cnt].style.zIndex='0'; o.cnt=++o.cnt%o.ary.length; rotate(o); },ms||o.ms);
}
function pos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
zxcSPopUp('tst2',0,'popup2',['http://www.vicsjavascripts.org.uk/StdImages/1.gif','http://www.vicsjavascripts.org.uk/StdImages/2.gif','http://www.vicsjavascripts.org.uk/StdImages/3.gif']);
/*]]>*/
</script>
</body>
</html>
New Comer (less than 5 posts)
Code for 3-4 images appearing on ONE mouse rollover/hover?
Posting Permissions
Reply With Quote
Bookmarks