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/dynamici...nslideshow.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