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>Mouseover album, thanks to Vic</title>
<meta name="robots" content="noindex,nofollow,noarchive">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<style type="text/css">
/*<![CDATA[*/
.gallery {
width:300px;border:solid red 1px;
}
.gallery IMG{
width:150px;float:left;
}
#mseDIV{
position:absolute;overflow:hidden;left:400px;top:300px;width:431px;height:570px;border:groove green 8px;
}
body {
background-color: #b5d0ec; /*vry lgt blue*/
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #115147; /*dark greenish-blue*/
font-size: 100%;
background-image: url(pattern51.jpg);
}
h1 {
font-family: 'Comic Sans MS', 'Arial Narrow', sans-serif;
color: #0d937b; /*greenish*/
font-size: 200%;
text-align: center;
/*background-color: transparent;*/
}
/* Here are my favourite link styles and colors, will keep them this way for lesson 5 */
a:link {
color: #0033ff;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #5f08b6;
}
a:hover {
text-decoration: underline;
color: #00cc00;
}
a:active {
text-decoration: none;
color: #cc3399;
background-color: #ed962e;
}
/*]]>*/
</style>
</head>
<body>
<h1>Another Gallery.</h1>
<div id="mseDIV" style="" >
</div>
<div id="gal1" class="gallery" >
<img src="http://www.jcdouglass.net/gallery/IMG_6464.jpg" alt="img" title="Galley and Lilly"/>
<img src="http://www.jcdouglass.net/gallery/IMG_6467.jpg" alt="img" title="Lilly" />
<img src="http://www.jcdouglass.net/gallery/IMG_6469.jpg" alt="img" title="Black Beach" />
<img src="http://www.jcdouglass.net/gallery/IMG_6473.jpg" alt="img" title="Low Tide" />
<img src="http://www.jcdouglass.net/gallery/IMG_6476.jpg" alt="img" title="Susie giving treats"/>
<img src="http://www.jcdouglass.net/gallery/IMG_6478.jpg" alt="img" title="Cousins" />
<img src="http://www.jcdouglass.net/gallery/IMG_6485.jpg" alt="img" title="Let go o my tail" />
<img src="http://www.jcdouglass.net/gallery/IMG_6487.jpg" alt="img" title="Sippewisset Marsh" />
<img src="http://www.jcdouglass.net/gallery/IMG_6490.jpg" alt="img" title="Chilly day"/>
<img src="http://www.jcdouglass.net/gallery/IMG_6493.jpg" alt="img" title="Wet Dogs" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
var zxcMouseFade={
init:function(o){
var id=o.MouseOverID,ms=o.AnimateDuration,g=document.getElementById(o.GalleryID),d=document.getElementById(id),imgs=g.getElementsByTagName('IMG'),img=document.createElement('IMG'),ary=[],o,z0=0;
img.style.position='absolute';
img.style.visibility='hidden';
img.style.width=d.offsetWidth+'px';
img.style.height=d.offsetHeight+'px';
for (;z0<imgs.length;z0++){
img=img.cloneNode(false);
img.src=imgs[z0].src;
d.appendChild(img);
ary[z0]=[img,0];
this.addevt(imgs[z0],'mouseover','mse',id,z0,true);
this.addevt(imgs[z0],'mouseout','mse',id,z0,false);
}
img=img.cloneNode(false);
img.style.position='absolute';
img.style.visibility='hidden';
img.style.width=d.offsetWidth+'px';
img.style.height=d.offsetHeight+'px';
img.style.zIndex='101';
d.appendChild(img);
o=zxcMouseFade['zxc'+id]={
ary:ary,
ms:typeof(ms)=='number'?ms:1000,
lst:ary[0]
}
},
mse:function(id,nu,ud){
var o=zxcMouseFade['zxc'+id],t;
if (o&&o.ary[nu]){
o.lst[0].style.zIndex='0';
clearTimeout(o.lst[2]);
this.animate(o,o.lst,o.lst[1],0,new Date(),o.ms*Math.abs((0-o.ary[nu][1])/100)+10);
o.ary[nu][0].style.visibility='visible';
clearTimeout(o.ary[nu][2]);
t=ud?100:0;
o.ary[nu][0].style.zIndex='2';
this.animate(o,o.ary[nu],o.ary[nu][1],t,new Date(),o.ms*Math.abs((t-o.ary[nu][1])/100)+10);
o.lst=o.ary[nu];
}
},
animate:function(o,ary,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
ary[1]=now;
oop.opc(ary[0],now);
}
if (ms<mS){
ary[2]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
}
else {
ary[1]=t;
oop.opc(ary[0],t);
if (t==0){
ary[0].style.visibility='hidden';
}
}
},
opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},
addevt:function(o,t,f,p,p1,p2){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
}
}
}
zxcMouseFade.init({
MouseOverID:'mseDIV',
GalleryID:'gal1',
AnimateDuration:1000 //(optional) the animation speed in milli seconds. (number, default = no animation)
});
zxcMouseFade.mse('mseDIV',0,true)
/*]]>*/
</script>
</body>
</html>
can somebody troubleshoot my new gallery?
Reply With Quote
Bookmarks