Un interesante manual publicado en woork que nos ayuda a incluir mensajes en los formularios que se mostrarán automáticamente al usuario cuando haga foco en él. Todo ello gracias a la librería javascript, Scriptaculous.
1. Inclur Scriptaculous.
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
2. El código HTML.
Incluimos un input, o varios, y un div con display:none;. Tal y como está abajo:
<input id="msgstatus" type="hidden" value="0" />
<div class="msg" id="msg1" style="display:none;">
...some html code here...
<a href="#" onClick="javascript:hideMsg(1)"> Close </a>
<div/>
<input type="text" name="email" id="email" onfocus="javascript:showMsg(2)"/>
<input id="msgstatus" type="hidden" value="0" />
<div class="msg" id="msg2" style="display:none;">
...some html code here...
<a href="#" onClick="javascript:hideMsg(2)"> Close </a>
<div/>
3. Las funciones JavaScript.
Tenemos que incluir las funciones javascript, dos, una para mostrar el mensaje y otra para ocultarlo al hacer clic en Close.
function showMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById('msgstatus');
if(statusMenu.value==0){
statusMenu.value=1;
Effect.toggle('msg'+idEl, 'appear'); return false;
}
}
function hideMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById('msgstatus');
if(statusMenu.value==1){
statusMenu.value=0;
Effect.toggle('msg'+idEl, 'appear'); return false;
}
}</script>
También esta disponible para descargar en woork.
Ummm… creo que el se podia simplificar bastante el código HTML y hacerlo más accesible. Y tambíen el codigo JavaScript se puede reducir bastante teniendo en cuenta que se está utilizando Prototype.
El ejemplo que pone Oli en la entrada original está mucho mejor bajo mi punto de vista.
Salu2