Roll over image and text appears

**Jay Dog** · 01-07-2014, 03:21 PM

Vic, many many thanks for your help and I really hope you don't think I'm taking advantage of your help and good nature but there's just one small slight problem;

http://www.bigwood.nottingham.sch.uk...tour/tour.html

When you look at the white div area under the front of the school, the bit with 'welcome to' etc... when you roll onto a block the text comes up for that block which is exactly what I wanted it to do but when you roll off the image map the text disappears, is there a way of making the text go back to 'welcome to...' when you roll off the image map?

No rush on this and please don't think I'm expecting you to re-write the whole code but if you can tell me where it needs changing and how that'd be great. I've managed to get the red box text to go back to the school address but any help would greatly be appreciated.

Jay Dog

**vwphillips** · 01-08-2014, 10:15 AM

remove the line in red

Code:

zxcImageMapCaptions.init({
 ImageMapID:'map1',       // the unique ID Name of the image map.                                 (string)
 CaptionsID:'captions',   // the unique ID Name of the captions parent DIV.                       (string)
 FadeIn:'mouseover',      //(optional) mouseover', 'mouseout', 'mouseup', 'mousedown' or 'click'. (string, default = 'click')
 FadeOut:'mouseout',      //(optional) mouseover', 'mouseout', 'mouseup', 'mousedown' or 'click'. (string, default = 'click')
 Animate:1000,            //(optional) the fade duration in millisec.                             (number, default = 1000)
 OnMouseOver:function(i){
//  document.getElementById('welcome').style.visibility='hidden';
  var a=['Muga','Birch','Alder','Chestnut','Oak','Douglas','Enterprise','BigWoodSchool'];
  zxcRandomImage.FadeIn(a[i]);
 },
 OnMouseOut:function(i){
  zxcRandomImage.FadeOut();
 }
});

**Jay Dog** · 06-13-2014, 02:58 PM

Hi,

I've been modifying this code here and I've come up with two problems I would like some help with please.

1. How do I make the rollover coloured Divs all in the same place? I'm guessing that the co-ordinates are being read from the corner of the 100 pixel square image so I could do a bit of maths and minus the distance in pixels so that it will always appear in the same place. Tricky and I'm not 100 sure if it'll work.

2. Is there anyway I can modify this code for Chrome? It shows the coloured boxes but no sound. Any help'd be greatly appreciated, thanks and have a great weekend.

Jay Dog

Code:

<html>
<head>
<style type="text/css">
/*<![CDATA[*/

.caption {
	position:absolute;
	z-Index:101;
	visibility:hidden;
	left:20px;
	top:20px;
	height:25px;
	width:400px;
	background-Color:#66CC99;
	text-Align:center;
	font-Size:20px;
}

/*]]>*/
</style>

