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

Thread: Description panel for image on mouse roll over

  1. #1
    Join Date
    Jan 2010
    Posts
    17
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default Description panel for image on mouse roll over

    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

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Just use one image in the slideshow. Also - it slides in, do you want it to fade in?
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    seemoo (01-22-2010)

  4. #3
    Join Date
    Jan 2010
    Posts
    17
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #4
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

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

    To copy and paste the code, scroll down to the text box.
    Last edited by Nile; 01-21-2010 at 03:31 AM.
    Jeremy | jfein.net

  6. The Following User Says Thank You to Nile For This Useful Post:

    seemoo (01-21-2010)

  7. #5
    Join Date
    Jan 2010
    Posts
    17
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #6
    Join Date
    Jan 2010
    Posts
    17
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #7
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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:
    Code:
    <div class="slide" id="slide">
    So in the CSS, I'd do:
    Code:
    #slide {
      width: blah !important;
      height: blah !important;
    }
    To give the text more padding, here:
    Code:
          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.
    Jeremy | jfein.net

  10. The Following User Says Thank You to Nile For This Useful Post:

    seemoo (01-22-2010)

  11. #8
    Join Date
    Jan 2010
    Posts
    17
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    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.

  12. #9
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Try:
    HTML Code:
        <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>
    Jeremy | jfein.net

  13. The Following User Says Thank You to Nile For This Useful Post:

    seemoo (01-22-2010)

  14. #10
    Join Date
    Jan 2010
    Posts
    17
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

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

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
  •