Código para que nos enlacen (sin JQuery)

Como muchos no usan JQuery, me han preguntado si es posible usar algo similar al código para que nos enlacen sin librerías o con cualquier librería, es decir, sólo con JavaScript.

Como la idea es muy simple y está muy bien armada, es fácil convertirla. Bastaría usar este otro script:

<script type='text/javascript'>
//<![CDATA[
  function misBanners() {
    lista = document.getElementById("listaBanners");
    codigo = document.getElementById("codigoBanner");
    ejemplo = document.getElementById("ejemploBanner");
    var graphicFileName = lista.options[lista.selectedIndex].getAttribute("rel");
    var newCode = '<a href="http://miBlog.blogspot.com/"><img src="' + graphicFileName + '" title="Agregar banner" alt="Agregar banner" /></a>';
    codigo.value = newCode;
    ejemplo.innerHTML = newCode;
  }
//]]>
</script>

Tamaño: 200 x 150190 x 60120 x 50125 x 125125 x 125

Código: <a href="http://vagabundia.blogspot.com/"><img src="http://img199.imageshack.us/img199/7114/vagabanner02.png" title="Vagabundia en Blogger" alt="Vagabundia en Blogger" /></a>

Copie y pegue el código en su sitio.

El código HTML es prácticamente igual, sólo agregamos el evento onChange en la etiqueta SELECT:

<form action="#" id="misBanners">
  <div>
    <span>Tamaño:</span>
    <select onChange="misBanners();" name="listaBanners" id="listaBanners">
      <option selected="selected" rel="URL_imagen_1">texto a mostrar</option>
      <option rel="URL_imagen_2">texto a mostrar</option>
      <option rel="URL_imagen_3">texto a mostrar</option>
      <!-- seguimos agregando todas las imágenes que se nos de la gana -->
    </select>
  </div>
  <div>
    <span>Código:</span>
    <textarea rows="10" cols="25" id="codigoBanner">&lt;a href="http://miBlog.blogspot.com/"&gt;&lt;img src="URL_imagen_1" title="nuestro texto" alt="nuestro texto" /&gt;&lt;/a&gt;</textarea>
    <p>Copie y pegue el código en su sitio.</p>
  </div>
</form>
<div id="ejemploBanner">
  <a href="http://miSitio.blogspot.com/"><img src="URL_imagen_1" title="nuestro texto" alt="nuestro texto" /></a>
</div>