<style type="text/css">
<!--
a { text-decoration : none; color : #000; }
</style>
<bgsound src="#" id="soundeffect" loop=1 autostart="true" />









<script type="text/javascript">

/***********************************************
* JavaScript Sound effect- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Aerobic mean.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What are Anabolic Steroids.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Anorexia mean.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What is a Balanced Diet.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Blood Pressure mean.mp3" //path to sound file, or pass in filename directly into playsound()


var soundfile="http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/What does Cardiac Output mean.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What are Diuretics.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What is an Endomorph.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Exercise mean.mp3" //path to sound file, or pass in filename directly into playsound()




function playsound(soundfile){
if (document.all && document.getElementById){
document.getElementById("soundeffect").src="" //reset first in case of problems
document.getElementById("soundeffect").src=soundfile
}
}

function bindsound(tag, soundfile, masterElement){
if (!window.event) return
var source=event.srcElement
while (source!=masterElement && source.tagName!="HTML"){
if (source.tagName==tag.toUpperCase()){
playsound(soundfile)
break
}
source=source.parentElement
}
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>PE Pocasts</title>




</head>

<body>


<div id="pop1" class="caption" style="top:-60px; left:10px; background-Color:#DF01D7;" >What does Aerobic mean?</div>
<div id="pop2" class="caption" style="top:-60px; left:10px; background-Color:#00FF80;" >What are Anabolic Steroids?</div>
<div id="pop3" class="caption" style="top:-60px; left:-100px; background-Color:#F5A9F2;" >What does Anorexia mean?</div>
<div id="pop4" class="caption" style="top:-60px; left:-100px; background-Color:#9A2EFE;" >What is a Balanced Diet?</div>
<div id="pop5" class="caption" style="top:-60px; left:-100px; background-Color:#01DFD7;" >What does Blood Pressure mean?</div>
<div id="pop6" class="caption" style="top:-60px; left:-100px; background-Color:#DF013A;" >What does Cardiac Output mean?</div>
<div id="pop7" class="caption" style="top:-60px; left:-100px; background-Color:#D7DF01;" >What are Diuretics?</div>
<div id="pop8" class="caption" style="top:-60px; left:-100px; background-Color:#0080FF;" >What is an Endomorph?</div>
<div id="pop9" class="caption" style="top:-60px; left:-100px; background-Color:#FF4000;" >What does Exercise mean?</div>
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="75" align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" align="center" valign="middle">
    
    


    
    
    
    
    <img src="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/aerobic.jpg" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/What does Aerobic mean.mp3')" class="zxcCaptionOvelay:pop1 FadeIn:100 Speed:1000" />
    
    
    
    
    
    
    </td>
    <td width="100" align="center" valign="middle">
    

    
    
    <img src="http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/steroids.jpg" alt="" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What are Anabolic Steroids.mp3')" class="zxcCaptionOvelay:pop2 FadeIn:100 Speed:1000" /></td>
    <td width="100" align="center" valign="middle"><img src="http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/anorexia.jpg" alt="" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Anorexia mean.mp3')" class="zxcCaptionOvelay:pop3 FadeIn:100 Speed:1000" /></td>
  </tr>
</table>
<script type="text/javascript">
/*<![CDATA[*/
// Caption Ovelay (23-April-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcCaptionOvelay={

 init:function(op){
  op=typeof(op)=='object'?op:{};
  var clds=document.getElementsByTagName('IMG'),obj,o,s,i,f,z0=0;
  for (;z0<clds.length;z0++){
   s=clds[z0].className;
   if (s&&(s).match('zxcCaptionOvelay:')){
    s=s.split(' ');
    o={lk:clds[z0]};
    for (z0a=0;z0a<s.length;z0a++){
     i=s[z0a].indexOf(':');
     if (i>3){
      o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
     }
    }
    o.obj=document.getElementById(o.zxccaptionovelay);
    if (o.obj){
     f=o.fadein;
     s=o.speed;
     o.osx=o.obj.offsetLeft;
     o.osy=o.obj.offsetTop;
     o.iw=o.lk.offsetWidth;
     o.ih=o.lk.offsetHeight;
     o.ud=false;
     o.f=[o.obj,0,isFinite(f*1)&&f>10?f*1:50,0];
     o.ms=o.static!='true'&&isFinite(s*1)&&s>20?s*1:50;
     o.static!='true'?this.addevt(document,'mousemove','move',o):this.addevt(document,'resize','caption',o);
     this.caption(o,o.static=='true');
    }
   }
  }
 },

 move:function(o,e){
  var p=this.pos(o.lk),xy=e?this.mse(e):o.xy,x=xy[0],y=xy[1];
  ud=x>p[0]&&x<p[0]+o.lk.offsetWidth&&y>p[1]&&y<p[1]+o.lk.offsetHeight;
  if (ud!=o.ud){
   this.caption(o,ud);
  }
  o.ud=ud;
 },

 caption:function(o,ud){
  var p=this.pos(o.lk);
  o.obj.style.left=p[0]+o.osx+'px';
  o.obj.style.top=p[1]+o.osy+'px';
  o.obj.style.visibility='visible';
  this.animate(o,o.f,o.f[3],o.f[ud?2:1],new Date(),o.ms);
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   oop.opc(a[0],n);
   a[3]=n;
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[3]=t;
   oop.opc(a[0],t);
   t==0?a[0].style.visibility='hidden':null;
  }
 },

 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;
 },

 mse:function(e){
  if (window.event){
   var s=[document.body.scrollLeft,document.body.scrollTop];
   if (!s[1]){
    s=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+s[0],e.clientY+s[1]];
  }
  return [e.pageX,e.pageY];
 },

 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,p1){
  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); });
  }
 }


}

zxcCaptionOvelay.init();
/*]]>*/
</script>
</body>
</html>

**Jay Dog** · 06-13-2014, 03:00 PM

Code:

<html>
<head>
<style type="text/css">
/*<![CDATA[*/

