Roll over image and text appears [Archive]

View Full Version : Roll over image and text appears

Jay Dog

04-23-2013, 12:28 PM

Hi,

I have found some sample codes on here that resemble what I want but this is exactly what I was looking for:

http://news.sky.com/story/1081184/boston-bomb-suspect-charged-in-hospital-bed
If you roll over the image on the right hand side, text appears in what I think is going to be a DIV.

Like I said I have found some very similar but they seem to have a floating DIV, how can I make it static like the Sky News one?

Thanks.

vwphillips

04-23-2013, 02:00 PM

<!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[*/

.caption {
position:absolute;z-Index:101;visibility:hidden;left:0px;top:245px;height:50px;width:402px;height:50px;background-Color:#FFCC66;text-Align:center;font-Size:20px;
}

/*]]>*/
</style></head>

<body>
<img src="http://media.skynews.com/media/images/generated/2013/4/22/233762/default/v3/167190391-1-402x293.jpg" class="zxcCaptionOvelay:pop1 FadeIn:50 Speed:1000" />
<img src="http://media.skynews.com/media/images/generated/2013/4/22/233798/default/v0/167198753-1-402x293.jpg" class="zxcCaptionOvelay:pop2 Static:true" />
<div id="pop1" class="caption" >Caption 1</div>
<div id="pop2" class="caption" style="top:0px;background-Color:red;" >Caption 2</div>

<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

04-24-2013, 12:18 PM

That's great, thanks, is there a way to alter the opacity of the divs though?

Again many thanks.:)

Jay Dog

04-24-2013, 12:23 PM

Hi, done it...

opc:function(o,n){
o.style.filter='alpha(opacity='+2*n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},

vwphillips

04-24-2013, 03:06 PM

<img src="http://media.skynews.com/media/images/generated/2013/4/22/233762/default/v3/167190391-1-402x293.jpg" class="zxcCaptionOvelay:pop1 FadeIn:50 Speed:1000" />

change the value in red

questions

05-23-2013, 10:45 PM

This might be simpler:

<div class="image-container">
<div class="image"><a href="some.html"><img src="some.jpg" width="400" height="400" alt="something"></a></div>
<div class="image-text"><p>something</p></div>
</div>

.image-container {
position: relative;
float: right;
overflow: hidden;
width: 400px;
height: 400px;
margin: 0;
}

.image {
position: absolute;
z-index: 1;
}

.image:hover {
opacity: 0;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}

.image-text {
position: absolute;
margin-top: 50px;
width: 100%;
text-align:center;
font-weight: 400;
font-size: 2em;
font-style: italic;
line-height: 100%;
color: #444;
z-index: 0;
}

Jay Dog

12-30-2013, 11:38 AM

Hi, how can I make it so that when you rollover the middle lady, her name appears and when you rollover the guy in glasses, his name appears?

I think this is something really simple in the code but so far it has alluded me.

Thanks,

