Description panel for image on mouse roll over

[seemoo]

Hi

I'm looking for a clean simple description panel fading in when I roll over an image.

The 3rd slide show example shows exactly what I'm looking for: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Basically, I'm looking for this exact effect without the slide show function attached. The image itself wouldn't change but on mouse over the description panel would fade in; just like in the example above.

I'm planing on using that for adding descriptions to multiple images on the same page.

Thanks so much for any help already in advance.

Simon

[Nile]

Just use one image in the slideshow. ;) Also - it slides in, do you want it to fade in?

[seemoo]

Hi Nile,

Thanks a for your quick reply.

I thought of that as well, but there has to be a more elegant solution to this... :-)

I planning on doing this for over 100 images and that just seems to be a lot of "wasted" code.

I'm perfectly happy with the sliding. I don't need it to fade in.

thanks again

[Nile]

This should do it:
http://js.pastebin.com/m5274a239

To copy and paste the code, scroll down to the text box.

[seemoo]

Thanks a lot Nile.

That's exactly what I was looking for.

I will try it in my own site. Maybe I will have to ask you for some additional help again...

Till then thanks again.

simon

[seemoo]

Hi,

I just tested the code in my own file and it works great for the most part.

The main thing that doesn't work is that I am using it for multiple images which do not have the same width and height. If I understand your code correctly, you specify the dimensions of the image at the very beginning and they stay constant. Is there a way it can read the dimensions of an image automatically and feed it in a variable? Or some other way that this script works for multiple images with different width and height?

Also, is there a way to control opacity of the caption font and opacity of the overlay bar separately. Right now it seems they are controlled in one variable.

And a minor thing is, where do I change the position of the text within the bar? I would like some more space above the text...

Thanks so much again for all your help on this.

simon

[Nile]

To make the image size different for each box - give the box an ID, and then modify the ID.
For each page it'd have a different ID depending on size, in the example above, this is the code:


<div class="slide" id="slide">

So in the CSS, I'd do:


#slide {
width: blah !important;
height: blah !important;
}


To give the text more padding, here:


div.slide div.info {
width: 100%;
background: #000;
color: #FFF;
opacity: .7;
font-family: arial;
font-size: 10pt;
min-height: 50px;
position: absolute;
padding-top: 10px;
}

Although I don't know how padding is going to work out - how ever many padding, add more to bottom: blah; (same with height)

Again, to modify the opacity, give the bar an ID and modify indivisually.

[seemoo]

Hi Nile,

Thanks so much for taking the time and helping me with this.

I'm sorry, I can't get it to work... I don't understand the correct syntax for the ID tag.

I created a small test.html with two images (different sizes). If you have a chance I would appreciate it if you could take a look at it and tell me what I am doing wrong. None of sliders work at the moment in the file. You can take a look at the file here:
www.simonchristen.com/test.html

Thanks again for all your help. I will pay it forward with something I am more familiar with than coding.

[Nile]

Try:

<div class="slide" id="slide1">
<img src="http://www.simonchristen.com/images/cityscape/cityscape_003.jpg" />
<div class="info" style="bottom: -22px">
&nbsp; Rainy night on the pier in San Francisco
</div>
</div>
<script type="text/javascript">
information_display("slide1");
</script>
<p>

<div class="slide" id="slide2">
<img src="http://www.simonchristen.com/images/landscape/landscape_001.jpg" />
<div class="info" style="bottom: -22px">
&nbsp; Fog on Mt. Tam
</div>
</div>
<script type="text/javascript">
information_display("slide2");
</script>

[seemoo]

Hi,
I still can't get it to work... The text just shows up underneath the image.You can take a look here: www.simonchristen.com/test.html

I don't think my syntax in the first part is correct. Here is the 1st part from the test.html file:

<style type="text/css">
div.slide #slide1 {
width: 950px !important;
height: 288px !important;
position: relative;
overflow: hidden;

div.slide #slide2 {
width: 950px !important;
height: 513px !important;
position: relative;
overflow: hidden;
}

div.slide div.info {
width: 100%;
background: #000;
color: #FFF;
opacity: 0.5;
font-family: verdana;
font-size: 11px;
min-height: 20px;
position: absolute;
padding-top: 2px;
}
</style>

Also, I don't understand where exaclty I would enter the opacity difference for bar and text. I would like the text to be a 100% opaque and the bar 50%. That would stay the same for all images...

thanks so much again!

simon

[Nile]

div.slide #slide1 {
width: 950px !important;
height: 288px !important;
position: relative;
overflow: hidden;

div.slide #slide2 {
width: 950px !important;
height: 513px !important;
position: relative;
overflow: hidden;

}


Should be:


div#slide1 {
width: 950px !important;
height: 288px !important;
position: relative;
overflow: hidden;
}

div#slide2 {
width: 950px !important;
height: 513px !important;
position: relative;
overflow: hidden;

}



Once I know that this is working fine - I'll give you the way to do opacity with the bar

[seemoo]

Beautiful! Thanks so much!

One thing I noticed is that when you approach the text slowly (like trying to highlight it), it goes away very quickly and won't come back on a new "roll over" on the image. The text stays hidden unless you reload the page. Is there a way to fix this little bug?

I'm also very curious how the opacity works.

thanks,

simon

[seemoo]

oh, forgot to add the link if you want to try the roll over thing...

http://www.simonchristen.com/test.html

thanks

[Nile]

I'll work on the hover problem once we fix the opacity thing with the info bar. First of all - it's impossible to have completely white text - and a opaque bg. Sorry. :(

As for opacity different for reach one:


<div id="info1" class="info" style="bottom: -50px">

Notice the bolded unerlined italic red text.
And then in the CSS


#info1 {
opacity: .1
}

