[SOLUCIONADO] Como puedo cambiar el background de un div al hacer click en un texto?

[beryc]

Buenas,
Quiero hacer algo que puede parecer sencillo pero no se me ocurre como, por lo que necesitaria consejos o ayuda al respecto.

tendria una serie de palabras en un bloque, y me interesaria que al dar click en la palabra el div que apareciera debajo, cambiara de fordo, o que cambiara la imagen que cotiene, me es indiferente si es el background del div o un <img>
explicandolo mejor:

texto1
texto2
texto3
texto4

<div>
aparecera aqui imagen1, si he dado click al texto1
o aparacera imagen2, si he dado click al texto2
o aparecere imagen3, si he dado click al texto3
</div>

se me ocurria hacerlo con un <a href=""> pero dado que no quiero crear una pagina nueva para cada texto. pues no.
se me ocurrio al hacer un hover por el texto, pero quiero que permanezca la imagen hasta que de click a otro texto.
no se si es necesario javascript para esto, pero por lo que estaba leyendo en internet seria una buena opcion, aunque si solo puede hacerse con css o html seria mas facil para mi ya que no me manejo bien con javascript, no obstante podria entenderlo un poco de ser asi.

agradecere cualquier ayuda al respecto y sugerencia.
gracias

[martinmiranda90]

Hola. Lo que podrías hacer sería establecer en cada enlace una etiqueta data (por ejemplo data-imagen) con la url de la imágen que corresponda y en el momento de hacer click recogerla y cambiar el atributo background si es un div o src si fuera una etiqueta img.
Saludos.

[caricatos]

Hola:

Si no quieres enlazar, no deberías usar enlaces, simplemente debes programar el evento click... una froma rápida y sencilla sería algo así:

<span onclick="poner('imagen1.png')">poner imagen1</span>

Como puedes ver el ejemplo está usando un span (no un enlace); y definir poner...

<script type="text/javascript">
function poner(que) {
document.getElementById("elemento").style.backgrou nd = "url(" + que + ") no-repeat center center";
}

El ejemplo es con estilos para un div con id="elemento", pero puedes poner una imagen y cambiar el atributo src.

Saludos

[beryc]

Iniciado por caricatos

hola:

Si no quieres enlazar, no deberías usar enlaces, simplemente debes programar el evento click... Una froma rápida y sencilla sería algo así:

<span onclick="poner('imagen1.png')">poner imagen1</span>

como puedes ver el ejemplo está usando un span (no un enlace); y definir poner...

<script type="text/javascript">
function poner(que) {
document.getelementbyid("elemento").style.backgrou nd = "url(" + que + ") no-repeat center center";
}

el ejemplo es con estilos para un div con id="elemento", pero puedes poner una imagen y cambiar el atributo src.

Saludos

increible que fuera tan sencillo con el script. Me ha quedado muy bien. Aunque lo unico que hecho en falta es que el cursor cambie para saber que se puede dar un click en el texto. (tipo enlace). Pero por lo otro esta perfecto.
Muchisimas gracias!!!

[caricatos]

Hola:

Iniciado por beryc

increible que fuera tan sencillo con el script. Me ha quedado muy bien. Aunque lo unico que hecho en falta es que el cursor cambie para saber que se puede dar un click en el texto. (tipo enlace). Pero por lo otro esta perfecto.
Muchisimas gracias!!!

Lo del cursor es cuestión de estilos:

cursor: pointer;

Saludos

[beryc]

Iniciado por caricatos

Hola:



Lo del cursor es cuestión de estilos:

cursor: pointer;

Saludos

si si, eso tuve que hacer. gracias crack ;)