Page 3 of 3 FirstFirst 123
Results 21 to 28 of 28

Thread: Roll over image and text appears

  1. #21
    Join Date
    Oct 2012
    Location
    England
    Posts
    97
    Thanks
    26
    Thanked 2 Times in 1 Post

    Default

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

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

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

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

    Jay Dog

  2. #22
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,772
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    remove the line in red

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

  3. #23
    Join Date
    Oct 2012
    Location
    England
    Posts
    97
    Thanks
    26
    Thanked 2 Times in 1 Post

    Default

    Hi,

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

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

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

    Jay Dog

    Code:
    <html>
    <head>
    <style type="text/css">
    /*<![CDATA[*/
    
    .caption {
    	position:absolute;
    	z-Index:101;
    	visibility:hidden;
    	left:20px;
    	top:20px;
    	height:25px;
    	width:400px;
    	background-Color:#66CC99;
    	text-Align:center;
    	font-Size:20px;
    }
    
    /*]]>*/
    </style>
    
    <style type="text/css">
    <!--
    a { text-decoration : none; color : #000; }
    </style>
    <bgsound src="#" id="soundeffect" loop=1 autostart="true" />
    
    
    
    
    
    
    
    
    
    <script type="text/javascript">
    
    /***********************************************
    * JavaScript Sound effect-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Aerobic mean.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What are Anabolic Steroids.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Anorexia mean.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What is a Balanced Diet.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Blood Pressure mean.mp3" //path to sound file, or pass in filename directly into playsound()
    
    
    var soundfile="http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/What does Cardiac Output mean.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What are Diuretics.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What is an Endomorph.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Exercise mean.mp3" //path to sound file, or pass in filename directly into playsound()
    
    
    
    
    function playsound(soundfile){
    if (document.all && document.getElementById){
    document.getElementById("soundeffect").src="" //reset first in case of problems
    document.getElementById("soundeffect").src=soundfile
    }
    }
    
    function bindsound(tag, soundfile, masterElement){
    if (!window.event) return
    var source=event.srcElement
    while (source!=masterElement && source.tagName!="HTML"){
    if (source.tagName==tag.toUpperCase()){
    playsound(soundfile)
    break
    }
    source=source.parentElement
    }
    }
    
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>PE Pocasts</title>
    
    
    
    
    </head>
    
    <body>
    
    
    <div id="pop1" class="caption" style="top:-60px; left:10px; background-Color:#DF01D7;" >What does Aerobic mean?</div>
    <div id="pop2" class="caption" style="top:-60px; left:10px; background-Color:#00FF80;" >What are Anabolic Steroids?</div>
    <div id="pop3" class="caption" style="top:-60px; left:-100px; background-Color:#F5A9F2;" >What does Anorexia mean?</div>
    <div id="pop4" class="caption" style="top:-60px; left:-100px; background-Color:#9A2EFE;" >What is a Balanced Diet?</div>
    <div id="pop5" class="caption" style="top:-60px; left:-100px; background-Color:#01DFD7;" >What does Blood Pressure mean?</div>
    <div id="pop6" class="caption" style="top:-60px; left:-100px; background-Color:#DF013A;" >What does Cardiac Output mean?</div>
    <div id="pop7" class="caption" style="top:-60px; left:-100px; background-Color:#D7DF01;" >What are Diuretics?</div>
    <div id="pop8" class="caption" style="top:-60px; left:-100px; background-Color:#0080FF;" >What is an Endomorph?</div>
    <div id="pop9" class="caption" style="top:-60px; left:-100px; background-Color:#FF4000;" >What does Exercise mean?</div>
    <table width="300" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="75" align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
        <td width="100" align="center" valign="middle">
        
        
    
    
        
        
        
        
        <img src="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/aerobic.jpg" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/What does Aerobic mean.mp3')" class="zxcCaptionOvelay:pop1 FadeIn:100 Speed:1000" />
        
        
        
        
        
        
        </td>
        <td width="100" align="center" valign="middle">
        
    
        
        
        <img src="http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/steroids.jpg" alt="" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What are Anabolic Steroids.mp3')" class="zxcCaptionOvelay:pop2 FadeIn:100 Speed:1000" /></td>
        <td width="100" align="center" valign="middle"><img src="http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/anorexia.jpg" alt="" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Anorexia mean.mp3')" class="zxcCaptionOvelay:pop3 FadeIn:100 Speed:1000" /></td>
      </tr>
    </table>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Caption Ovelay (23-April-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcCaptionOvelay={
    
     init:function(op){
      op=typeof(op)=='object'?op:{};
      var clds=document.getElementsByTagName('IMG'),obj,o,s,i,f,z0=0;
      for (;z0<clds.length;z0++){
       s=clds[z0].className;
       if (s&&(s).match('zxcCaptionOvelay:')){
        s=s.split(' ');
        o={lk:clds[z0]};
        for (z0a=0;z0a<s.length;z0a++){
         i=s[z0a].indexOf(':');
         if (i>3){
          o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
         }
        }
        o.obj=document.getElementById(o.zxccaptionovelay);
        if (o.obj){
         f=o.fadein;
         s=o.speed;
         o.osx=o.obj.offsetLeft;
         o.osy=o.obj.offsetTop;
         o.iw=o.lk.offsetWidth;
         o.ih=o.lk.offsetHeight;
         o.ud=false;
         o.f=[o.obj,0,isFinite(f*1)&&f>10?f*1:50,0];
         o.ms=o.static!='true'&&isFinite(s*1)&&s>20?s*1:50;
         o.static!='true'?this.addevt(document,'mousemove','move',o):this.addevt(document,'resize','caption',o);
         this.caption(o,o.static=='true');
        }
       }
      }
     },
    
     move:function(o,e){
      var p=this.pos(o.lk),xy=e?this.mse(e):o.xy,x=xy[0],y=xy[1];
      ud=x>p[0]&&x<p[0]+o.lk.offsetWidth&&y>p[1]&&y<p[1]+o.lk.offsetHeight;
      if (ud!=o.ud){
       this.caption(o,ud);
      }
      o.ud=ud;
     },
    
     caption:function(o,ud){
      var p=this.pos(o.lk);
      o.obj.style.left=p[0]+o.osx+'px';
      o.obj.style.top=p[1]+o.osy+'px';
      o.obj.style.visibility='visible';
      this.animate(o,o.f,o.f[3],o.f[ud?2:1],new Date(),o.ms);
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       oop.opc(a[0],n);
       a[3]=n;
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       oop.opc(a[0],t);
       t==0?a[0].style.visibility='hidden':null;
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     mse:function(e){
      if (window.event){
       var s=[document.body.scrollLeft,document.body.scrollTop];
       if (!s[1]){
        s=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+s[0],e.clientY+s[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
      }
     }
    
    
    }
    
    zxcCaptionOvelay.init();
    /*]]>*/
    </script>
    </body>
    </html>
    Last edited by james438; 06-14-2014 at 04:53 AM. Reason: fixed code format

  4. #24
    Join Date
    Oct 2012
    Location
    England
    Posts
    97
    Thanks
    26
    Thanked 2 Times in 1 Post

    Default

    Code:
    <html>
    <head>
    <style type="text/css">
    /*<![CDATA[*/
    
    .caption {
    	position:absolute;
    	z-Index:101;
    	visibility:hidden;
    	left:20px;
    	top:20px;
    	height:25px;
    	width:400px;
    	background-Color:#66CC99;
    	text-Align:center;
    	font-Size:20px;
    }
    
    /*]]>*/
    </style>
    
    <style type="text/css">
    <!--
    a { text-decoration : none; color : #000; }
    </style>
    <bgsound src="#" id="soundeffect" loop=1 autostart="true" />
    
    
    
    
    
    
    
    
    
    <script type="text/javascript">
    
    /***********************************************
    * JavaScript Sound effect-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Aerobic mean.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What are Anabolic Steroids.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Anorexia mean.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What is a Balanced Diet.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Blood Pressure mean.mp3" //path to sound file, or pass in filename directly into playsound()
    
    
    var soundfile="http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/What does Cardiac Output mean.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What are Diuretics.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What is an Endomorph.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Exercise mean.mp3" //path to sound file, or pass in filename directly into playsound()
    
    
    
    
    function playsound(soundfile){
    if (document.all && document.getElementById){
    document.getElementById("soundeffect").src="" //reset first in case of problems
    document.getElementById("soundeffect").src=soundfile
    }
    }
    
    function bindsound(tag, soundfile, masterElement){
    if (!window.event) return
    var source=event.srcElement
    while (source!=masterElement && source.tagName!="HTML"){
    if (source.tagName==tag.toUpperCase()){
    playsound(soundfile)
    break
    }
    source=source.parentElement
    }
    }
    
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>PE Pocasts</title>
    
    
    
    
    </head>
    
    <body>
    
    
    <div id="pop1" class="caption" style="top:-60px; left:10px; background-Color:#DF01D7;" >What does Aerobic mean?</div>
    <div id="pop2" class="caption" style="top:-60px; left:10px; background-Color:#00FF80;" >What are Anabolic Steroids?</div>
    <div id="pop3" class="caption" style="top:-60px; left:-100px; background-Color:#F5A9F2;" >What does Anorexia mean?</div>
    <div id="pop4" class="caption" style="top:-60px; left:-100px; background-Color:#9A2EFE;" >What is a Balanced Diet?</div>
    <div id="pop5" class="caption" style="top:-60px; left:-100px; background-Color:#01DFD7;" >What does Blood Pressure mean?</div>
    <div id="pop6" class="caption" style="top:-60px; left:-100px; background-Color:#DF013A;" >What does Cardiac Output mean?</div>
    <div id="pop7" class="caption" style="top:-60px; left:-100px; background-Color:#D7DF01;" >What are Diuretics?</div>
    <div id="pop8" class="caption" style="top:-60px; left:-100px; background-Color:#0080FF;" >What is an Endomorph?</div>
    <div id="pop9" class="caption" style="top:-60px; left:-100px; background-Color:#FF4000;" >What does Exercise mean?</div>
    <table width="300" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="75" align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
        <td width="100" align="center" valign="middle">
        
        
    
    
        
        
        
        
        <img src="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/aerobic.jpg" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/What does Aerobic mean.mp3')" class="zxcCaptionOvelay:pop1 FadeIn:100 Speed:1000" />
        
        
        
        
        
        
        </td>
        <td width="100" align="center" valign="middle">
        
    
        
        
        <img src="http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/steroids.jpg" alt="" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What are Anabolic Steroids.mp3')" class="zxcCaptionOvelay:pop2 FadeIn:100 Speed:1000" /></td>
        <td width="100" align="center" valign="middle"><img src="http://www.bigwood.nottingham.sch.uk//wp-content/uploads/2014/PE/anorexia.jpg" alt="" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/What does Anorexia mean.mp3')" class="zxcCaptionOvelay:pop3 FadeIn:100 Speed:1000" /></td>
      </tr>
    </table>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Caption Ovelay (23-April-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcCaptionOvelay={
    
     init:function(op){
      op=typeof(op)=='object'?op:{};
      var clds=document.getElementsByTagName('IMG'),obj,o,s,i,f,z0=0;
      for (;z0<clds.length;z0++){
       s=clds[z0].className;
       if (s&&(s).match('zxcCaptionOvelay:')){
        s=s.split(' ');
        o={lk:clds[z0]};
        for (z0a=0;z0a<s.length;z0a++){
         i=s[z0a].indexOf(':');
         if (i>3){
          o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
         }
        }
        o.obj=document.getElementById(o.zxccaptionovelay);
        if (o.obj){
         f=o.fadein;
         s=o.speed;
         o.osx=o.obj.offsetLeft;
         o.osy=o.obj.offsetTop;
         o.iw=o.lk.offsetWidth;
         o.ih=o.lk.offsetHeight;
         o.ud=false;
         o.f=[o.obj,0,isFinite(f*1)&&f>10?f*1:50,0];
         o.ms=o.static!='true'&&isFinite(s*1)&&s>20?s*1:50;
         o.static!='true'?this.addevt(document,'mousemove','move',o):this.addevt(document,'resize','caption',o);
         this.caption(o,o.static=='true');
        }
       }
      }
     },
    
     move:function(o,e){
      var p=this.pos(o.lk),xy=e?this.mse(e):o.xy,x=xy[0],y=xy[1];
      ud=x>p[0]&&x<p[0]+o.lk.offsetWidth&&y>p[1]&&y<p[1]+o.lk.offsetHeight;
      if (ud!=o.ud){
       this.caption(o,ud);
      }
      o.ud=ud;
     },
    
     caption:function(o,ud){
      var p=this.pos(o.lk);
      o.obj.style.left=p[0]+o.osx+'px';
      o.obj.style.top=p[1]+o.osy+'px';
      o.obj.style.visibility='visible';
      this.animate(o,o.f,o.f[3],o.f[ud?2:1],new Date(),o.ms);
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       oop.opc(a[0],n);
       a[3]=n;
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       oop.opc(a[0],t);
       t==0?a[0].style.visibility='hidden':null;
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     mse:function(e){
      if (window.event){
       var s=[document.body.scrollLeft,document.body.scrollTop];
       if (!s[1]){
        s=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+s[0],e.clientY+s[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
      }
     }
    
    
    }
    
    zxcCaptionOvelay.init();
    /*]]>*/
    </script>
    </body>
    </html>

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

  5. #25
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,772
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    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/

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

    Jay Dog (06-16-2014)

  7. #26
    Join Date
    Oct 2012
    Location
    England
    Posts
    97
    Thanks
    26
    Thanked 2 Times in 1 Post

    Default

    Hi,

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

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

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

    Code:
    <html>
    <head>
    <style type="text/css">
    /*<![CDATA[*/
    
    .caption {
    	position:absolute;
    	z-Index:101;
    	visibility:hidden;
    	left:20px;
    	top:20px;
    	height:50px;
    	width:400px;
    	background-Color:#66CC99;
    	text-Align:left;
    	font-Size:16px;
    }
    
    /*]]>*/
    </style>
    
    <style type="text/css">
    <!--
    a { text-decoration : none; color : #000; }
    </style>
    <bgsound src="#" id="soundeffect" loop=1 autostart="true" />
    
    
    
    
    
    
    
    
    
    <script type="text/javascript">
    
    /***********************************************
    * JavaScript Sound effect-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/laser.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/boing.mp3" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/boing.ogg" //path to sound file, or pass in filename directly into playsound()
    
    var soundfile="http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/laser.ogg" //path to sound file, or pass in filename directly into playsound()
    
    
    
    function playsound(soundfile){
    if (document.all && document.getElementById){
    document.getElementById("soundeffect").src="" //reset first in case of problems
    document.getElementById("soundeffect").src=soundfile
    }
    }
    
    function bindsound(tag, soundfile, masterElement){
    if (!window.event) return
    var source=event.srcElement
    while (source!=masterElement && source.tagName!="HTML"){
    if (source.tagName==tag.toUpperCase()){
    playsound(soundfile)
    break
    }
    source=source.parentElement
    }
    }
    
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>PE Pocasts</title>
    
    
    
    
    </head>
    
    <body>
    
    
    <div id="pop1" class="caption" style="top:-60px; left:10px; background-Color:#ffffff;" >LIME</div> 
    <div id="pop2" class="caption" style="top:-60px; left:10px; background-Color:#ffffff;" >PINK</div>
    
    
    
    
    <table width="918" height="110" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="10%" rowspan="2" align="center" valign="middle">&nbsp;</td>
        <td width="30%" rowspan="2" align="left" valign="middle"><strong><font size=6>Section 1.1.1</font></strong></td>
        <td width="45%" height="75" rowspan="2" align="left" valign="middle">&nbsp;<a name="anchor" id="anchor" ><span style="font-size:16px">Roll over each icon and click to hear the PE podcasts</span></a></td>
        <td width="15%" align="center" valign="middle"><img src="http://www.bigwood.nottingham.sch.uk/uploads/muteicon.png" alt="" width="30" height="30" onClick="playsound('')"></td>
      </tr>
      <tr>
        <td align="center" valign="middle">mute sound</td>
      </tr>
    </table>
    <table width="918" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="100">&nbsp;</td>
        <td width="100">&nbsp;</td>
        <td width="265">&nbsp;</td>
      </tr>
      <tr>
        <td height="102" align="center" valign="middle"><img src="http://www.bigwood.nottingham.sch.uk/uploads/lime.jpg" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/laser.mp3')" class="zxcCaptionOvelay:pop1 FadeIn:100 Speed:400" /></td>
        <td align="center" valign="middle"><img src="http://www.bigwood.nottingham.sch.uk/uploads/pink.jpg" alt="" width="100" height="100" onClick="playsound('http://www.bigwood.nottingham.sch.uk/wp-content/uploads/2014/PE/boing.mp3')" class="zxcCaptionOvelay:pop2 FadeIn:100 Speed:400" /></td>
        <td align="center" valign="middle">&nbsp;<a id="anchor" ><span style="font-size:16px">Roll over each icon and click to hear the PE podcasts</span></a></td>
      </tr>
    </table>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Caption Ovelay (23-April-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcCaptionOvelay={
    
     init:function(op){
      op=typeof(op)=='object'?op:{};
      var clds=document.getElementsByTagName('IMG'),obj,o,s,i,f,z0=0;
      for (;z0<clds.length;z0++){
       s=clds[z0].className;
       if (s&&(s).match('zxcCaptionOvelay:')){
        s=s.split(' ');
        o={lk:clds[z0],a:document.getElementById(op.Anchor)};
        for (z0a=0;z0a<s.length;z0a++){
         i=s[z0a].indexOf(':');
         if (i>3){
          o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
         }
        }
        o.obj=document.getElementById(o.zxccaptionovelay);
        if (o.obj){
         f=o.fadein;
         s=o.speed;
         o.osx=o.obj.offsetLeft;
         o.osy=o.obj.offsetTop;
         o.iw=o.lk.offsetWidth;
         o.ih=o.lk.offsetHeight;
         o.ud=false;
         o.f=[o.obj,0,isFinite(f*1)&&f>10?f*1:50,0];
         o.ms=o.static!='true'&&isFinite(s*1)&&s>20?s*1:50;
         o.static!='true'?this.addevt(document,'mousemove','move',o):this.addevt(document,'resize','caption',o);
         this.caption(o,o.static=='true');
        }
       }
      }
     },
    
     move:function(o,e){
      var p=this.pos(o.lk),xy=e?this.mse(e):o.xy,x=xy[0],y=xy[1];
      ud=x>p[0]&&x<p[0]+o.lk.offsetWidth&&y>p[1]&&y<p[1]+o.lk.offsetHeight;
      if (ud!=o.ud){
       this.caption(o,ud);
      }
      o.ud=ud;
     },
    
     caption:function(o,ud){
      var p=this.pos(o.a||o.lk);
      o.obj.style.left=p[0]+(o.a?(o.a.offsetWidth-o.obj.offsetWidth)/2:o.osx)+'px';
      o.obj.style.top=p[1]+(o.a?(o.a.offsetHeight-o.obj.offsetHeight)/2:o.osy)+'px';
      o.obj.style.visibility='visible';
      this.animate(o,o.f,o.f[3],o.f[ud?2:1],new Date(),o.ms);
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       oop.opc(a[0],n);
       a[3]=n;
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       oop.opc(a[0],t);
       t==0?a[0].style.visibility='hidden':null;
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     mse:function(e){
      if (window.event){
       var s=[document.body.scrollLeft,document.body.scrollTop];
       if (!s[1]){
        s=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+s[0],e.clientY+s[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
      }
     }
    
    
    }
    
    zxcCaptionOvelay.init({
     Anchor:'anchor'
    });
    /*]]>*/
    </script>
    </body>
    </html>

  8. #27
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,772
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

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

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

    Jay Dog (07-03-2014)

  10. #28
    Join Date
    Oct 2012
    Location
    England
    Posts
    97
    Thanks
    26
    Thanked 2 Times in 1 Post

    Default

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

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, 06:33 PM
  4. Text appears when clicking on image
    By aps in forum JavaScript
    Replies: 4
    Last Post: 03-17-2006, 03:07 AM
  5. Mouse over text, image appears
    By snowangel in forum Graphics
    Replies: 2
    Last Post: 02-07-2006, 05: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
  •