Roll over image and text appears

**Jay Dog** · 04-23-2013, 12:28 PM

Hi,

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

http://news.sky.com/story/1081184/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.

**vwphillips** · 04-23-2013, 02:00 PM

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>

**Jay Dog** · 04-24-2013, 12:18 PM

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

Again many thanks.

**Jay Dog** · 04-24-2013, 12:23 PM

Hi, done it...

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

**vwphillips** · 04-24-2013, 03:06 PM

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

**questions** · 05-23-2013, 10:45 PM

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

**Jay Dog** · 12-30-2013, 11:38 AM

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

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

Thanks,

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>

**vwphillips** · 12-30-2013, 03:47 PM

Hav you use Image Maps?

**Jay Dog** · 12-30-2013, 05:18 PM

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

Thanks