.caption {
	position:absolute;
	z-Index:101;
	visibility:hidden;
	left:20px;
	top:20px;
	height:25px;
	width:400px;
	background-Color:#66CC99;
	text-Align:center;
	font-Size:20px;
}

/*]]>*/
</style>

<style type="text/css">
<!--
a { text-decoration : none; color : #000; }
</style>
<bgsound src="#" id="soundeffect" loop=1 autostart="true" />









<script type="text/javascript">

/***********************************************
* JavaScript Sound effect- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Aerobic mean.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What are Anabolic Steroids.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Anorexia mean.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What is a Balanced Diet.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Blood Pressure mean.mp3" //path to sound file, or pass in filename directly into playsound()


var soundfile="http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/What does Cardiac Output mean.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What are Diuretics.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What is an Endomorph.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Exercise mean.mp3" //path to sound file, or pass in filename directly into playsound()




function playsound(soundfile){
if (document.all && document.getElementById){
document.getElementById("soundeffect").src="" //reset first in case of problems
document.getElementById("soundeffect").src=soundfile
}
}

function bindsound(tag, soundfile, masterElement){
if (!window.event) return
var source=event.srcElement
while (source!=masterElement && source.tagName!="HTML"){
if (source.tagName==tag.toUpperCase()){
playsound(soundfile)
break
}
source=source.parentElement
}
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>PE Pocasts</title>




</head>

<body>


<div id="pop1" class="caption" style="top:-60px; left:10px; background-Color:#DF01D7;" >What does Aerobic mean?</div>
<div id="pop2" class="caption" style="top:-60px; left:10px; background-Color:#00FF80;" >What are Anabolic Steroids?</div>
<div id="pop3" class="caption" style="top:-60px; left:-100px; background-Color:#F5A9F2;" >What does Anorexia mean?</div>
<div id="pop4" class="caption" style="top:-60px; left:-100px; background-Color:#9A2EFE;" >What is a Balanced Diet?</div>
<div id="pop5" class="caption" style="top:-60px; left:-100px; background-Color:#01DFD7;" >What does Blood Pressure mean?</div>
<div id="pop6" class="caption" style="top:-60px; left:-100px; background-Color:#DF013A;" >What does Cardiac Output mean?</div>
<div id="pop7" class="caption" style="top:-60px; left:-100px; background-Color:#D7DF01;" >What are Diuretics?</div>
<div id="pop8" class="caption" style="top:-60px; left:-100px; background-Color:#0080FF;" >What is an Endomorph?</div>
<div id="pop9" class="caption" style="top:-60px; left:-100px; background-Color:#FF4000;" >What does Exercise mean?</div>
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="75" align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" align="center" valign="middle">
    
    


    
    
    
    
    <img src="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/aerobic.jpg" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/What does Aerobic mean.mp3')" class="zxcCaptionOvelay:pop1 FadeIn:100 Speed:1000" />
    
    
    
    
    
    
    </td>
    <td width="100" align="center" valign="middle">
    

    
    
    <img src="http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/steroids.jpg" alt="" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What are Anabolic Steroids.mp3')" class="zxcCaptionOvelay:pop2 FadeIn:100 Speed:1000" /></td>
    <td width="100" align="center" valign="middle"><img src="http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/anorexia.jpg" alt="" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Anorexia mean.mp3')" class="zxcCaptionOvelay:pop3 FadeIn:100 Speed:1000" /></td>
  </tr>
</table>
<script type="text/javascript">
/*<![CDATA[*/
// Caption Ovelay (23-April-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcCaptionOvelay={

 init:function(op){
  op=typeof(op)=='object'?op:{};
  var clds=document.getElementsByTagName('IMG'),obj,o,s,i,f,z0=0;
  for (;z0<clds.length;z0++){
   s=clds[z0].className;
   if (s&&(s).match('zxcCaptionOvelay:')){
    s=s.split(' ');
    o={lk:clds[z0]};
    for (z0a=0;z0a<s.length;z0a++){
     i=s[z0a].indexOf(':');
     if (i>3){
      o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
     }
    }
    o.obj=document.getElementById(o.zxccaptionovelay);
    if (o.obj){
     f=o.fadein;
     s=o.speed;
     o.osx=o.obj.offsetLeft;
     o.osy=o.obj.offsetTop;
     o.iw=o.lk.offsetWidth;
     o.ih=o.lk.offsetHeight;
     o.ud=false;
     o.f=[o.obj,0,isFinite(f*1)&&f>10?f*1:50,0];
     o.ms=o.static!='true'&&isFinite(s*1)&&s>20?s*1:50;
     o.static!='true'?this.addevt(document,'mousemove','move',o):this.addevt(document,'resize','caption',o);
     this.caption(o,o.static=='true');
    }
   }
  }
 },

 move:function(o,e){
  var p=this.pos(o.lk),xy=e?this.mse(e):o.xy,x=xy[0],y=xy[1];
  ud=x>p[0]&&x<p[0]+o.lk.offsetWidth&&y>p[1]&&y<p[1]+o.lk.offsetHeight;
  if (ud!=o.ud){
   this.caption(o,ud);
  }
  o.ud=ud;
 },

 caption:function(o,ud){
  var p=this.pos(o.lk);
  o.obj.style.left=p[0]+o.osx+'px';
  o.obj.style.top=p[1]+o.osy+'px';
  o.obj.style.visibility='visible';
  this.animate(o,o.f,o.f[3],o.f[ud?2:1],new Date(),o.ms);
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   oop.opc(a[0],n);
   a[3]=n;
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[3]=t;
   oop.opc(a[0],t);
   t==0?a[0].style.visibility='hidden':null;
  }
 },

 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;
 },

 mse:function(e){
  if (window.event){
   var s=[document.body.scrollLeft,document.body.scrollTop];
   if (!s[1]){
    s=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+s[0],e.clientY+s[1]];
  }
  return [e.pageX,e.pageY];
 },

 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,p1){
  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); });
  }
 }


}

