Enviar diferentes imagenes a div

Citar

Escrito el 16 Abr 2008 08:39 am

Buenas, estoy intentando hacer lo siguiente, tengo un script que lo que me hace es contraer/expandir texto. Además de eso busco que al hacer click me cambie en un div, una foto. veamos.

Código :

<head>
<script type='text/JavaScript'>
function verocultar(cual) {
     var c=cual.nextSibling;
     if(c.style.display=='none') {
             c.style.display='block';
     }
     else {
             c.style.display='none';
     }
          return false;
     }
</script>
</head>

Esto sería lo que tengo en el head y en el body tengo lo siguiente:

Código :

<body>
<a onclick="return verocultar(this);"
     href="javascript:void(0);"><font color="#00FF00">ENLACE</font></a><div style="display:none">
Este es el texto que se expande/contrae
</div>

<a onclick="return verocultar(this);"
     href="javascript:void(0);"><font color="#00FF00">ENLACE</font></a><div style="display:none">
Este es el texto que se expande/contrae2
</div>

</body>

Entonces , debería crearme en el body otra div. Pero no se como hacer que según que enlace se cliquee me ponga una foto u otra en el Div. ¿Alguien podría ayudarme? Gracias.

Por charliechin

19 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 16 Abr 2008 09:47 am

Se me ocurren estos cambios:

Código :

<script type='text/JavaScript'>
var URLs_IMGs=new Array('URL_de_la_imagen_1','URL_de_la_imagen_1');
function verocultar(cual,i)
{var c=cual.nextSibling;
 if(c.style.display=='none')
       {c.style.display='block';
        document.getElementById('id_del_div').innerHTML='<img src="'+URLs_IMGs[i]+'" />';
       }
     else
       {c.style.display='none';
        document.getElementById('id_del_div').innerHTML='';
       }
 return false;
}
</script>

<DIV> contenedor, a añadir en el body.

Código :

<div id="id_del_div"></div>

Los nuevos "onclick", serían:

onclick="javascript:verocultar(this,0);"
onclick="javascript:verocultar(this.1);"

*NOTA: Revisa mi última "PD" sobre los "onclick".

PD: Tienes mucho trabajo por hacer:

No hagas href="javascript:void(0);", haz mejor así: href="#".
Te recomiendo que diseñes con xHTML+CSS.
Ya no se usa la etiqueta <font>, entre otras.
El color, se especifica mediante style="color:#00FF00", y no con color="#00FF00"
Intenta hacer la página más accesible, cambiando los onclick="javascript:verocultar(this)", por un evento "onload":
window.onload=funnction(){for(i in links){if('condición del link'){link.onclick=function(){verocultar(this);}}}};
En lugar del "innerHTML", deberías intentar usar el "createElement", que es más correcto.
Ya he escrito varias veces sobre cómo usarlo (aquí, una de ellas), y la WEB está llena de ejemplos.