Free Web Hosting by Netfirms
Web Hosting by Netfirms | Free Domain Names by Netfirms

   
 
Sección "Java Scripts"

Lección 13

Abrir un link en una ventana dimensionable a través de un botón.

En algunas ocasiones queremos enlazar nuestro sitio con otras páginas que deseamos acoplar a nuestra Web y resulta que cuando hacen "click" en el Link, nuestro visitante se va del sitio y ya no regresa.

Para solucionar esto, lo más apropiado es hacer que ese Link se abra mediante una ventana. 

Para ello debes proceder así:

Pones la página en HTML, (Si usas el programa Front Page accionando la opción que se encuentra al pie de la página, sobre la izquierda), y copias el código que te escribo en la casilla de abajo, tal cual como está debajo de la palabra <HEAD>, que encontrarás en la parte superior de tu página.   

<SCRIPT LANGUAGE="JavaScript">

<!-- 
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,

width=320,height=240');");
}
// -->
</script>

Respecto a lo que pinté con azul:

"width=320" es el ancho de la ventana, tú le indicas el ancho que desees

"height=240" es la altura de la ventana, tú le indicas la que prefieras.  

Los comandos que pinté con verde corresponden a ciertas propiedades para la ventana dimensionable:

toolbar=0 corresponde a la barra de herramientas que permite regresar hacia atrás, avanzar, volver a inicio, etc. Si le cambias el "0" por "1", se activará en tu ventana dimensionable.

scrollbars=0 corresponde a las barras de desplazamiento hacia arriba, abajo, derecha e izquierda. Si le cambias el "0" por "1", se activarán en tu ventana dimensionable.

statusbar=0 corresponde a las barras inferior que muestra la precarga del enlace. Si le cambias el "0" por "1", se activarán en tu ventana dimensionable.

menubar=0 habilita la barra de herramientas que permite seleccionar archivo, formato, etc. Si le cambias el "0" por "1", se activarán en tu ventana dimensionable.

Ahora pega este trozo de HTML donde deseas que te aparezca el link, pero ten en consideración que esté debajo de donde aparece por primera vez la palabra <Body>
 y no arriba, y también lo puedes poner dentro de una tabla. 

<form>
<input type=button value="Aquí colocas lo que deseas que salga en el botón" onClick="javascript:popUp('http://webgasoleros.netfirms.com')">
</form>

Donde está pintado con verde, debes indicar la dirección del enlace que se debe abrir en la ventana. Y en lo que pinté con rojo, debes escribir el texto que quieres que aparezca en el botón

Y quedará de este modo: 

Puedes pegar este código la cantidad de veces que desees, y a cada uno le indicas un enlace diferente. De este modo, cada uno abrirá un link diferente. 

Pero lo que pegaste en el Head, no debes repetirlo, con una vez que esté ya es suficiente.

Aquí copio nuevamente el código con opción para seleccionarlo, cortar y pegar en tu sitio.

Para ello haces click en cualquier palabra que se halla dentro de la caja, Te diriges a "Edición" en el menú superior de la barra de herramientas, e indicas "Seleccinar todo", luego tomas lo seleccionado dirigiéndote nuevamente a "Edición", pero esta vez indicas "Cortar", y posteriormente te posicionas en tu página, donde quieres colocar este código, entonces te diriges a Edición, y le indicas "Pegar". 

Si deseas hacer las cosas más rápido, puedes verificar en "Edición" (está escrito al lado de las palabras que indican cada orden) que pulsando "Control" + una letra determinada, puedes "seleccionar todo", "cortar" o "pegar" en forma instantánea y con eso evitas tener que ingresar constantemente al menú de "Edición".

Esto es lo que debes pegar debajo de donde dice <Head> en el HTML de tu página:

Esto es lo que debes pegar debajo de donde dice <Body> en el HTML de tu página:

Si de todos modos, no funciona este efecto, corta el código HTML que debes colocar en tu página, pero antes de hacerlo, pégalo en tu Block de notas, y luego si córtalo de allí y pégalo en tu sitio. Ahora si no creo que haya ningún inconveniente que te impida disfrutar de este bonito efecto.

Recordemos que este Script también puede ser hallado en el programa Depósito, el cual puedes bajar de aquí: webtutorial.com.ar

Buena suerte.