NorfiPC

Trucos y efectos de Javascript para usar en páginas web y Blogs

Twittear

Códigos sencillos que permiten agregar interactividad y dinamismo a las páginas y hacerlas más interesantes y útiles a los usuarios. Solo son algunos, posteriormente se seguirán agregando si despiertan el interés de los lectores de este sitio.
Solo se incluyen códigos sencillos, que consten dos o tres líneas como máximo, que se puedan ser insertados inline, es decir directamente en el código HTML solo copiando y pegando. El propósito y objetivo es que puedan ser de utilidad, interesantes o hasta curiosos, además que inciten y estimulen al aprendizaje del lenguaje Javascript y HTML.
Todos trabajan perfectamente en cualquier navegador moderno y validan sea cual sea la declaración de la página, ya sea HTML4, XHTML o HTML5.
Si tienes un blog en Wordpress o Blogger, más abajo puedes leer como insertarlos.

Códigos de Javascript para insertar en páginas y blogs

Las dos barras invertidas al comienzo de una línea, significa que esta es solo un comentario, se pueden eliminar completamente.

Mostrar mensajes de bienvenida y despedida en una página.

<script type="text/javascript">
window.onload=function(){alert('Bienvenido a esta pagina');}
window.onunload=function(){alert('Vuelva en otro momento');}
</script>

Si la pagina utiliza el evento onload para iniciar otras funciones es necesario incluir la anterior de la siguiente forma: párrafo con un identificador nombrado: 'link1' (puedes darle otro nombre):

<script type="text/javascript">
window.onload = function()
{
funcion1(){alert('Bienvenido a esta pagina');}
funcion2();
funcion3();
}
</script>

Añadir efectos a los vínculos.

Muestra un cuadro de alerta con un mensaje al poner el ratón encima de un vínculo. Pruébalo: Vínculo

<a href="http://tu-sitio.com" 
onmouseover="javascript:alert('Mensaje');return false">Vínculo</a>

Muestra un mensaje de alerta al hacer clic sobre un vínculo, antes de enviar al usuario al destino. Pruébalo: Vínculo

<a href="http://tu-sitio.com" onclick="javascript:alert('Mensaje');">Vínculo</a>

Aumenta el tamaño del texto del vínculo al poner el ratón encima, al quitarlo restaura el texto a su tamaño original. Pruébalo: Vínculo

<div id="vinc"><a href="http://tu-sitio.com" 
onmouseover="javascript:void(document.getElementById('vinc').style.fontSize='3em')" 
onmouseout="javascript:void(document.getElementById('vinc').style.fontSize='1em')">
Vínculo</a></div>

Mensaje de confirmación antes de enviar el usuario a una página. Pruébalo: Vínculo

<a href="javascript:if (confirm('Quieres entrar a NorfiPC?')) 
{parent.location='http://norfipc.com/index.html';};">Vínculo</a>

Contador de visitantes engañoso.

<script type="text/javascript">
var ran
ran = Math.round(Math.random()*50000)
document.write("Usted es el visitante " + ran + " de esta página.")
</script>

Botón para imprimir página

<input type="button" value="Imprime esta página" onclick="window.print()">

Crear restricciones al uso del ratón

Deshabilitar el uso del clic derecho por completo

<script type="text/javascript">
document.oncontextmenu = function(){return false}
</script>

Impedir la selección y la copia de texto en una página.

<script type="text/javascript">
window.onload = function()
// Para internet Explorer
{document.onselectstart = function(){return false;} 
// Para Firefox
document.onmousedown = function(){return false;}}
</script>

Mostrar un mensaje o ejecutar otra acción al dar un clic derecho.

<script type="text/javascript">
//<![CDATA[
function right(e) {
if (navigator.appName == 'Netscape' && e.which == 3) {
alert('Prohibido clic derecho');  
return false;}else
if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2) {
alert('Prohibido clic derecho');return false;}return true;}
document.onmousedown = right;
//]]>
</script>

Varios

Mostrar la fecha y hora en la barra de estado con un mensaje. (Solo Internet Explorer)

<script type="text/javascript">
function hora() {
 var DateString=(new Date()).toString();
 self.status=DateString.substring(0,3+DateString.lastIndexOf(':'))+"Cualquier mensaje";
 setTimeout("hora()",200);}
hora()
</script>

Código Browser Sniffer, identifica el navegador del usuario y lo envía a la página preparada para dicho navegador.

<script type="text/javascript">
if(navigator.appName.indexOf("Netscape") != -1){
location="netscape.html";}
if(navigator.appName.indexOf("Microsoft Internet Explorer") != -1){
location="internet-explorer.html";}
</script>

Propone al usuario establecer esta página como su página de inicio (Solo Internet Explorer)

<a href="javascript:if (document.all){document.body.style.behavior='url(#default#homepage)'; 
document.body.setHomePage('http://norfipc.com');};">Hazme tu página de inicio</a>

Texto parpadeante. Hola!
Si deseas insertarle un vínculo al texto parpadeante utiliza el segundo DIV, (solo puede existir en el código in ID único).

<script type="text/javascript">
window.setInterval (BlinkIt, 500);
var color = "red";
function BlinkIt () {
var blink = document.getElementById ("blink");
color = (color == "#ffffff")? "red" : "#ffffff";
blink.style.color = color;
blink.style.fontSize='36px';}
</script>
<div id="blink">Hola!</div>
<div id="blink" onclick="parent.location='http://norfipc.com'">Hola!</div>

Permite sugerir una página, enviando por email su título y URL.

 <a href="javascript:location.href='mailto:?SUBJECT=Te%20sugiero:
 '+document.title+'&amp;BODY='+escape(location.href); void 0">Sugerir esta página</a>

Mostrar los códigos solo en Internet Explorer.

Los códigos que funcionen solo en el navegador Internet Explorer, pueden ocultarse fácilmente para los que utilicen otros navegadores, para eso emplea un estilo condicional de la siguiente forma:

<!--[if lte IE 9]>
CÓDIGO que solo funciona en IE
<![endif]-->

Como insertar los códigos en un blog de Wordpress o Blogger.

Si no tienes una página web propia, solo un blog en Wordpress o Blogger, también puedes usar los códigos perfectamente, estos CMS permiten insertar código Javascript, siempre que no sea intrusivo y afecte el código fuente, cualquiera de esta página puedes insertar. Para hacerlo haz lo siguiente.

---

Páginas relacionadas