-
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:
HTML 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>
-
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[*/
#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>
-
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.../schoolmap.jpg
The image for the school is here: http://www.bigwood.nottingham.sch.uk...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
-
[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">
<!--
function alderImage() {
pic = new Array();
pic[0] = 'alder1.jpg';
pic[1] = 'alder2.jpg';
pic[2] = 'alder3.jpg';
pic[3] = 'alder4.jpg';
randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];
return newImage;
}
// -->
<!--
function birchImage() {
pic = new Array();
pic[0] = 'birch1.jpg';
pic[1] = 'birch2.jpg';
pic[2] = 'birch3.jpg';
pic[3] = 'birch4.jpg';
randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];
return newImage;
}
// -->
<!--
function chestnutImage() {
pic = new Array();
pic[0] = 'chestnut1.jpg';
pic[1] = 'chestnut2.jpg';
pic[2] = 'chestnut3.jpg';
pic[3] = 'chestnut4.jpg';
randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];
return newImage;
}
// -->
<!--
function centreImage() {
pic = new Array();
pic[0] = 'https://jupiter.inthehive.net/sites/bigwood/Pupils/Year%207%20Pupils/7%20generic/main.jpg';
randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];
return newImage;
}
// -->
<!--
function frontImage() {
pic = new Array();
pic[0] = 'front.jpg';
randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];
return newImage;
}
// -->
<!--
function douglasImage() {
pic = new Array();
pic[0] = 'douglas1.jpg';
pic[1] = 'douglas2.jpg';
pic[2] = 'douglas3.jpg';
pic[3] = 'douglas4.jpg';
randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];
return newImage;
}
// -->
<!--
function enterpriseImage() {
pic = new Array();
pic[0] = 'enterprise1.jpg';
pic[1] = 'enterprise2.jpg';
pic[2] = 'enterprise3.jpg';
pic[3] = 'enterprise4.jpg';
randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];
return newImage;
}
// -->
<!--
function oakImage() {
pic = new Array();
pic[0] = 'oak1.jpg';
pic[1] = 'oak2.jpg';
pic[2] = 'oak3.jpg';
pic[3] = 'oak4.jpg';
randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];
return newImage;
}
// -->
<!--
function mugaImage() {
pic = new Array();
pic[0] = 'muga1.jpg';
pic[1] = 'muga2.jpg';
pic[2] = 'muga3.jpg';
pic[3] = 'muga4.jpg';
randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];
return newImage;
}
// -->
</script>
-
<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">
<!--
A:link { COLOR: white; TEXT-DECORATION: none; font-weight: normal }
A:visited { COLOR: white; TEXT-DECORATION: none; font-weight: normal }
A:active { COLOR: white; TEXT-DECORATION: none }
A:hover { COLOR: white; TEXT-DECORATION: none; font-weight: none }
-->
</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>
-
HTML Code:
<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">
<!--
A:link { COLOR: white; TEXT-DECORATION: none; font-weight: normal }
A:visited { COLOR: white; TEXT-DECORATION: none; font-weight: normal }
A:active { COLOR: white; TEXT-DECORATION: none }
A:hover { COLOR: white; TEXT-DECORATION: none; font-weight: none }
-->
</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
-
-
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
-
-
Crikey... I was going to try something just like that tomorrow at work. Many thanks ;)
