Text revealing

[windranger]

Hi,

I'm looking for a javascript/css code that can do the following, for a click button:

- When mouse is not over the click-button, a text should be displayed at the right of the button, in a bordered textbox - 85% transparency (hardly visible)

(- when mouse hovers over the button, the button image changes to a different one <- I know how to do this)

- When the button is clicked the text shows up normaly (0% transparency)

- When clicking again the button OR anywhere else on the page, the text goes back to 85% transparency.

If have any ideas where I could find such a code please let me know.

Thanks.

[subexpression]

windranger,

If I understand you correctly, this should work for you.

Put this script in the head of your document:

<script type="text/javascript"> 
var revealer = new function(){ 
 var self = this; 
 self.util = { 
  'ddgebid': function(id){ 
   return document.getElementById(id); 
  }, 
  'defined': function(el){ 
   return typeof(el) != 'undefined'; 
  } 
 }; 
 self.event = { 
  'ev': '', 
  'etarget': '', 
  'addevent': function(eventtype,obj,method){ 
   try { 
   if(obj.addEventListener){obj.addEventListener(eventtype,method,true);} 
   else if(obj.attachEvent){obj.attachEvent('on' + eventtype,method);} 
   else {return false;} 
   }catch(err){} 
   return true; 
  }, 
  'targets': function(e){ 
   this.ev = e; 
   if(!e){ 
    this.ev = window.event; 
   } 
   this.etarget = this.ev.target ? this.ev.target : this.ev.srcElement; 
  }, 
  'addonload': function(func){ 
   var oldonload = window.onload; 
   if(typeof window.onload != 'function'){ 
    window.onload = func; 
   } 
   else { 
    window.onload = function(){ 
     oldonload(); 
     func(); 
    } 
   } 
  } 
 }; 
 self.effect = { 
  'opacity': function(el,level){ 
   if(self.util.defined(el)){ 
    var point = '.'; 
    if(level == 0){ 
     point = ''; 
    } 
    if(level < 10){ 
     point = '.0'; 
    } 
    if(level == 100){ 
     point = '1.0'; 
    } 
    el.style.opacity = point + level; 
    el.style.MozOpacity = point + level; 
    el.style.filter = 'alpha(opacity=' + level + ')'; 
   } 
  } 
 }; 
 self.button = { 
  'inputs': [], 
  'flag': false, 
  'min': 25, 
  'max': 100, 
  'load': function(input1,input2){ 
   this.inputs[0] = self.util.ddgebid(input1); 
   this.inputs[1] = self.util.ddgebid(input2); 
   self.effect.opacity(self.button.inputs[1],this.min); 
   self.event.addevent('click',document,this.click); 
  }, 
  'click': function(e){ 
   self.event.targets(e); 
   if(self.event.etarget == self.button.inputs[0] && self.button.flag == false){ 
    self.effect.opacity(self.button.inputs[1],self.button.max); 
    self.button.flag = true; 
   } 
   else if(self.event.etarget == self.button.inputs[0] && self.button.flag == true){ 
    self.effect.opacity(self.button.inputs[1],self.button.min); 
    self.button.flag = false; 
   } 
   else { 
    self.effect.opacity(self.button.inputs[1],self.button.min); 
    self.button.flag = false; 
   } 
  } 
 }; 
} 
revealer.event.addonload( 
 function(){ 
  revealer.button.load('input1','input2'); 
 } 
); 
</script> 

And, here's the button and textbox which goes somewhere in the body:

<input type="button" value="Click" id="input1" />  
<input type="text" value="text goes here" id="input2" style="opacity:25" />