<!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[*/

.caption {
position:absolute;
z-Index:102;
visibility:hidden;
background-Color:#000000;
text-Align:center;
font-Size:15px;
font-Color:#FFF;
}

/*]]>*/
</style></head>

<body>
<img src="http://theknow.ask.com/wp-content/uploads/2013/10/law-and-order-svu-c-e1381946476981.jpg" width="955" height="437" border="0" usemap="#Map" class="zxcCaptionOvelay:pop1 FadeIn:10 Speed:500" />
<map name="Map" id="Map">
<area shape="poly" coords="485,426,476,381,371,317,363,302,357,287,351,273,350,245,346,208,333,196,309,193,289,215,291,230,279,240,284,256,282,270,254,294,238,331,243,423" href="#" class="zxcCaptionOvelay:pop1 FadeIn:10 Speed:500" />
<area shape="poly" coords="634,196,618,103,600,89,592,56,558,20,521,37,518,74,508,98,482,140,470,178,499,226,516,387,540,378,578,305,609,287,613,227" href="#" class="zxcCaptionOvelay:pop2 FadeIn:10 Speed:500" />
</map>

<div id="pop1" class="caption" style="left:250px; top:300px; height:15px; width:120px; background-Color:#000;" ><font color="#FFFFFF">John Mumch</font></div>
<div id="pop2" class="caption" style="left:500px; top:100px; height:15px; width:120px; background-Color:#000;" ><font color="#FFFFFF">Olivia Benson</font></div>

<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>

vwphillips

12-30-2013, 03:47 PM

Hav you use Image Maps?

Jay Dog

12-30-2013, 05:18 PM

I made an image map using a polygon option in Dreamweaver but I'm struggling to get the polygon area to recognise the ID I think... I went on a site called Image Maps but that doesn't seem to be working. Any help'd be greatly appreciated.

Thanks

vwphillips

12-31-2013, 08:58 AM

post your image map for the image and I will use it for the script

Jay Dog

12-31-2013, 01:05 PM

I don't understand what you mean, sorry. Thanks for your help but can you please elaborate?

The only image map I know is that which is in the code:

<body>
<img src="http://theknow.ask.com/wp-content/uploads/2013/10/law-and-order-svu-c-e1381946476981.jpg" width="955" height="437" border="0" usemap="#Map" class="zxcCaptionOvelay:pop1 FadeIn:10 Speed:500" />
<map name="Map" id="Map">
<area shape="poly" coords="485,426,476,381,371,317,363,302,357,287,351,273,350,245,346,208,333,196,309,193,289,215,291,230,279,240,284,256,282,270,254,294,238,331,243,423" href="#" class="zxcCaptionOvelay:pop1 FadeIn:10 Speed:500" />
<area shape="poly" coords="634,196,618,103,600,89,592,56,558,20,521,37,518,74,508,98,482,140,470,178,499,226,516,387,540,378,578,305,609,287,613,227" href="#" class="zxcCaptionOvelay:pop2 FadeIn:10 Speed:500" />
</map>

vwphillips

12-31-2013, 01:31 PM

<!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[*/

#captions {
position:absolute;left:122px;top:385px;width:351px;height:50px;text-Align:center;border:solid red 1px;
}

.tst {
position:absolute;left:122px;top:120px;width:351px;height:263px;border:solid black 1px;
}

.caption {
position:absolute;z-Index:101;left:0px;top:0px;height:50px;width:351px;height:50px;background-Color:#FFCC66;text-Align:center;font-Size:20px;
}

/*]]>*/
</style>

</head>

<body>
<img class="tst" src="http://www.vicsjavascripts.site88.net/StdImages/WinterPalace.jpg" alt="WinterPalace" usemap="#ImageMap1" ismap="ismap" />

<map name="ImageMap1" id="map1" >
<area shape="rect" alt="" coords="6,138,73,199" />
<area shape="rect" alt="" coords="85,80,173,129" />
<area shape="circle" alt="" coords="235,158,15" />
<area shape="poly" alt="" coords="220,147,220,147,203,145,178,158,160,180,185,187,216,190,220,147" />
</map>

<div id="captions" >
<div class="caption" >Caption 1</div>
<div class="caption" style="top:0px;background-Color:blue;" >Caption 2</div>
<div class="caption" style="top:0px;background-Color:green;" >Caption 3</div>
<div class="caption" style="top:0px;background-Color:red;" >Caption 4</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Image Map Captions (31-December-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcImageMapCaptions={

init:function(o){
var id=o.ImageMapID,fi=o.FadeIn,fo=o.FadeOut,ms=o.Animate,cp=document.getElementById(o.CaptionsID),m=document.getElementById(id);
if (m&&cp){
var fi=fi=='mouseover'||fi=='mouseout'||fi=='mouseup'||fi=='mousedown'?fi:'click',fo=fo=='mouseover'||fo=='mouseout'||fo=='mouseup'||fo=='mousedown'?fo:'click',as=m .getElementsByTagName('AREA'),clds=cp.childNodes,ca=[],z0=0,z1=0;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
ca.push(clds[z0]);
}
}
o.t=fi=='click'&&fo=='click';
for (;z1<as.length;z1++){
if (ca[z1]){
ca[z1].style.visibility='hidden';
this.addevt(as[z1],fi,'over',o,z1,false);
if (!o.t){
this.addevt(as[z1],fo,'over',o,z1,true);
}
ca[z1]=[ca[z1],false,0];
}
}
o.ca=ca;
o.f=ca[0];
o.ms=typeof(ms)=='number'&&ms>50?ms:1000;
}

},

over:function(o,n,ud){
if (o.f!=o.ca[n]){
this.animate(o,o.f,o.f[2],0,new Date(),o.ms);
o.f[1]=false;
}
o.f=o.ca[n];
ud=o.t?o.f[1]:ud;
this.animate(o,o.f,o.f[2],ud?0:100,new Date(),o.ms);
o.f[1]=!o.f[1];
o.f[0].style.visibility='visible';
return false;
},

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[2]=n;
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[2]=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;
},

