MANUAL
DE PHP. Parte 2. Nuestro proyecto/Adiciones a la primera página
Cuando hacemos lo que nos gusta, en realidad el trabajo
es diversión.
Lo anterior se debe a que, tal y como lo prometimos,
en esta lección agregaremos un poco de código JavaScript
para que nuestros botones adquieran un poquito de dinamismo.
Lo único que debemos tener en cuenta es que
debemos tener un par de cada botón, es decir, dos botones de
agregar, dos botones de modificar, dos de seleccionar y dos de borrar.
Por supuesto que, como ya dijimos antes, el tipo de
“botones” o imágenes serán las que mejor les
parezcan y las que logren desarrollar en un editor de imágenes
cualquiera.
La diferencia entre uno y otro es sencilla, observen
por favor dos pares de botones:
Como verán la diferencia es sutil pero notoria (al mejor estilo
de los comentarios snobs, ¿no les parece?, “fuerte pero
sutil”, “suave pero con carácter”) La intención
ha sido que el usuario sepa con toda la certeza del mundo que existen
botones a los que puede acceder.
Ahora bien, cómo creamos esa sensación
de “activar” o “desactivar” un botón
cuando lo presionamos, hay una forma relativamente sencilla escribiendo
algunas líneas de código JavaScript.
Veamos y luego expliquemos el código ¿de
acuerdo?
<HTML>
<HEAD>
<TITLE>SELECTOR</TITLE>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function MM_preloadImages()
{ //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;
i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n,
d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage()
{ //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;
x.src=a[i+2];}
}
//-->
</script>
</HEAD>
<BODY BACKGROUND = "bg.jpg" onLoad="MM_preloadImages('con_agentes_press.jpg','inserta_agente_press.jpg','modifica_agentes_press.jpg','borra_agentes_press.jpg')"
HEIGHT = 100% WIDTH = 100%><FONT FACE = "verdana" color
= "#00FFAA"> <CENTER>
<H1>Por favor seleccione lo que desea hacer</H1>
</FORM>
<div align="center">
<p><a href="http://localhost/work/Consulta_agentes/consulta_agente.html"
onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','con_agentes_press.jpg',1)"><img
src="con_agentes_npress.jpg" alt="Consultar datos de
agente" name="Image1" width="445" height="110"
border="0"></a></p>
<p><a href="http://localhost/work/Consulta_agentes/main_consultas.html"
onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','inserta_agente_press.jpg',1)"><img
src="inserta_agente_npress.jpg" alt="Insertar datos de
agente" name="Image2" width="444" height="109"
border="0"></a>
</p>
<p><a href="http://localhost/work/Consulta_agentes/modifica_agente.htm"
onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','modifica_agentes_press.jpg',1)"><img
src="modifica_agentes_npress.jpg" alt="Modificar datos
de agente" name="Image3" width="444" height="110"
border="0"></a>
</p>
<p> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image4','','borra_agentes_press.jpg',1)"><img
src="borra_agentes_npress.jpg" name="Image4" width="444"
height="110" border="0"></a>
</p>
</div>
</BODY>
</HTML>
Lo que hemos hecho es crear algunas funciones JavaScript que le dicen
al navegador de internet que haga un cambio (swap) de símbolos
una vez que el ratón se pose sobre el botón (con la función
onMouseOver). Claro está no es necesario que comprendan la totalidad
del código, sobre todo por no ser este un curso de JavaScript,
así que simplemente observen el resultado que nos da:
[Objeto Flash Eliminado]
Lo único que resta por explicar es, en realidad
una disculpa por dos cosas, la primera es por el código del vídeo,
el que hemos hecho en JavaScript está demasiado oscuro para ser
visto, sin embargo es el mismo que tenemos en esta página, la
razón es simplemente el formato que le hemos querido dar a nuestro
editor de texto, a ustedes no necesariamente se los tiene que desplegar
así; en segundo lugar, la siguiente disculpa es por hacer esta
página tan industrialmente grande, pero era necesario para incluir
todo el código necesario. Hasta Pronto