[seemoo]

So in the CSS part I added the "#info1" part. it looks like this now:


div.slide div.info {
width: 100%;
background: #000;
color: #FFF;
opacity: .1;
font-family: verdana;
font-size: 11px;
min-height: 20px;
position: absolute;
padding-top: 2px;
}

div#info1 {
opacity: .9;
}


The two images look like this:



<div class="slide" id="slide1">
<img src="http://www.simonchristen.com/images/cityscape/cityscape_003.jpg" />
<div id="info1" class="info" style="bottom: -22px">
&nbsp; Rainy night on the pier in San Francisco
</div>
</div>
<script type="text/javascript">
information_display("slide1");
</script>
<p>

<div class="slide" id="slide2">
<img src="http://www.simonchristen.com/images/landscape/landscape_001.jpg" />
<div class="info" style="bottom: -22px">
&nbsp; Fog on Mt. Tam
</div>
</div>
<script type="text/javascript">
information_display("slide2");
</script>


Notice, that only the first image uses the div id="info1" tag.
So sofar it changes the opacity level of text and bar between image1 and image 2. But what I would like it to do is that the opacity from the text is different than the underlaying bar. The text should be as bright as possible where the bar should be around 50%... And this should be the case for all the images...

However, this is really only a minor thing... I'm more concerned with the hover issue.

thanks again

Here is the link to the latest version:
http://www.simonchristen.com/test.html

[Nile]

Again - I can't do anything about the text. Very sorry. As for the hover issue - I am working on it.

-But- If you wanted to get rid of the background completely, add:


background-color: transparent;

And remove the opacity level. This way the text will be bright.

[seemoo]

Oh, I am sorry, I misunderstood about the transparency...

Thanks again so much for all your help.

[Nile]

Credit to "DragoNero" for helping me with this, use as your javacript:

var information_display = function(id, a){
id = document.getElementById(id);
var el = id.getElementsByTagName('div')[0];
a = {
start: el.style.bottom,
hasMouse: false
};
id.onmouseover = function(){
a.hasMouse = true;
var c = setInterval(function(){
if(a.hasMouse && parseInt(el.style.bottom) != 0){
el.style.bottom = parseInt(el.style.bottom) + 1 + "px";
} else{
clearInterval(c);
}
}, 1);
};
id.onmouseout = function(){
a.hasMouse = false;
var c = setInterval(function(){
if(!a.hasMouse && parseInt(el.style.bottom) != parseInt(a.start)){
el.style.bottom = parseInt(el.style.bottom) - 1 + "px";
} else if(parseInt(el.style.bottom) != parseInt(a.start)) {
clearInterval(c);
}
}, 1);
};
}

[seemoo]

Works perfectly...

I will try it later in the actual site, but I am very confident this will work! Awesome!

Thanks so much for all your help. Please also thank DragoNero for me.

[vwphillips]

Did this yesterday but for some reason did not post it


<!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[*/
.panel {
position:relative;overflow:hidden;width:200px;height:150px;border:solid black 1px;
}

.panel IMG {
position:relative;left:0px;top:0px;
}

#tst {
position:absolute;left:0px;top:130px;width:100%;height:20px;background-Color:#FFFFCC;
}

#tst1 {
position:absolute;left:0px;top:130px;width:100%;height:20px;background-Color:#FFFFCC;
}

#tst2 {
position:absolute;left:0px;top:50px;width:20;height:20px;
}

/*]]>*/
</style>
</head>

<body>
<div class="panel" >
<div id="tst" >Some Words</div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
</div>
<div class="panel" >
<div id="tst1" >Some Words</div>
<img id="tst2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
</div>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

<script type="text/javascript">
/*<![CDATA[*/

function ImagePanel(o){
var panel=document.getElementById(o.ID);
if (panel){
var p=panel.parentNode,img=p.getElementsByTagName('IMG')[0];
if (img&&panel){
this.oop=new zxcAnimate(o.Mode,panel,o.MouseOut);
this.over=o.MouseOver;
this.oop.out=o.MouseOut
this.oop.Complete=function(){
if (this.data[0]==this.out){
this.obj.style.zIndex='0';
}
}
this.ms=o.Duration||1000;
img.style.zIndex='1';
panel.style.zIndex='0';
this.addevt(p,'mouseover','Mse');
this.addevt(p,'mouseout','Mse');
}
}
}

ImagePanel.prototype.Mse=function(e){
this.oop.obj.style.zIndex='2';
this.oop.animate(this.oop.data[0],e.type=='mouseover'?this.over:this.oop.out,this.ms);
}

ImagePanel.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}


new ImagePanel({
ID:'tst', // the unique id name of the sliding panel. (string)
Mode:'opacity', // the mode, 'opacity', 'left' or 'top'. (string)
MouseOut:0, // the mouseout position or opacity. (digits)
MouseOver:100, // the mouseover position or opacity. (digits)
Duration:1000 // (optional) the effect duation in milli seconds. (digits, default 1000)
});

new ImagePanel({
ID:'tst1',
Mode:'opacity',
MouseOut:0,
MouseOver:100,
Duration:1000
});

new ImagePanel({
ID:'tst1',
Mode:'top',
MouseOut:0,
MouseOver:130,
Duration:1000
});

new ImagePanel({
ID:'tst2',
Mode:'left',
MouseOut:-22,
MouseOver:90,
Duration:1000
});
/*]]>*/
</script>
</body>

</html>

[seemoo]

vwphillips, thank you so much for your code as well.

simon