addevt:function(o,t,f,p,p1,p2){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,p2);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); }):null;
}

}

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)
});
/*]]>*/
</script>
</body>

</html>

Jay Dog

01-01-2014, 11:25 PM

Hi, wow, that's amazing.

I'm trying to develop this even more using a bit of code you helped me with a while back but so far it's not worked... :confused:

OK, here's my 'wish list':

1. How can I get it so that when I roll over the orange area, not only do I get a random image and the text about 'Alder etc.' (which I have), but I also get text that corresponds to the image, for example, I could have the text of the girl with the violin and some relevant text about that image, but I could roll over the green block and get an image, block description AND image description as shown in the image below:

http://www.bigwood.nottingham.sch.uk/uploads/schoolmap.jpg

The image for the school is here: http://www.bigwood.nottingham.sch.uk/uploads/schoolmap2.png

AND... how do I get it so that I always have the red div box on at the beginning, (it only comes on when you roll over the school area without coloured blocks) as well as a descriptive bit of text?

I know this is asking a lot any help would be greatly appreciated as I want to try and make a virtual tour of the school areas.

Thanks,

Jay Dog

Jay Dog

01-01-2014, 11:26 PM

[HTML]<!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>

<script language="JAVASCRIPT">


















</script>

Jay Dog

01-01-2014, 11:28 PM

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

.caption {
position:absolute;
z-Index:102;
visibility:hidden;
background-Color:#6C0000;
text-Align:center;
font-Color:#FFF;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 18px;
line-height: 20px;
}

/*]]>*/
</style>

<style type="text/css">

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

#captions {
position:absolute;
left:124px;
top:395px;
width:650101px;
height:50px;
text-Align:center;
border:solid red 0px;
}

.tst {
position:absolute;
width:306px;
height:455px;
border:solid black 0px;
left: 10px;
top: 10px;
}

/*]]>*/
</style></head>

<body onload="MM_preloadImages(
'alder1.jpg',
'alder2.jpg',
'alder3.jpg',
'alder4.jpg',
'birch1.jpg',
'birch2.jpg',
'birch3.jpg',
'birch4.jpg',
'chestnut1.jpg',
'chestnut2.jpg',
'chestnut3.jpg',
'chestnut4.jpg',
'douglas1.jpg',
'douglas2.jpg',
'douglas3.jpg',
'douglas4.jpg',
'oak1.jpg',
'oak2.jpg',
'oak3.jpg',
'oak4.jpg',
'enterprise1.jpg',
'enterprise2.jpg',
'enterprise3.jpg',
'enterprise4.jpg'),
'front.jpg')">

<div class="tab_content tab1" style="float: left; width: 310px;">
<div id="alder" style="height:100px; width:310px">
<img src="schoolmap2.png" usemap="#ImageMap1" ismap="ismap" class="tst" />

<map name="ImageMap1" id="map1" >

