Page 1 of 3 123 LastLast
Results 1 to 10 of 28

Thread: Roll over image and text appears

  1. #1
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default Roll over image and text appears

    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/bo...n-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.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 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[*/
    
    .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>
    Last edited by vwphillips; 04-23-2013 at 02:16 PM. Reason: added the static requirement
    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. The Following User Says Thank You to vwphillips For This Useful Post:

    Jay Dog (04-24-2013)

  4. #3
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

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

    Again many thanks.

  5. #4
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

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

  6. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

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

  7. #6
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    This might be simpler:

    Code:
            <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;
    			}

  8. #7
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    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,


    HTML 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[*/
    
    .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>

  9. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Hav you use Image Maps?
    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/

  10. #9
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    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

  11. #10
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    post your image map for the image and I will use it for the script
    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/

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
  •