CSS Codes
CSS Layouts
Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 28

Thread: Roll over image and text appears

  1. 12-31-2013, 01:05 PM #11
    Jay Dog
    Jay Dog is offline Regular Coders
    Join Date
    Oct 2012
    Location
    England
    Posts
    103
    Thanks
    28
    Thanked 2 Times in 1 Post

    Default

    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>
    Reply With Quote Reply With Quote
  2. 12-31-2013, 01:31 PM #12
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    Jay Dog (01-03-2014)
  4. 01-01-2014, 11:25 PM #13
    Jay Dog
    Jay Dog is offline Regular Coders
    Join Date
    Oct 2012
    Location
    England
    Posts
    103
    Thanks
    28
    Thanked 2 Times in 1 Post

    Default

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

    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
    Reply With Quote Reply With Quote
  5. 01-01-2014, 11:26 PM #14
    Jay Dog
    Jay Dog is offline Regular Coders
    Join Date
    Oct 2012
    Location
    England
    Posts
    103
    Thanks
    28
    Thanked 2 Times in 1 Post

    Default

    [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>
    Reply With Quote Reply With Quote
  6. 01-01-2014, 11:28 PM #15
    Jay Dog
    Jay Dog is offline Regular Coders
    Join Date
    Oct 2012
    Location
    England
    Posts
    103
    Thanks
    28
    Thanked 2 Times in 1 Post

    Default

    <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>
    Reply With Quote Reply With Quote
  7. 01-02-2014, 12:01 AM #16
    Jay Dog
    Jay Dog is offline Regular Coders
    Join Date
    Oct 2012
    Location
    England
    Posts
    103
    Thanks
    28
    Thanked 2 Times in 1 Post

    Default

    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
    Reply With Quote Reply With Quote
  8. 01-02-2014, 06:00 PM #17
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    see

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

    please dont remove the indenting
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote

  9. The Following User Says Thank You to vwphillips For This Useful Post:

    Jay Dog (01-03-2014)
  10. 01-03-2014, 09:11 PM #18
    Jay Dog
    Jay Dog is offline Regular Coders
    Join Date
    Oct 2012
    Location
    England
    Posts
    103
    Thanks
    28
    Thanked 2 Times in 1 Post

    Default

    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
    Reply With Quote Reply With Quote
  11. 01-04-2014, 11:05 AM #19
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    I have updated link

    http://www.vicsjavascripts.org/StdImages/1401002A.htm
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote

  12. The Following User Says Thank You to vwphillips For This Useful Post:

    Jay Dog (01-05-2014)
  13. 01-05-2014, 06:16 PM #20
    Jay Dog
    Jay Dog is offline Regular Coders
    Join Date
    Oct 2012
    Location
    England
    Posts
    103
    Thanks
    28
    Thanked 2 Times in 1 Post

    Default

    Crikey... I was going to try something just like that tomorrow at work. Many thanks
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Text and Image Crawler FF1+ IE6+ Opr7+ appears to not work with IE
    By talon in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-05-2012, 05:36 AM
  2. Pop-up text box/Roll over image
    By vik101 in forum Looking for such a script or service
    Replies: 0
    Last Post: 08-29-2007, 02:13 AM
  3. Image Roll-Over with Drop-Down (Pop-Out) Text Menu
    By SydsEastside in forum Looking for such a script or service
    Replies: 0
    Last Post: 01-16-2007, 07:33 PM
  4. Text appears when clicking on image
    By aps in forum JavaScript
    Replies: 4
    Last Post: 03-17-2006, 04:07 AM
  5. Mouse over text, image appears
    By snowangel in forum Graphics
    Replies: 2
    Last Post: 02-07-2006, 06:00 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules