Printable View
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.
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>
That's great, thanks, is there a way to alter the opacity of the divs though?
Again many thanks.:)
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;
},
change the value in redCode:<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" />
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;
}