Trucos HTML

No dejar seleccionar el texto de nuestra Web:

Con este código vamos a impedir que los visitantes seleccionen el texto de nuestra página para luego copiarlo a otro lado.

<script language="Javascript">
<!-- Begin
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
// End -->
</script>

Con este código podemos hacer que si a un visitante le gustó nuestra Web, la recomiende a un amigo escribiendo su dirección de correo electrónico en la casilla, al hacer click en "Recomendar esta Web" se envía un mensaje de correo con el asunto "Pienso que te puede interesar esta página..." y en el cuerpo del mensaje aparece la dirección completa donde se encuentra el código y el título de la misma.

<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="Recomendá esta Web!" onClick="mailThisUrl();">
</form>
<script language="JavaScript1.2">
var good;
function checkEmailAddress(field) {
// the following e-xpression must be all on one line...
var goodEmail = field.value.match(/(^(S   @). ((.com)|(.net)|
(.edu)|(.mil)|(.gov)|(.org)|(..{2,2}))$)/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 e-xpression must be all on one line...
window.location = "mailto:" document.eMailer.address.value "?subject=" m "&body=" document.title " " u;
}
}
</script>

CODIGO HTML EFECTO NIEVE:

Podés cambiar la imagen reemplazando por una tuya alojada en el servidor poniendo su nombre donde está en rojo.