zxcCaptionOvelay.init();
/*]]>*/
</script>
</body>
</html>

http://www.bigwood.nottingham.sch.uk...podcasts3.html

**vwphillips** · 06-14-2014, 09:34 AM

http://www.vicsjavascripts.org/Demos/140614A.htm

**Jay Dog** · 07-02-2014, 10:40 AM

Hi,

a couple of issues I'd like some help with please.

1. We have the area called 'anchor' where the text changes, on some of the pages there are over 80 100 pixel icons and the children can't see the changing text when they roll over the lower 40 odd images, is there a way of having two 'anchor areas' please? I have tried this but with no success.

2. The webpage works fine in Internet Explorer but I've noticed in Chrome you can't hear the MP3's. I've done some research and created some 'ogg' files to compliment the MP3's yet still that doesn't seem to work when I've tried changing the code. Any help on that front would be greatly appreciated. Thanks.

Code:

<html>
<head>
<style type="text/css">
/*<![CDATA[*/

.caption {
	position:absolute;
	z-Index:101;
	visibility:hidden;
	left:20px;
	top:20px;
	height:50px;
	width:400px;
	background-Color:#66CC99;
	text-Align:left;
	font-Size:16px;
}

/*]]>*/
</style>

<style type="text/css">
<!--
a { text-decoration : none; color : #000; }
</style>
<bgsound src="#" id="soundeffect" loop=1 autostart="true" />









<script type="text/javascript">

/***********************************************
* JavaScript Sound effect- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/laser.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/boing.mp3" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/boing.ogg" //path to sound file, or pass in filename directly into playsound()

var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/laser.ogg" //path to sound file, or pass in filename directly into playsound()



function playsound(soundfile){
if (document.all && document.getElementById){
document.getElementById("soundeffect").src="" //reset first in case of problems
document.getElementById("soundeffect").src=soundfile
}
}

function bindsound(tag, soundfile, masterElement){
if (!window.event) return
var source=event.srcElement
while (source!=masterElement && source.tagName!="HTML"){
if (source.tagName==tag.toUpperCase()){
playsound(soundfile)
break
}
source=source.parentElement
}
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>PE Pocasts</title>




</head>

<body>


<div id="pop1" class="caption" style="top:-60px; left:10px; background-Color:#ffffff;" >LIME</div> 
<div id="pop2" class="caption" style="top:-60px; left:10px; background-Color:#ffffff;" >PINK</div>




<table width="918" height="110" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="10%" rowspan="2" align="center" valign="middle">&nbsp;</td>
    <td width="30%" rowspan="2" align="left" valign="middle"><strong><font size=6>Section 1.1.1</font></strong></td>
    <td width="45%" height="75" rowspan="2" align="left" valign="middle">&nbsp;<a name="anchor" id="anchor" ><span style="font-size:16px">Roll over each icon and click to hear the PE podcasts</span></a></td>
    <td width="15%" align="center" valign="middle"><img src="http://www.bigwood.nottingham.sch.uk/uploads/muteicon.png" alt="" width="30" height="30" onClick="playsound('')"></td>
  </tr>
  <tr>
    <td align="center" valign="middle">mute sound</td>
  </tr>
</table>
<table width="918" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100">&nbsp;</td>
    <td width="100">&nbsp;</td>
    <td width="265">&nbsp;</td>
  </tr>
  <tr>
    <td height="102" align="center" valign="middle"><img src="http://www.bigwood.nottingham.sch.uk/uploads/lime.jpg" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/laser.mp3')" class="zxcCaptionOvelay:pop1 FadeIn:100 Speed:400" /></td>
    <td align="center" valign="middle"><img src="http://www.bigwood.nottingham.sch.uk/uploads/pink.jpg" alt="" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/boing.mp3')" class="zxcCaptionOvelay:pop2 FadeIn:100 Speed:400" /></td>
    <td align="center" valign="middle">&nbsp;<a id="anchor" ><span style="font-size:16px">Roll over each icon and click to hear the PE podcasts</span></a></td>
  </tr>
</table>
<script type="text/javascript">
/*<![CDATA[*/
// Caption Ovelay (23-April-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcCaptionOvelay={

 init:function(op){
  op=typeof(op)=='object'?op:{};
  var clds=document.getElementsByTagName('IMG'),obj,o,s,i,f,z0=0;
  for (;z0<clds.length;z0++){
   s=clds[z0].className;
   if (s&&(s).match('zxcCaptionOvelay:')){
    s=s.split(' ');
    o={lk:clds[z0],a:document.getElementById(op.Anchor)};
    for (z0a=0;z0a<s.length;z0a++){
     i=s[z0a].indexOf(':');
     if (i>3){
      o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
     }
    }
    o.obj=document.getElementById(o.zxccaptionovelay);
    if (o.obj){
     f=o.fadein;
     s=o.speed;
     o.osx=o.obj.offsetLeft;
     o.osy=o.obj.offsetTop;
     o.iw=o.lk.offsetWidth;
     o.ih=o.lk.offsetHeight;
     o.ud=false;
     o.f=[o.obj,0,isFinite(f*1)&&f>10?f*1:50,0];
     o.ms=o.static!='true'&&isFinite(s*1)&&s>20?s*1:50;
     o.static!='true'?this.addevt(document,'mousemove','move',o):this.addevt(document,'resize','caption',o);
     this.caption(o,o.static=='true');
    }
   }
  }
 },

 move:function(o,e){
  var p=this.pos(o.lk),xy=e?this.mse(e):o.xy,x=xy[0],y=xy[1];
  ud=x>p[0]&&x<p[0]+o.lk.offsetWidth&&y>p[1]&&y<p[1]+o.lk.offsetHeight;
  if (ud!=o.ud){
   this.caption(o,ud);
  }
  o.ud=ud;
 },

 caption:function(o,ud){
  var p=this.pos(o.a||o.lk);
  o.obj.style.left=p[0]+(o.a?(o.a.offsetWidth-o.obj.offsetWidth)/2:o.osx)+'px';
  o.obj.style.top=p[1]+(o.a?(o.a.offsetHeight-o.obj.offsetHeight)/2:o.osy)+'px';
  o.obj.style.visibility='visible';
  this.animate(o,o.f,o.f[3],o.f[ud?2:1],new Date(),o.ms);
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   oop.opc(a[0],n);
   a[3]=n;
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[3]=t;
   oop.opc(a[0],t);
   t==0?a[0].style.visibility='hidden':null;
  }
 },

 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;
 },

 mse:function(e){
  if (window.event){
   var s=[document.body.scrollLeft,document.body.scrollTop];
   if (!s[1]){
    s=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+s[0],e.clientY+s[1]];
  }
  return [e.pageX,e.pageY];
 },

 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,p1){
  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); });
  }
 }


}

zxcCaptionOvelay.init({
 Anchor:'anchor'
});
/*]]>*/
</script>
</body>
</html>

**vwphillips** · 07-02-2014, 12:26 PM

this allow the anchor ID to be specified in the class name options

http://www.vicsjavascripts.org/Demos/140702B.htm

but I would have thought that it would be better to display the popup adjacent to the image