no me carga la imagen y ya he dado mil vueltas.

[elignorante]

Hola, soy nuevo en javascript (este es el primer paso que doy) y he encontrado que puedo poner el siguiente código para, al hacer click en una imagen, que me cargue otra en una capa nueva.

function mostrar(foto) {
document.getElementById('marco').style.background = 'url("foto")';
}

Se que la función funciona, porque si pongo
function mostrar(foto) {

document.getElementById('marco').style.background = #cccccc

o en vez de el color directamente el nombre de =url (nombredelafoto.jpg)

me sale perfecto, por lo que supongo que el problema está en que no recoje la variable 'foto'. Y le he dado mil vueltas, con comillas simples, con comillas dobles, sin comillas, intentando mandar la variable de otra forma... pero estoy más que perdido.

¿alguien me puede decir qué hago mal?

por si acaso la función la invoco deade aquí:

<img src="casarbol.jpg" title="casa del árbol" OnClick="mostrar(MG1374.jpg)"/>


Otra cosa... he leido que esto es javascript invasivo, he logrado tener una ligera idea de lo que es eso, pero ni idea de como hacer esto mismo con javascript no invasivo. Solo se que tengo que poner el código en un documento ajeno al html.

Gracias por adelantado.

[David]

Debes concatenar:

Código Javascript:

document.getElementById('marco').style.backgroundImage = 'url(' + foto + ')';
 

Además, debes usar comillas a la hora de llamar a la función y pasarle el parámetro:

Código Javascript:

mostrar('MG1374.jpg');
 

[elignorante]

MUCHIIIIIIISIMAS GRACIAS

de verdad, llevaba loco un rato largo...


a la hora de invocar la función si que le ponía comillas... es que se me despistaron.


¿Alguna forma de conseguir que esto no sea invasivo?
¿porqué es invasivo?

(si no quereis responder está bien, ya con esto os estoy más que agradecido)

[David]

Es invasivo porque hay código Javascript directamente en el HTML.
De otra forma sería:

Código Javascript:

window.onload = function() {
    document.getElementById("imagen").onclick = function() {
        mostrar('MG1374.jpg');
    }
}
 

Código HTML:

<img src="casarbol.jpg" title="casa del árbol" id="imagen" />
 

[elignorante]

Gracias,

Lo cambio pa que esté bien (lo mejor es que funciona, lo entiendo menos que el invasivo pero poco a poco... lo voy pillando)