Redireccionar
una página
Sirve para que al entrar en una página web, te lleve a otra sin
que el usuario tenga que pinchar en ningún sitio. Aquí se
explican tres posibles formas de lograrlo. Hay que sustituir redireccion.html
por la página a la que quieras que se redirija. También
puedes usar URLs:
1- Código
(ubicarlo entre las etiquetas <head> y </head>):
<head>
<script languaje="JavaScript">
location.href='redireccion.html';
</script>
</head>
2 - Otro método
puede ser agregando la acción OnLoad dentro del Body:
<BODY onLoad = "parent.location = 'redireccion.html'">
3
- También podemos redireccionar la página a los X segundos
(en esto caso 15):
<META HTTP-EQUIV="Refresh" CONTENT="15;URL=redireccion.html">
|
| |
Scroll
de texto
A través de este script podemos incorporar en nuestra web un scroll
de texto. Como muestra el ejemplo, se pueden incluir enlaces, imágenes,
textos en negrita, en fin, cualquier código html.
Código (ubicarlo donde queramos que aparezca):
<script language="JavaScript1.2">
var marqueewidth=130
var marqueeheight=60
var speed=1
var marqueecontents='<p align="center"> <strong>
<font color="#FF0000"> Bienvenido a mgusta.com </font>
</strong> <br> <br> Esto es un ejemplo de como realizar
un scroll de texto en el que podemos incorporar nuestras noticias sobre
la web. </p>'
if (document.all)
document.write('<marquee direction="up" scrollAmount='+speed+'
style="width:'+marqueewidth+';height:'+marqueeheight+'">
'+marqueecontents+ '</marquee>')
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}
function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write(marqueecontents)
document.cmarquee01.document.cmarquee02.document.close()
thelength= document.cmarquee01.document.cmarquee02.document.height
scrollit()
}
function scrollit(){
if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.top-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.top=marqueeheight
scrollit()
}
}
window.onload=regenerate2
</script>
|
| |
Banners
aleatorios cada x tiempo
Mediante este ejemplo podemos conseguir mostrar banners en forma aleatoria
cada x tiempo (5 segundos en el ejemplo) sin necesidad de tener que actualizar
la página. (http://www.direccion1.com será la página
a la que se redirigirá cuando hagamos click en imagen1.gif)
1º Colocamos el siguiente código entre las etiquetas <head>
y </head>:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var mfBanners = [
['http://www.direccion1.com', 'imagen1.gif'],
['http://www.direccion2.com', 'imagen2.gif']
];
var mfIe = false;
if( document.all) {
mfIe = true;
}
var mfBannerIndex = 0;
function mfBannerChange() {
var htmlString = '<a target="_blank" href="'+mfBanners[mfBannerIndex][0]+'">
<img border="0" src="'+mfBanners[mfBannerIndex][1]+'"></a>';
if( mfIe) {
document.all.banner.innerHTML = htmlString;
}
else {
document.layers["banner"].document.open();
document.layers["banner"].document.write( htmlString);
document.layers["banner"].document.close();
}
if(mfBannerIndex < mfBanners.length - 1)
mfBannerIndex++;
else
mfBannerIndex = 0;
}
setInterval("mfBannerChange()", 5000);
// End -->
</script>
2º Ubicar el
siguiente código donde queramos que aparezcan los banners:
<div id="banner"></div>
|
| |
Crear
un pop-up
Con este ejemplo vamos a crear un pop-up en nuestro sitio. Podemos hacerlo
de dos formas: que se abra en forma automática al iniciar la página,
o simplemente a través de un enlace. Cuando hacemos el enlace (<a
href...) llamamos a la función que hayamos creado anteriormente
y entre paréntesis ponemos la página html que se abrirá
dentro de ese pop-up. Si queremos crear más pop-ups con el mismo
tamaño, basta con indicar en el enlace la misma función
y otra página. Si queremos abrir otro pop-up de otro tamaño,
creamos otra función con sus característics y luego en el
enlace llamamos a esa función. Cambia solamente lo que aparece
en negrita.
1º Abrir un pop-up a través de un enlace:
Colocar el siguiente código entre las etiquetas <head>
y </head>:
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no,location=no, directories=no, status=no,
menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85,
left=140";
window.open(pagina,"",opciones);
}
</script>
Ubicar el siguiente código donde queramos que aparezca el enlace
para abrir el pop-up
<a href="javascript:Abrir_ventana('popup.html')">Click
aquí para abrir la ventana</a>
2º Abrir un
pop-up automáticamente al cargar una página:
Colocar el siguiente código entre las etiquetas <head>
y </head>:
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no,
menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85,
left=140";
window.open(pagina,"",opciones);
}
</script>
Incluir el siguiente código en la etiqueta <body> de forma
que quedará así:
<body onload="Abrir_ventana('popup.html')">
|
| |
Ventana que se agranda lentamente
Debes copiar
el código, modificarlo a tu gusto e insertarlo dentro de las
etiquetas: <body> aqui va el script </body>
<script
LANGUAGE="JavaScript">
function expandingWindow(website) {
var heightspeed = 2; // vertical scrolling speed (higher = slower)
var widthspeed = 7; // horizontal scrolling speed (higher = slower)
var leftdist = 0; // distance to left edge of window
var topdist = 0; // distance to top edge of window
if (document.all) {
var winwidth = window.screen.availWidth - leftdist;
var winheight = window.screen.availHeight - topdist;
var sizer = window.open("","","left="
+ leftdist + ",top=" + topdist +
",width=1,height=1,scrollbars=yes");
for (sizeheight = 1; sizeheight <winheight; sizeheight += heightspeed)
{
sizer.resizeTo("1", sizeheight);
}
for (sizewidth = 1; sizewidth <winwidth; sizewidth += widthspeed)
{
sizer.resizeTo(sizewidth, sizeheight);
}
sizer.location = website;
}
else
window.location = website;
}
</script>
<p><a href="ejemploventana.htm" alt="se expande"
onClick="expandingWindow('ejemploventana.htm');return false;">Click
aquí para ver el efecto</a> |
| |
| Redireccion
en 20.000 milisegundos (20 segundos) a una web
<script
LANGUAGE="JavaScript">
var pagina="http://www.lantest.com.ar/"
function redireccionar()
{
location.href=pagina
}
setTimeout ("redireccionar()", 20000);
</script>
|
| |
| Agregar
a favoritos
El Script
va entre los TAGS <head> y </head>
<SCRIPT
LANGUAGE="JavaScript">
<!--
function addBookmark()
{
if (window.external)
external.AddFavorite("http://www.tuwebaqui.com", "::
eslogan de tu web.com ::")
else
alert("El programa que estas usando para navegar no es compatible
con esta opcion");
}
// -->
</SCRIPT>
Inserta
este código donde quieres que se vea el enlace:
<a
href="#" onclick="addBookmark()">Agregar Favoritos</a>
|
|
| Página
Inicio
<a href="#"
onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.TUPAGINA.com')">
Pagina de Inicio</a> |
| |
| Recomendar
página
<form
name="eMailer">
ENVÍA ESTA PÁGINA A UN AMIGO <br> Indica su e-mail:
<br> <input type="text" name="address"
size="25">
<br> <input type="button" value="Send this URL"
onClick="mailThisUrl();"> </form>
<script language="JavaScript1.2">
// (C) 2000 www.CodeLifter.com
// Este y otros muchos javascripts
// los encontraras en MundoJavascript.com
var good;
function checkEmailAddress(field) {
// the following expression must be all on one line...
var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
if (goodEmail){
good = true
} else {
alert('Por favor introduce un e-mail valido')
field.focus()
field.select()
good = false
}
}
u = window.location;
m = "Pienso que te puede interesar esta página...";
function mailThisUrl(){
good = false
checkEmailAddress(document.eMailer.address)
if (good){
// the following expression must be all on one line...
window.location = "mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+"
"+u;
}
}
</script> |
| |
| Imprimir
página
<SCRIPT
Language="Javascript">
/*
This script is written by Eric (Webcrawl@usa.net)
Si quieres encontrar mas scripts
visita MundoJavascript.com
*/
function
printit(){
if (window.print) {
window.print() ;
} else {
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0
CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box
WebBrowser1.outerHTML = "";
}
}
</script> <SCRIPT Language="Javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Imprimir"
name="Print" onClick="printit()"></form>');
}
</script> |
| |
| Fecha
<SCRIPT><!--
dows = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");
months = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
now = new Date();
dow = now.getDay();
d = now.getDate();
m = now.getMonth();
h = now.getTime();
y = now.getYear();
document.write(dows[dow]+" "+d+" de "+months[m]+"
de "+y);
//--></SCRIPT> |
| |
| Anular
botón derecho del ratón
<SCRIPT
LANGUAGE="JavaScript">
curPage=1;
document.oncontextmenu = function(){return false}
if(document.layers) {
window.captureEvents(Event.MOUSEDOWN);
window.onmousedown = function(e){
if(e.target==document)return false;
}
}
else {
document.onmousedown = function(){return false}
}
</SCRIPT> Menú en el botón derecho del ratón
Pégalo dentro de <head> y </head>.
<STYLE>
<!--
.skin0{
position:absolute;
width:175px;
border:2px solid white;
background-color:#C0C0C0;
font-family:Verdana;
font-size: 10px;
line-height:15px;
cursor:default;
visibility:hidden;
}
.menuitems{
padding-left:10px;
padding-right:10px;
}
--> </style> <script language="JavaScript1.2">
var menuskin=0
var display_url=0
function showmenuie5(){
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY
if (rightedge<ie5menu.offsetWidth)
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
else
ie5menu.style.left=document.body.scrollLeft+event.clientX
if (bottomedge<ie5menu.offsetHeight)
ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
else
ie5menu.style.top=document.body.scrollTop+event.clientY
ie5menu.style.visibility="visible"
return false
}
function hidemenuie5(){
ie5menu.style.visibility="hidden"
}
function highlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="highlight"
event.srcElement.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}
function lowlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="black"
window.status=''
}
}
function jumptoie5(){
if (event.srcElement.className=="menuitems"){
if (event.srcElement.getAttribute("target")!=null)
window.open(event.srcElement.url,event.srcElement.
getAttribute("target"))
else
window.location=event.srcElement.url
}
}
</script> <!--[if IE]>
<div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5()">
<div class="menuitems" url="noticias.htm" target="_self">-
Noticias</div>
<div class="menuitems" url="dinero.htm" target="_self">-
Encuesta</div>
<div class="menuitems" url="index.htm" target="_self">-
Mensajes SMS</div>
<div class="menuitems" url="contacto.htm" target="_self">-
Lista de Correo</div>
<hr>
<div class="menuitems" url="http://www.web.com/foro.asp"
target="_self">- Foro</div>
<div class="menuitems" url="chat2.html" target="_self">-
Webchat</div>
<hr>
<div class="menuitems" url="http://www.web.com/cgi-bin/birdcast.cgi"
target="_self">- Recomendar</div>
<div class="menuitems" url="formulario2.htm"
target="_self">-
Contactar</div>
<div class="menuitems" url="bug.htm" target="_self">-
¿Algún fallo?</div>
</div>
<![endif]--> <script language="JavaScript1.2">
if (document.all&&window.print){
if (menuskin==0)
ie5menu.className="skin0"
else
ie5menu.className="skin1"
document.oncontextmenu=showmenuie5
document.body.onclick=hidemenuie5
}
</script> |
| |
| Menú
que cambia de color al pasar el ratón encima de él
<SCRIPT
language=javascript>
<!--
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.style.cursor = 'hand';
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.style.cursor = 'default';
src.bgColor = clrIn;
}
}
function mClk(src) {
if(event.srcElement.tagName=='TD'){
src.children.tags('A')[0].click();
}
}
// -->
</SCRIPT> Y luego pon esto donde quieras que aparezca tu menú
y listo: <TABLE border=0 cellPadding=0 cellSpacing=0 width="110">
<TD bgColor=#008000 height=16 onclick=mClk(this); onmouseout=mOut(this,'#008000');
onmouseover=mOvr(this,'#33CC33'); width="141"> <p align="center">
<font face="Verdana,Arial,Helvetica"><a style="color:
rgb(255,255,255); text-decoration: none" href="visual-basic.htm">
Java Script</a></font><P><P><P><P><P><P><P><P><P><P></p>
|
| |
| Texto
Neón
<h2>
<script language="JavaScript1.2">
var message="Escribe
tu texto NEON"
var neonbasecolor="gray"
var neontextcolor="yellow"
var flashspeed=100 //in milliseconds
///No need
to edit below this line/////
var n=0
if (document.all){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight">'+message.charAt(m)+'</span>')
document.write('</font>')
//cache
reference to neonlight array
var tempref=document.all.neonlight
}
else
document.write(message)
function
neon(){
//Change
all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
tempref[m].style.color=neonbasecolor
}
//cycle
through and change individual letters to neon color
tempref[n].style.color=neontextcolor
if (n<tempref.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}
function
beginneon(){
if (document.all)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script> </h2>
|
| |
| Calculadora
en tu web
<FORM
name="Keypad" action=""> <B> <TABLE
border=2 width=50 height=60 cellpadding=1 cellspacing=5 > <TR>
<TD colspan=3 align=middle>
<input name="ReadOut" type="Text" size=24 value="0"
width=100% > </B> |
| |
| CAMBIAR
FONDO DE LINKS
Cuando
el raton se coloque sobre un link el fondo cambia de color. Este script
es muy sencillo y puede ser usado para menus o para links cualquiera.
Puedes cambiar facilmente el color de fondo para cada uno de los lnks.
<script>
function highlight(which,color){
if (document.all||document.getElementById)
which.style.backgroundColor=color}
</script>
// cada link
<a href="http://www.webrecursos.com" onMouseOver="highlight(this,'blue')"
onMouseOut="highlight(this,document.bgColor)">Recursos
gratis</a>
|
| |
| Agregar
a favoritos II
<html>
<head><title>Agregar a Favoritos</title>
<center>
<br><br><br>
<a href="javascript:window.external.AddFavorite('http://www.tu-sitio.com.ar','Título
de tu Sitio');">Agregar a favoritos</a>
<br><br>
<font face="verdana" size=1>
</body>
</html>
|
| |
