| Para la Web |
|
por Alexander Trejo |
| Para la Web |
|
por Alexander Trejo |
Para lograr este efecto, debemos utilizar al siguiente código en donde queremos colocar la imagen que representará el botón Back:
<A HREF= # onClick="javaScript:history.back()">
<IMG SRC="BotonVolver.gif" BORDER=0>
</A>
Donde "BotonVolver.gif" representa la imagen que utilizaremos para representar nuestro botón Back. Debido a que el comando IMG no reconoce el evento onClick es necesario utilizar el comando A HREF para que al hacer click sobre el botón, ejecutemos la acción de volver.
Puedes probar el tip con el botón que aparece a continuación:
Escoje una sección a visitar:
En vez de algo como http://www.otrolink.com/pagina.htm en la barra de estado, obtienes un mensaje más representativo. Para hacer aparecer estos mensajes en la barra de estado debes de incluir la siguiente función JavaScript en la sección HEAD de tú página:
<SCRIPT LANGUAGE="JavaScript">
function StatusMessg(text)
{
window.status = text;
setTimeout ("window.status=''",2000);
}
</SCRIPT>
<A HREF="otraPagina.htm"
onMouseOver="StatusMessg('Mensaje para la barra de estado')">
<IMG SRC="imagen1.gif" BORDER=0>
</A>
Donde otraPagina.htm es el URL a donde se hará el link, y Messaje para la barra de estado es el texto que aparecerá en la barra.
Entrando en materia, seguro han visto en muchas páginas Web, imágenes (sobre todo botones) que cambian al colocar el puntero del ratón sobre ellas. Como por ejemplo, los siguientes botones:
Escoje una sección a visitar:
En este tip, veremos un método de hacer esto con JavaScript. Expliquemos el método para un botón. Lo primero que necesitamos son las imágenes: una para cuando el botón no tiene el foco y otra imagen para cuando el puntero esta sobre el botón. Digamos que imagen1.gif es la imagen cuando no tiene el foco, e imagen2.gif es la imagen cuando si lo tiene. Entonces, el siguiente paso es precargar las imágenes. Para hacer esto coloque las siguientes instrucciones en la sección HEAD de su documento:
<SCRIPT LANGUAGE="JavaScript">
if (document.images)
{
img1=new Image();
img1.src="imagen1.gif";
img2=new Image();
img2.src="imagen2.gif";
}
</SCRIPT>
Al momento de definir los botones en el documento HTML, debe hacerse de la siguiente manera:
<A HREF="otraPagina.htm" onMouseOver="if (document.images)
MiImagen.src=img2.src"
onMouseOut ="if (document.images)
MiImagen.src=img1.src">
<IMG SRC="imagen1.gif" NAME="MiImagen" BORDER=0>
</A>
Donde otraPagina.htm es el URL a donde se hará el link. Las instrucciones if (document.images) que aparecen en el código, es para evitar errores en los browsers que no soportan el objeto images.
Para detectar el navegador utilice la siguiente función:
function TipoDeNavegador()
{
var navegador=navigator.appName;
return navegador;
}
Para detectar la versión, utilice la siguiente función:
function VerDeNavegador()
{
var version=navigator.appVersion;
return version;
}
Utilizando los valores que regresan estas funciones y comandos if
se puede controlar el flujo del código según el navegador que se esta
usando.
Por cierto, usted esta utilizando
<SCRIPT LANGUAGE="JavaScript">
function CambiarURL(form)
{
if (form.choice[0].checked)
location.href="http://www.xxx";
else if (form.choice[1].checked)
location.href="http://www.yyy";
else if (form.choice[2].checked)
location.href="http://www.zzz";
}
</SCRIPT>
Donde http://www.xxx , http://www.yyy y http://www.zzz serán
las direcciones a las cuales se hará el link. Y debe haber tantos
else if como links a ser definidos.
En la sección de la página web donde se quiera mostrar los botones "Radio" debe incluirse los siguientes comandos HTML:
<FORM NAME="myform">
<INPUT TYPE="RADIO" NAME="choice">Dirección 1
<INPUT TYPE="RADIO" NAME="choice">Dirección 2
<INPUT TYPE="RADIO" NAME="choice">Dirección 3
<INPUT TYPE="BUTTON" VALUE="Aceptar" onClick="CambiarURL(this.form)">
</FORM>
Donde Dirección 1, Dirección 2 y Dirección 3, será la descripción de los links, y debe haber tantas líneas INPUT TYPE="RADIO" ... como links a ser definidos.
Para probar el tip, seleccione una sección de a la cual hacer un link:
A qué sección desea ir?
<SCRIPT LANGUAGE="JavaScript">
function CambiarURL()
{
var loc=document.myform.list.selectedIndex;
if (loc== 0) location.href="http://www.XXX";
else if (loc== 1) location.href="http://www.YYY";
else if (loc== 2) location.href="http://www.ZZZ";
}
</SCRIPT>
Donde http://www.XXX , http://www.YYY y http://www.ZZZ serán
las direcciones a las cuales se hará el link. Y debe haber tantos
else if como links a ser definidos.
En la sección de la página web donde se quiera mostrar el menú desplegable debe incluirse los siguientes comandos HTML:
<FORM NAME="myform">
<SELECT NAME="list" SIZE="1">
<OPTION SELECTED>Dirección 1
<OPTION>Dirección 2
<OPTION>Dirección 3
</SELECT>
<INPUT TYPE="BUTTON" VALUE="Aceptar" onClick="CambiarURL()">
</FORM>
Donde Dirección 1, Dirección 2 y Dirección 3, será la descripción de los links, y debe haber tantos comandos OPTION como links a ser definidos.
Para probar el tip, puede escoger una sección de mi sitio a la cual hacer un link:
Que sección va a visitar?
<SCRIPT LANGUAGE="JavaScript">
var mes = new Array();
mes[0] = "enero";
mes[1] = "febrero";
mes[2] = "marzo";
mes[3] = "abril";
mes[4] = "mayo";
mes[5] = "junio";
mes[6] = "julio";
mes[7] = "agosto";
mes[8] = "septiembre";
mes[9] = "octubre";
mes[10]= "noviembre";
mes[11]= "diciembre";
var hoy = new Date();
var dia = hoy.getDate();
var month = mes[hoy.getMonth()];
var anno = 1900 + hoy.getYear();
var fecha = dia + " de " + month + " de " + anno;
document.write(fecha);
</SCRIPT>
Si quieres saber la fecha de hoy, o saber si este código funciona, puedes hacer click en el botón:
NOTA (para los que hicieron click en el botón): El código que aparece en esta página no mostrará la fecha en un caja de mensaje, lo hará como parte de la página web.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
//La próxima es la variable donde se coloca
//el texto a desplazar en la barra de estado
var texto="Coloque aquí el texto a desplazar";
var ancho = 100;
var pos = -(ancho + 2);
function desplazar()
{
pos++;
// Calcula el texto que va a ser desplazado
var cadena="";
var largo=texto.length;
if (pos==largo)
{
pos=-(ancho + 2);
}
// Si el texto no ha alcanzado el final de la barra
// de estado, se le suman espacios, sino, se borran
// los carácteres que deben salir de la barra.
if (pos<0)
{
for (var i=1;i <= Math.abs(pos);i++)
{
cadena = cadena + " ";
}
cadena=cadena + texto.substring(0,ancho - i + 1);
}
else
{
cadena = cadena + texto.substring(pos,ancho+pos);
}
window.status=cadena;
// Vuelve a llamar a la función en 100 milisegundos
setTimeout("desplazar()",100);
}
</SCRIPT>
</HEAD>
<BODY OnLoad="desplazar()">
Su código HTML va aquí !!
</BODY>
</HTML>