/// DESIGN-ROOT /// Diseño, usabilidad y animación web

Este script muestra un texto al posicionar el cursor sobre un enlace, similar al efecto estándar de la etiqueta ALT, pero con la ventaja de que éste sale inmediatamente sin necesidad de esperar unos segundos.

1.- Creamos el estilo para la CAPA del mensaje ALT

2.- Copiamos el siguiente script

/***********************************************
* Show Hint script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
  
var horizontal_offset="9px" //horizontal offset of hint box from anchor link

/////No further editting needed

var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
var ie=document.all
var ns6=document.getElementById&&!document.all

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
}
return edgeoffset
}

function showhint(menucontents, obj, e, tipwidth){
if ((ie||ns6) && document.getElementById("hintbox")){
dropmenuobj=document.getElementById("hintbox")
dropmenuobj.innerHTML=menucontents
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
dropmenuobj.style.visibility="visible"
obj.onmouseout=hidetip
}
}

function hidetip(e){
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left="-500px"
}

function createhintbox(){
var divblock=document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}

if (window.addEventListener)
window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
window.attachEvent("onload", createhintbox)
else if (document.getElementById)
window.onload=createhintbox

3.- Copiado el script, solo nos queda "llamarlo" desde la etiqueta a href del enlace de la siguiente manera:

<a href="#" class="hintanchor" onMouseover="showhint('Aqui esta mi <b>mensaje</b> ¿Qué te parece?', this, event, '200px')">[MI MENSAJE]</a>

Fuente: www.dynamicdrive.com

¿Alguien se acuerda de diseñar alguna vez las páginas de error típicas (ErrorDocument 404! Página no encontrada) de su sitio web? Ah! ¿pero se pueden diseñar? Si, y debería ser una de las primeras páginas a componer, puesto a menudo es donde va a parar un usuario que accede a una url "rota" de nuestro sitio web.

Las estadísticas demuestran que la página de error es una de las más vistas en internet, por lo que conviene que esta página, además de informar del error, informe al usuario de los contenidos que SI puede encontrar en nuestro sitio web ("no encontraste lo que buscabas, ¡pero hay más cosas que ver!").

Pasos a seguir:

1.- Componemos la página HTML que, además de contener el error de página no encontrada, tenga otros enlaces como "Home", "Nuestra ofertas de este mes", etc...

2.- Guardamos esta página HTML como 400.html, 401.html, 403.html, 404.html, 405.html, 406.html, etc... Tantas como página de error queramos crear, aunque normalmente con la 404 (página no encontrada) será suficiente.

3.- Subimos las páginas HTML al directorio principal de nuestro servidor.

4.- Creamos un documento txt que contenga la siguiente información:

ErrorDocument 401 http://www.el-nombre-de-tu-dominio.com/401.html
ErrorDocument 402 http://www.el-nombre-de-tu-dominio.com/402.html
ErrorDocument 403 http://www.el-nombre-de-tu-dominio.com/403.html
ErrorDocument 404 http://www.el-nombre-de-tu-dominio.com/404.html

etc..

Una línea por cada página de error creada.

5.- Guardarmos este documento de texto con el nombre .htaccess . Tiene que empezar por . y no debe llevar ninguna extensión (.txt, .doc, .html ni nada que se le parezca).

6.- Subimos el documento .htaccess al directorio raiz de nuestro sitio web.

Al intentar acceder a una página errónea de nuestro sitio web, por ejemplo, http://www.design-root.com/asfaas se verá la página de error 404 de página no encontrada creada anteriormente.

En la web de Maestros del web tienes un interesante articulo sobre las páginas de error 404!.