<area shape="rect" coords="123,16,278,80" onMouseOver="document.images.myImage2.src = mugaImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="rect" coords="112,109,191,161" onMouseOver="document.images.myImage2.src = birchImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="rect" coords="55,152,108,232"
onMouseOver="document.images.myImage2.src = alderImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="rect" coords="197,156,236,223" onMouseOver="document.images.myImage2.src = chestnutImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="rect" coords="110,237,187,280" onMouseOver="document.images.myImage2.src = oakImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="poly" coords="232,334,277,311,239,233,211,249,238,304" onMouseOver="document.images.myImage2.src = douglasImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="poly" coords="232,336,276,314,272,338,266,337,252,416,219,409" onMouseOver="document.images.myImage2.src = enterpriseImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="poly" coords="0,456,0,1,306,1,306,456,214,453,216,415,256,422,269,344,275,344,281,314,241,231,209,248,235,307,215,409,207,449,112,449,109,283,189,284,191,236,112,236,112,165, 190,163,194,226,240,224,241,153,198,151,193,86,280,85,279,14,119,14,120,85,188,88,188,104,110,106,107,152,56,151,57,231,105,231,104,448" />
</map>

<div id="captions" >

<div id="muga" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#05cd86;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Muga</strong><br />
PE </span></a></font></div></div>

<div id="birch" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#00FF33;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Birch</strong><br />
ICT, Science & World Studies </span></a> </font> </div></div>

<div id="alder" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#f98c33;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Alder</strong><br />
EPA & English </span></a> </font> </div></div>

<div id="chestnut" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#0555cd;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Chestnut</strong>
<br />Maths & Design </span></a> </font> </div></div>

<div id="oak" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#c50ce6;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Oak</strong><br />
Admin, Library & the Zone </span></a> </font> </div></div>

<div id="douglas" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#24d89a;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Douglas</strong><br />
PE </span></a> </font> </div></div>

<div id="enterprise" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#f56ec6;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Enterprise</strong><br />
The Base, Admin & Vocational </span></a> </font> </div></div>
<div id="school" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#d6062d;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Big Wood School</strong><br />
Bewcastle Road, Warrenhill, Nottingham </span></a> </font> </div></div>

</div>

</div>
</div>
<div id="dialerdiv2" style="float: left; width: 410px;">
<div id="mainschool" style="height:100px; width:410px"> <img name="myImage2" src="front.jpg"></div>

</div>

<script type="text/javascript">
/*<![CDATA[*/
// Image Map Captions (31-December-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcImageMapCaptions={

init:function(o){
var id=o.ImageMapID,fi=o.FadeIn,fo=o.FadeOut,ms=o.Animate,cp=document.getElementById(o.CaptionsID),m=document.getElementById(id);
if (m&&cp){
var fi=fi=='mouseover'||fi=='mouseout'||fi=='mouseup'||fi=='mousedown'?fi:'click',fo=fo=='mouseover'||fo=='mouseout'||fo=='mouseup'||fo=='mousedown'?fo:'click',as=m .getElementsByTagName('AREA'),clds=cp.childNodes,ca=[],z0=0,z1=0;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
ca.push(clds[z0]);
}
}
o.t=fi=='click'&&fo=='click';
for (;z1<as.length;z1++){
if (ca[z1]){
ca[z1].style.visibility='hidden';
this.addevt(as[z1],fi,'over',o,z1,false);
if (!o.t){
this.addevt(as[z1],fo,'over',o,z1,true);
}
ca[z1]=[ca[z1],false,0];
}
}
o.ca=ca;
o.f=ca[0];
o.ms=typeof(ms)=='number'&&ms>50?ms:1000;
}

},

over:function(o,n,ud){
if (o.f!=o.ca[n]){
this.animate(o,o.f,o.f[2],0,new Date(),o.ms);
o.f[1]=false;
}
o.f=o.ca[n];
ud=o.t?o.f[1]:ud;
this.animate(o,o.f,o.f[2],ud?0:100,new Date(),o.ms);
o.f[1]=!o.f[1];
o.f[0].style.visibility='visible';
return false;
},

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[2]=n;
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },50);
}
else {
a[2]=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/5000-.001;
},

addevt:function(o,t,f,p,p1,p2){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,p2);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); }):null;
}

</body>
</html>

Jay Dog

01-02-2014, 12:01 AM

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

.caption {
position:absolute;
z-Index:102;
visibility:hidden;
background-Color:#6C0000;
text-Align:center;
font-Color:#FFF;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 18px;
line-height: 20px;
}

/*]]>*/
</style>

<style type="text/css">

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

#captions {
position:absolute;
left:124px;
top:395px;
width:650101px;
height:50px;
text-Align:center;
border:solid red 0px;
}

.tst {
position:absolute;
width:306px;
height:455px;
border:solid black 0px;
left: 10px;
top: 10px;
}

/*]]>*/
</style></head>

<body onload="MM_preloadImages(
'alder1.jpg',
'alder2.jpg',
'alder3.jpg',
'alder4.jpg',
'birch1.jpg',
'birch2.jpg',
'birch3.jpg',
'birch4.jpg',
'chestnut1.jpg',
'chestnut2.jpg',
'chestnut3.jpg',
'chestnut4.jpg',
'douglas1.jpg',
'douglas2.jpg',
'douglas3.jpg',
'douglas4.jpg',
'oak1.jpg',
'oak2.jpg',
'oak3.jpg',
'oak4.jpg',
'enterprise1.jpg',
'enterprise2.jpg',
'enterprise3.jpg',
'enterprise4.jpg'),
'front.jpg')">

<div class="tab_content tab1" style="float: left; width: 310px;">
<div id="alder" style="height:100px; width:310px">
<img src="schoolmap2.png" usemap="#ImageMap1" ismap="ismap" class="tst" />

<map name="ImageMap1" id="map1" >

<area shape="rect" coords="123,16,278,80" onMouseOver="document.images.myImage2.src = mugaImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="rect" coords="112,109,191,161" onMouseOver="document.images.myImage2.src = birchImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="rect" coords="55,152,108,232"
onMouseOver="document.images.myImage2.src = alderImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="rect" coords="197,156,236,223" onMouseOver="document.images.myImage2.src = chestnutImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="rect" coords="110,237,187,280" onMouseOver="document.images.myImage2.src = oakImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="poly" coords="232,334,277,311,239,233,211,249,238,304" onMouseOver="document.images.myImage2.src = douglasImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="poly" coords="232,336,276,314,272,338,266,337,252,416,219,409" onMouseOver="document.images.myImage2.src = enterpriseImage();" onMouseOut="document.images.myImage2.src = frontImage();" >

<area shape="poly" coords="0,456,0,1,306,1,306,456,214,453,216,415,256,422,269,344,275,344,281,314,241,231,209,248,235,307,215,409,207,449,112,449,109,283,189,284,191,236,112,236, 112,165,190,163,194,226,240,224,241,153,198,151,193,86,280,85,279,14,119,14,120,85,188,88,188,104,110,106,107,152,56,151,57,231,105,231,104,448" />
</map>

<div id="captions" >

<div id="muga" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#05cd86;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Muga</strong><br />
PE </span></a></font></div></div>

<div id="birch" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#00FF33;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Birch</strong><br />
ICT, Science & World Studies </span></a> </font> </div></div>

<div id="alder" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#f98c33;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Alder</strong><br />
EPA & English </span></a> </font> </div></div>

<div id="chestnut" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#0555cd;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Chestnut</strong>
<br />Maths & Design </span></a> </font> </div></div>

<div id="oak" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#c50ce6;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Oak</strong><br />
Admin, Library & the Zone </span></a> </font> </div></div>

<div id="douglas" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#24d89a;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Douglas</strong><br />
PE </span></a> </font> </div></div>

