El elemento Header (2)

Siguiendo la idea de la entrada anterior, ¿es posible utilizar diferentes banners en el mismo blog? Sí, hay decenas de alternativas. Una de ellas es establecer banners diferenciados para la página principal y para las páginas individuales. En el CSS "normal" colocamos la imagen por defecto y luego, antes de </head> colocamos una condición que cambiará la imagen de fondo en las páginas individuales:

<b:if cond='data:blog.pageType == &:quot;item&:quot;'>
  <style>
    #header-wrapper { background: transparent url(URL_IMAGEN) no-repeat left 50%; }
  </style>
</b:if>

También es posible tener una lista de imágenes y hacer que estas se muestren de manera aleatoria aunque para esto, deberemos agregar algo de JavaScript. Por ejemplo, ponemos esto antes de </head>:

<style type='text/css'>
  #header-wrapper {
    background:transparent url() no-repeat left 50%;
    /* o usamos background:transparent url() repeat left top; si se trata de un fondo a modo de mosaico */
    margin:0 auto;
    height: 175px; /* el alto del header */
    width: 960px; /* el ancho del header */
  }
  #header h1 { display: none; }
</style>

<script type='text/javascript'>
//<![CDATA[
    // precargar las imágenes
  var imagenHeader = new Array();
  imagenHeader[0] = "URL_IMAGEN_1";
  imagenHeader[1] = "URL_IMAGEN_2";
  imagenHeader[2] = "URL_IMAGEN_3";
  window.onload = function() {
    var alea;
    // el valor a usar es igual a la cantidad de imágenes menos uno
    alea = Math.round(Math.random()*2);
    document.getElementById('header-wrapper').style.backgroundImage = 'url(' + imagenHeader[alea] + ')';
  }
//]]>
</script>

En este demo online se puede ver el script funcionando con imágenes de tipo banner y en este otro demo, con imágenes de tipo mosaico.

De manera similar, podemos hacer que los banners o fondos roten cada cierto tiempo:

<style type='text/css'>
  #header-wrapper {
    background:transparent url(URL_imagen) no-repeat left 50%;
    /* o usamos background:transparent url(URL_imagen) repeat left top; si se trata de un fondo a modo de mosaico */
    margin:0 auto;
    height: 175px; /* el alto del header */
    width: 960px; /* el ancho del header */
  }
  #header h1 { display: none; }
</style>

<script type='text/javascript'>
//<![CDATA[
  // precargar las imágenes
  var imagenHeader = new Array();
  imagenHeader[0] = "URL_IMAGEN_1";
  imagenHeader[1] = "URL_IMAGEN_2";
  imagenHeader[2] = "URL_IMAGEN_3";
  function bannerRotativo() {
    numBanner ++;
    if(numBanner >= imagenHeader.length) { numBanner = 0 }
    document.getElementById('header-wrapper').style.backgroundImage = 'url(' + imagenHeader[numBanner] + ')';
  }
  var numBanner = 0;
  window.onload = function() {
    setInterval("bannerRotativo()", 2000);
  }
//]]>
</script>

El valor de 2000 es el tiempo que permanecerá visible cada banner y está expresado en milisegundos (1000 = 1 segundo). Este es un demo online que muestra un ejemplo.

Otra variante, ejecutando un scroll de una imagen:

<style type='text/css'>
  #header-wrapper {
    background:transparent url(URL_imagen) repeat left top;
    margin:0 auto;
    height: 175px; /* el alto del header */
    width: 960px; /* el ancho del header */
  }
  #header h1 { display: none; }
</style>

<script type='text/javascript'>
//<![CDATA[
  function scrollBanner(maxSize,direccion) {
    backgroundOffset = backgroundOffset + 1;
    if (backgroundOffset > maxSize) { backgroundOffset = 0; }
    if(direccion==false) {
      document.getElementById('header-wrapper').style.backgroundPosition = '0 ' + backgroundOffset + 'px';
    } else {
      document.getElementById('header-wrapper').style.backgroundPosition = backgroundOffset + 'px 0px';
    }
  }
  var backgroundOffset = 0;
  window.onload = function() {
    setInterval('scrollBanner(200,false)', 100);
  }
//]]>
</script>

Si queremos que el scroll sea vertical, usamos el valor false:

setInterval('scrollBanner(200,false)', 100);

Si queremos que el scroll sea horizontal, usamos el valor true:

setInterval('scrollBanner(200,true)', 100);

En ambos casos, el valor 200 es el tamaño máximo a desplazar (por lo general, el ancho o alto de la imagen) y el valor 100 es el tiempo expresado en milisegundos. Este es un ejemplo de scroll vertical y este de un ejemplo de scroll horizontal.