funcion para crear imágenes en divs

[er_luigi]

Hola a todos,
Estoy haciendo una página que contiene varias capas unas encima de otras. Cada capa contiene una imagen que se repite varias veces y en la que se puede clickar. Como la imagen es la misma en todas las capas, decidí añadirla con código javascript, de modo que en vez de poner la imagen lo que hago es llamar a la siguiente función:

function crea_boton(nombre)
{
document.writeln("<A HREF='' onclick='bolas("+nombre+"); return false'>");
document.writeln("<IMG NAME="+nombre+" SRC='./imagenes/bolaverde.gif' ALIGN='CENTER' border='0'>");
document.writeln("</A>");
}

Para poder utilizar esta función tengo que añadir una referencia al fichero .js en cada capa.
Mi problema es que la función solo es capaz de crear los botones en la primera capa y el resto de las capas o no se crean o se crean con multitud de errores.
Después de mucho investigar descubrí que el problema lo daba la etiqueta IMG ya que con los anclajes A si que funcionaba.

Mi pregunta es, ¿podría crear de otra forma esos botones (imágenes que se puedan clickar) utilizando una función javascript similar?

Muchas gracias por haberte leido todo este rollo.

[KarlanKas]

la variable nombre que lanzas con la función ¿es el nombre de la capa? si es así puede que sea eso lo que te de error. Procura poner un nombre único para cada elemento de la página.

Se me ocurren otras formas, pero utilizan el innerHTML y sólo haría compatible el código con el MSIE y con el NS a partir de la versión 6.

El código sería:

Código:

function crea_boton(capa,nombre){
document.getElementById(capa).innerHTML="<A HREF='' onclick='bolas("+nombre+"); return false'><IMG NAME="+nombre+" src='./imagenes/bolaverde.gif' ALIGN='CENTER' border='0'></A>";
}

Pero tu código debería funcionar, revisa lo que te digo (el nombre de las imágenes).

Comenta la evolución de los acontecimientos...

[er_luigi]

Antes que nada, muchas gracias por contestarme.
Te diré que el nombre no es el de la capa, sino el de la imagen sobre la que se puede pinchar que estoy creando. La capa la creo tal que así con llamadas a la función para crear la imagen:
<div id="estradiol" style="position:absolute; left:5px; top:40px; width:360px; height:240px; z-index:1; visibility: visible">

El reconocimiento de la hormona natural tiene lugar a través de <A href="javascript:seleccion(12)">enlac es de hidrógeno</A>
<SCRIPT LANGUAGE="javascript"> botonchime_es('glu_353'); </SCRIPT>

, y con el grupo guanidinio de Arg-394 através de una molécula de agua estructural

<SCRIPT LANGUAGE="javascript"> botonchime_es('arg_394'); </SCRIPT>.

El grupo hidroxilo 17 del anillo D establece un enlace de hidrógeno con His 524
</div>

<div id="menu" style="position:absolute; left:5px; top:40px; width:360px; height:240px; z-index:2; visibility: hidden">

En todos los complejos se presenta el dominio LBD una vez dimerizado

<SCRIPT LANGUAGE="javascript">botonchime_es('dimero'); </SCRIPT>

, un paso previo aún no comprendido, a la interacción con el ligando. Las dos subunidades establecen contactos principalmente entre las hélices H11 de cada una de las subunidades

<SCRIPT LANGUAGE="javascript">botonchime_es('contactos'); </SCRIPT>

</div>

El caso es que he seguido investigando y lo que da error exactamente es el incluir la fuente (SRC) de la imagen, no sé por qué, si será porque en todos los casos la imagen es la misma.
He pensando en declarar primero todas imágenes de todas las capas con fuente src='', para despúes y mediante un bucle ir cambiando la fuente a src='./imagenes/bolaverde.gif'.
A ver si con un poco de suerte esto funciona.

Un saludo y gracias de nuevo.

[KarlanKas]

¿Y si defines en un JS antes la ruta?

Por ejemplo:
<script>
var ruta="./imagenes/bolaverde.gif";
function crea_boton(nombre)
{
document.writeln("<A HREF='' onclick='bolas("+nombre+"); return false'>");
document.writeln("<IMG NAME="+nombre+" SRC="+ruta+" ALIGN='CENTER' border='0'>");
document.writeln("</A>");
}

</script>

Es un truco que a veces utilizo y funciona!

[er_luigi]

Gracias Karlankas.
Creo que más o menos ya lo solucioné. Lo que hago es no ponerle src de modo que se crea el espacio para la imagen pero sin que esta no aparezca. Y después al final de la capa recorro la matriz de imágenes y defino el src para todas aquellas que no están definidas:
var j=0;
while(j<=document.images.length-1)
{
if(document.images[j].src=="")
document.images[j].src="./imagenes/bolaverde.gif";
j++;
}

De momento creo que funciona así que muchas gracias por tu ayuda.