<div id="enterprise" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#f56ec6;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Enterprise</strong><br />
The Base, Admin & Vocational </span></a> </font> </div></div>
<div id="school" class="caption" style="left:196px; top:-72px; height:70px; width:400px; background-Color:#d6062d;" > <div style = "height:10px; width:400px;"></div><div = "height:50px; width:400px;"><font color="#FFFFFF"><a href="http://amazon.com"><span>
<strong>Big Wood School</strong><br />
Bewcastle Road, Warrenhill, Nottingham </span></a> </font> </div></div>

</div>

</div>
</div>
<div id="dialerdiv2" style="float: left; width: 410px;">
<div id="mainschool" style="height:100px; width:410px"> <img name="myImage2" src="front.jpg"></div>

</div>

<script type="text/javascript">
/*<![CDATA[*/
// Image Map Captions (31-December-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcImageMapCaptions={

init:function(o){
var id=o.ImageMapID,fi=o.FadeIn,fo=o.FadeOut,ms=o.Animate,cp=document.getElementById(o.CaptionsID),m=document.getElementById(id);
if (m&&cp){
var fi=fi=='mouseover'||fi=='mouseout'||fi=='mouseup'||fi=='mousedown'?fi:'click',fo=fo=='mouseover'||fo=='mouseout'||fo=='mouseup'||fo=='mousedown'?fo:'click',as=m .getElementsByTagName('AREA'),clds=cp.childNodes,ca=[],z0=0,z1=0;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
ca.push(clds[z0]);
}
}
o.t=fi=='click'&&fo=='click';
for (;z1<as.length;z1++){
if (ca[z1]){
ca[z1].style.visibility='hidden';
this.addevt(as[z1],fi,'over',o,z1,false);
if (!o.t){
this.addevt(as[z1],fo,'over',o,z1,true);
}
ca[z1]=[ca[z1],false,0];
}
}
o.ca=ca;
o.f=ca[0];
o.ms=typeof(ms)=='number'&&ms>50?ms:1000;
}

},

over:function(o,n,ud){
if (o.f!=o.ca[n]){
this.animate(o,o.f,o.f[2],0,new Date(),o.ms);
o.f[1]=false;
}
o.f=o.ca[n];
ud=o.t?o.f[1]:ud;
this.animate(o,o.f,o.f[2],ud?0:100,new Date(),o.ms);
o.f[1]=!o.f[1];
o.f[0].style.visibility='visible';
return false;
},

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[2]=n;
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },50);
}
else {
a[2]=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/5000-.001;
},

addevt:function(o,t,f,p,p1,p2){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,p2);},false).attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); }):null;
}

</body>
</html> sorry forgot html brackets

vwphillips

01-02-2014, 06:00 PM

see

http://www.vicsjavascripts.org/StdImages/1401002A.htm

please dont remove the indenting

Jay Dog

01-03-2014, 09:11 PM

Sir, I am incredibly impressed... a massive thankyou!!!

However, just one request, on the div marked html, is there a way of putting some text in it, such as 'welcome to our interactive map....' but when you rollover the building blocks it then disappears and then acts just like the code you've written? I've tried putting some in but I want it to disappear, I've done it with the lower captions div but no luck with the 'html' one. I really appreciate your help on this, many thanks. Jay Dog

vwphillips

01-04-2014, 11:05 AM

I have updated link

http://www.vicsjavascripts.org/StdImages/1401002A.htm

Jay Dog

01-05-2014, 06:16 PM

Crikey... I was going to try something just like that tomorrow at work. Many thanks ;)

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/wp-content/uploads/2014/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

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

<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"> </td>
<td align="center" valign="middle"> </td>
<td align="center" valign="middle"> </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

<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"> </td>
<td align="center" valign="middle"> </td>
<td align="center" valign="middle"> </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/wp-content/uploads/2014/PE/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.

<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"> </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"> <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"> </td>
<td width="100"> </td>
<td width="265"> </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"> <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

Jay Dog

07-03-2014, 07:59 AM

Yes... that might be an idea, I'll have a play with the code, thanks.