<script>
var no = 5; // snow number
var speed = 15; // smaller number moves the snow faster
var snowflake = "snow.gif";

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 400, doc_height = 500;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = 500;
doc_height = 500;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no;    i) {
dx = 0; // set coordinate variables
xp = Math.random()*(doc_width-50); // set position variables
yp = Math.random()*doc_height;
am = Math.random()*20; // set amplitude variables
stx = 0.02   Math.random()/10; // set step variables
sty = 0.7   Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name="dot"  i  "" left="15" ");
document.write("top="15" visibility="show"><img src="");
document.write(snowflake   "" border="0"></layer>");
} else {
document.write("<layer name="dot"  i  "" left="15" ");
document.write("top="15" visibility="show"><img src="");
document.write(snowflake   "" border="0"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id="dot"  i  "" style="POSITION: ");
document.write("absolute; Z-INDEX: "  i  "; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;"><img src="");
document.write(snowflake   "" border="0"></div>");
} else {
document.write("<div id="dot"  i  "" style="POSITION: ");
document.write("absolute; Z-INDEX: "  i  "; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;"><img src="");
document.write(snowflake   "" border="0"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no;    i) { // iterate for every dot
yp  = sty;
if (yp > doc_height-50) {
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02   Math.random()/10;
sty = 0.7   Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx  = stx;
document.layers["dot" i].top = yp;
document.layers["dot" i].left = xp   am*Math.sin(dx);
}
setTimeout("snowNS()", speed);
}

function snowIE() { // IE main animation function
for (i = 0; i < no;    i) { // iterate for every dot
yp  = sty;
if (yp > doc_height-50) {
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02   Math.random()/10;
sty = 0.7   Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx  = stx;
document.all["dot" i].style.pixelTop = yp;
document.all["dot" i].style.pixelLeft = xp   am*Math.sin(dx);
}
setTimeout("snowIE()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
</script>

Con este recurso sencillo podemos hacer más difícil el acceso al código-fuente o la copia de imágenes de nuestro sitio. Cuando el visitante haga click con el botón derecho del mouse, surgirá un mensaje creado previamente por nosotros. Recordemos que a algunas personas no les gusta este tipo de bloqueo. Nosotros tenemos que decidir si queremos incluirlo o no en nuestras páginas.

Podemos colocarlo antes de la etiqueta <html> o después de la etiqueta <body>.



<Script language=JavaScript>
function right(e) {
if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){
alert("Coloca el mensaje aquí.");
return false;
}
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Coloca el mensaje aquí.");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
</script>


Nota: Para evitar este truco, también hay un contratruco, si entrás a una página que tiene este truco que no te deja copiar imágenes o texto, solo tenés que hacer click con el botón derecho del mouse sobre la barra de estado y sin soltarlo arrastrarlo hasta la imágen. Listo, se abrirá el menú como si la página no estuviese bloqueada a la copia. Hay que tener en cuenta que muy poca gente conoce este truco, por lo tanto podés usar tranquilo el truco de bloqueo.

Este efecto hace que cualquier imagen que elijas quede "paseando" por la pantalla, siendo un recurso excelente tanto para llamar la atención por alguna novedad en tu sitio como para darle más movimiento a la página.

Copiá y pegá el siguiente código en tu página HTML.
Recordá que la imagen debe estar en el mismo directorio de tu página html.

 
<SCRIPT language="JavaScript1.2">
var imagem="Ingresa el nombre del archivo de imagen aquí"
if (document.layers)
{document.write("<LAYER NAME='animacao' LEFT=10 TOP=10><img src='" imagem "' ></LAYER>")}
else if (document.all){document.write("<div id='animacao' style='position:absolute;top:10px;left:10px;width:17px;height:22px;z-index:50'><img src='" imagem "'></div>")}

conta=-1;
move=1;
function curva(){
abc=new Array(0,1,1,1,2,3,4,0,6,-1,-1,-1,-2,-3,-4,0,-6)
for (i=0; i < abc.length; i  )
{var C=Math.round(Math.random()*)}
iniciar=abc[C];
setTimeout('curva()',1900);
return iniciar;
}
ypos=10;
xpos=10;
movimento = 60;
function moveR(){
caminho=movimento =iniciar;
y = 4*Math.sin(caminho*Math.PI/180);
x = 6*Math.cos(caminho*Math.PI/180);
if (document.layers){
ypos =y;
xpos =x;
document.animacao.top=ypos window.pageYOffset;
document.animacao.left=xpos window.pageXOffset;
}
else if (document.all){
ypos =y;
xpos =x;
document.all.animacao.style.top=ypos document.body.scrollTop;
document.all.animacao.style.left=xpos document.body.scrollLeft;
}
T=setTimeout('moveR()',50);
}
function edges(){
if (document.layers){
if (document.animacao.left >= window.innerWidth-40 window.pageXOffset)movimento=Math.round(Math.random()*45 157.5);
if (document.animacao.top >= window.innerHeight-30 window.pageYOffset)movimento=Math.round(Math.random()*45-112.5);
if (document.animacao.top <= 2 window.pageYOffset) movimento = Math.round(Math.random()*45 67.5);//OK!
if (document.animacao.left <= 2 window.pageXOffset) movimento = Math.round(Math.random()*45-22.5);//OK!
}
else if (document.all)
{
if (document.all.animacao.style.pixelLeft >= document.body.offsetWidth-45 document.body.scrollLeft)movimento=Math.round(Math.random()*45 157.5);
if (document.all.animacao.style.pixelTop >= document.body.offsetHeight-35 document.body.scrollTop)movimento=Math.round(Math.random()*45-112.5);
if (document.all.animacao.style.pixelTop <= 2 document.body.scrollTop) movimento = Math.round(Math.random()*45 67.5);//OK!
if (document.all.animacao.style.pixelLeft <= 2 document.body.scrollLeft) movimento = Math.round(Math.random()*45-22.5);//OK!
}
setTimeout('edges()',100);
}
function efeito(){
curva();
moveR();// onUnload="opener.gO()"
edges();
}
if (document.all||document.layers)
efeito()
</script>

Con este recurso personalizás tu sitio para el visitante. Al entrar, el visitante verá un espacio para ingresar su nombre y un mensaje que dice "Hola, Fulano".

Copiá el siguiente código y pégalo donde quieras que aparezca el mensaje:



<Script language="JavaScript">
mensagem = prompt("Por favor, ingresa tu nombre",'');
if (mensagem==null) {
document.write("¡Hola, visitante!")
}else{
if (mensagem=='') {
document.write("<b><font face=arial size=2 color=#000000>¡Hola, visitante!</font></b>")
}else{
document.write("<b><font face=arial size=2 color=#000000>¡Hola" mensagem "! Bienvenido a mi sitio</font></b>");
}
}
</script>

Estos efectos de transición son especiales porque con ellos tu página tendrá una apertura muy original, pero sólo funcionarán con Internet Explorer. No tendrás problemas para utilizar este recurso, ya que los usuarios de otros navegadores no verán errores y la página se cargará normalmente.

 
Ingresá el código debajo de la etiqueta <body> de tu página.


<script language=javaScript>
var n = 15
fadeIn();
function fadeIn(){
var num=new Array("FFFFFF","FFCC00","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g")
for (var i=0; i<=n; i  ){
for (var j=0; j<= n; j  ){
color=num num[j] num num[j] num num[j]
document.bgColor=color
}}
document.bgColor="#FFFFFF"
}
</script>

Fuente: Hack-dead