Cambiar color de fondo con onclick

Freakme · #1 (**permalink**) 15/10/2009, 11:54

Buenas tardes.
Estoy haciendo una aplicación y se me está atragantando lo que debiera ser una tontería. Se genera una galería de fotos organizadas mediante listas(<ul><li>), en cada <li> hay una imagen, un salto de linea y dos <input radio>, para seleccionar o descartar la imagen. La cuestión es que quiero que al clicar en el radio de "Seleccionar", el fondo del <li> se ponga de color verde y al clicar el otro se ponga en rojo.
Llevo casi todo el día dandole vueltas y nada.

<script type="text/javascript">
function seleccionar(){
alert('Cambia el fondo de la celda.');
style.backgroundColor = 'red';}
</script>

<li id='6A5W8179'>

<a href='6A5W8179.JPG' title='6A5W8179.JPG'>

<img src='6A5W8179.JPG' height='150' alt='6A5W8179.JPG' /></a>

<br />

6A5W8179.JPG<br />

<input type='radio' name='6A5W8179.JPG' onClick='guardar()' />Guardar

<input type='radio' name='6A5W8179.JPG' />Descartar</li>

El <a> es porque estoy intentando también usar lightbox, que creo que también tendré que preguntar sobre eso porque no lo consigo tampoco :S

Un saludo y a ver si alguien puede ayudarme.

maycolalvarez · #2 (**permalink**) 15/10/2009, 13:20

document.getElementById('id_object').style.backgroundColor="red";

zerokilled · #3 (**permalink**) 15/10/2009, 14:31

hay multiples formas para llegar a lo mismo. entre ellos, agregar el evento a cada input el cual puede ser tedioso debido a la cantidad de imagenes y a la redundancia de codigo, o agregar un solo evento al elemento padre y manejarte por el modelo de eventos para determinar donde ocurrio el evento y el DOM para llegar hasta el elemnto <li> y aplicarle el color de fondo. seria cuestion de determinar si se preciono un input y cual de los dos. pero para que funcione necesitas mantener una estructura constante.

Código:

<ul><li>
<a><img /></a><br />
imagen.jpg<br />
<input />
<input /></li>

<!-- proximos <li> con la misma estructura anterior -->
</ul>

en el tema capturar onclick en distintos objetos se discute un asunto parecido pero en adicion hay un mensaje que tiene el codigo el cual lo puedes adaptar a tu caso.
(maldiciones, estuve mas de 30 minutos tratando de buscar ese enlace

)

loncho_rojas · #4 (**permalink**) 15/10/2009, 14:36

Que mala costumbre de la gente en no marcar sus codigos con los marcadores... a veces es terriblemente dificultosa la lectura.. por favor.. habituense a poner sus codes en las etiuquetas de codigo:

A ver.. tengo esto, pero lo hago con un SELECT.. espero te sirva para modificarlo

Código PHP:

  <html>
<head>
<script language="javascript" type="text/javascript">
function sel_item(sel)
{
var mystr=""
var len=sel.options.length //cantidad de opciones
for(var i=0;i<len;i++)
{
if (sel.options[i].selected)
mystr=sel.options[i].text
document.bgColor=mystr
}
}
</script>
</head>
<body>
<form name="frm1">
<select name="myselect" size=5 multiple>
<option selected>Yellow</option>
<option>Blue</option>
<option>Green</option>
<option>Silver</option>
<option>Gold</option>
</select>
<input type="button" value="Info"
onclick="sel_item(frm1.myselect)">
</form>
</body>

Freakme · #5 (**permalink**) 15/10/2009, 15:18

Cita:

Iniciado por maycolalvarez

document.getElementById('id_object').style.backgroundColor="red";

Esto no me funciona.

Código:

function guardar(celda){
alert('Cambia el fondo de la celda');
document.getElementById(celda).style.backgroundColor='red';}

Código:

<li>

  <div id='6A5W8179.JPG'>

  <a href='6A5W8179.JPG' title='6A5W8179.JPG'>

  <img src='6A5W8179.JPG' height='150' alt='6A5W8179.JPG' />

</a>

  <br />

  6A5W8179.JPG

<br />

  <input type='radio' name='6A5W8179.JPG' onclick='guardar(6A5W8179.JPG)' />Guardar

  <input type='radio' name='6A5W8179.JPG' />Descartar

</div>

</li>

Freakme · #6 (**permalink**) 16/10/2009, 02:19

Lo solucioné!!! resultó ser un problema de comillas.

Código:

onClick=\"descartar('$id_imagen')\"

Gracias a todos. Un saludo.