Advanced Search

Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 21

Thread: Description panel for image on mouse roll over

  1. #11
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

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

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

    seemoo (01-21-2010)

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

    Default

    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

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

    Default

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

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

    thanks

  5. #14
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    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:
    Code:
    <div id="info1" class="info" style="bottom: -50px">
    Notice the bolded unerlined italic red text.
    And then in the CSS
    Code:
    #info1 {
      opacity: .1
    }
    Jeremy | jfein.net

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

    seemoo (01-22-2010)

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

    Default

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

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

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

  8. #16
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    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:
    Code:
    background-color: transparent;
    And remove the opacity level. This way the text will be bright.
    Jeremy | jfein.net

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

    seemoo (01-22-2010)

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

    Default

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

    Thanks again so much for all your help.

  11. #18
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Credit to "DragoNero" for helping me with this, use as your javacript:
    Code:
    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);
      };
    }
    Jeremy | jfein.net

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

    seemoo (01-22-2010)

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

    Default

    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.

  14. #20
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    Did this yesterday but for some reason did not post it

    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[*/
    .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>
    Last edited by vwphillips; 01-22-2010 at 01:55 PM. Reason: tweek & another example
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  15. The Following User Says Thank You to vwphillips For This Useful Post:

    seemoo (01-22-2010)

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
  •