Es puro javascript?! no has intentado con JQuery? para mi es mejor, incluso creo (no me consta) que tendrias mejor compatibilidad con navegadores haciendolo con jquery.
Mira si te sirve te adelante esto en jq,uery, para que compares la estreches en lineas de codigo:
Código :
<ul id="enlaces">
<li><a href="bio.html" title="Mi Biografía">Mi Biografía</a></li>
<li><a href="blog.html" title="Mi Blog">Mi Blog</a></li>
<li><a href="fotos.html" title="Mis Fotos">Mis fotos</a></li>
<li><a href="pdf.html" title="Mis Fotos">PDF</a></li>
</ul>
$(document).ready(function($){
$('#enlaces a').bind('click',function(e){
e.preventDefault();
$("#contenido").empty();
$("#enlaces a").attr('style','');
attrHref = this.href; // aqui toma el hipervinculo atributo del href
$currA = $(this).css({'background':'none #ffcccc'}); // aqui fondo de color al a:activo
// falta agregar aqui un preload img
$("#contenido");.load(attrHref,function(){
// cuando cargas datos remueves aqui preload
$(this).hide().fadeIn(); // efecto aparece
});
});
});
No lo he probado pero es mas menos lo que necesitas, le falta poner un preload, todo lo carga en el mismo contenedor asi es que el hace ela carga/ajax de datos. Todo lo que tienes de js: HttpRequest etc viene integrado en las librerias de jquery asi es que lo unico que haces es solicitar los metodos de carga ajax() load() get() etc y manejar sus paramtetros y vuala! chulada no?
