Cambiar propiedad background con javascript?

[[HH]KaoS]

Buenas chicos de nuevo! sigo trabajando y siguen los problemillas :)

Sigo con el carrito de compra, y he programado un módulo dinámico donde en el caso de que existan más de 1 foto referente a un artículo puedas ir viendolas con tan solo pulsar un icono "+". El problema es que este icono está dentro de una tabla que tiene como fondo la imagen del artículo.

Ahora lo que no consigo es cambiar el fondo de una tabla con javascript.
Os pongo aquí el código.

Código Javascript

Código:

<script>
	var i=1;
			
	function cambiar() {
		if (i == 1){
			document.getElementById('foto_articulo').background="scripts/thumb.php?ruta=/home/www/XXXX/articles/111_1.jpg&ancho=211&alto=282"
			i=2;
		}
		if (i == 2)
		{
			document.getElementById('foto_articulo').background="scripts/thumb.php?ruta=/home/www/XXXX/articles/111_2.jpg&ancho=211&alto=282"
			i=1;
		}				
	}
</script>

Código HTML

Código:

<table width="211" height="282">
	<tr>
		<td id="foto_articulo" background="scripts/thumb.php?ruta=/home/www/XXXX/articles/111_1.jpg&ancho=211&alto=282">
			<table width="211" height="282">
				<tr>
					<td valign="top" align="right"><img src="imagenes/mas.png" onClick="javascript:cambiar()">

					</td>
				</tr>
				<tr>
					<td valign="bottom"  align="right">
						<img src="imagenes/lupa.png" border="0" onClick="javascript:popUp('scripts/show.php?src=../articles/111_1.jpg',211,282)">
					</td>
				</tr>
			</table>
		</td>

	</tr>
</table>

Aquí está la página:
http://XXXX/

Este es un ejemplo concreto:
http://XXXX/articulo.php?ref=111

¿Se puede hacer eso? o que alternativa me proponeis? (pensé en escribir encima de la imagen y crear un area encima pero me parecía muy enrevesado)
O con hojas de estilo, pero tb es un poco coñazo,¿no?

Gracias amigos :)
Raúl

[[HH]KaoS]

Bueno chicos se me olvidaba decirlo aunque en el código se aprecia, la imagen de fondo de la tabla es un thumb generado dinámicamente en PHP que no sé si realmente eso importa.

Acabo de intentarlo poniendole al td un class y cambiando la propiedad del mismo pero la consola Javascript me devuelve:
"Se esperaba un color, pero se encontró 'scripts'. "

Bueno me voy a dormir que ya es hora :) gracias por todo chicos.
Byeee

[caricatos]

Hola Paisano:

Yo siempre he cambiado los fondos con estilos (y te valdría para cualquier tag)...

<td id="foto_articulo" style="background: url(scripts/thumb.php?ruta=/home/www/nefertec.com/pruebas/bibianblue.com/articles/111_1.jpg&ancho=211&alto=282) no-repeat center center" >

y cambiar lo retocaría poniendo las imágenes en un array y simplemente incrementar el valor de i...

var i = 0;
imgs = ["scripts/thumb.php?ruta=/home/www/nefertec.com/pruebas/bibianblue.com/articles/111_1.jpg&ancho=211&alto=282", "scripts/thumb.php?ruta=/home/www/nefertec.com/pruebas/bibianblue.com/articles/111_2.jpg&ancho=211&alto=282"];

function cambiar() {
document.getElementById('foto_articulo').style.bac kgroundImage ="url(" + imgs[(++i) % imgs.length] + ")";
}

Como verás, poniendo las imágenes en un array solo tienes que incrementar el índice y quedarte con el módulo de la división de la longitud del array se simplifica bastante... (no lo he probado, pero ese algoritmo lo uso con frecuencia)

Saludos

[[HH]KaoS]

Mil gracias paisano!!!

Ya funciona el carrito correctamente :D
He cambiado la función pop up tb de modo que te coge la imagen que se está visualizando (i) y te coge el tamaño por defecto de la imagen en el ftp abriendote un pop up a medida :D.

Gracias de nuevo, sigue así haces un trabajo genial, ya me has sacado de unos cuantos apuros.
Un saludo,
Raúl

[caricatos]

Me alegro de haber sido útil

Seguramente coincidiremos más veces... y quién sabe si no responderás preguntas mías (nunca hice un carrito de compras ¡Je, je !)

Saludos

[silvanha]

hola!

Tengo un pequeño problema, pasa que estoy haciendo una pagina para una muebleria, en la quese muestran los diferentes muebles que tiene, es decir muestra la recamara y sus componentes. El punto es que hay una parte en la que necesito hacer un rollover, en donde esten unos preview de los componentes dela recamara por ejemplo, entonces pues, se me hizo mas sencillo y sano ponerlo como background, que encimar dos tablas y ponerlo como imagen. Con los ejemplos que uds pusieron pues ya lo pude, hacer, el problema es que pongo un onMouseOver sobre cada componente para que este sea mostrado como backgruond de la celda y envio su ruta de componente, pero no.. me lo pone en blanco, y la verdad no entiendo porque...

He aqui el codigo:
en JavaScript:
function Cambia_Imagen(imagen)
{
document.getElementById('foto1').style.backgroundI mage ="url("+imagen.src+")";
}

en HTML:
<table width="530" height="380" cellspacing="20" cellpadding="0" border="1">
<tr>
<td style="background: url('<?php echo $ruta;?>') no-repeat center"
width="510" height="360" bordercolor="#FFFFFF" id="foto1">
<!-- Aqui van los componentes, los saco de la BD con php -->
<table align="right" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="55" height="55" valign="top">
<img src="<?php echo $rutacom;?>" border="0"
width="55" height="55"
onMouseOver="Cambia_Imagen('<?php echo $rutacom;?>');">
</td>
</tr>
</table>
</td>
</tr>
</table>

un ejemplo de la ruta del componente seria:
"/muebles/Salas/Telas/SalaLichen/SofaLichen.jpg"

No se, creo que en la funcion cambia imagen, el "imagen.src", no esta bien

Salu2!.. y de antemano, GRACIAS!

[caricatos]

Hola:

silvanha: En mi ejemplo no se usan objetos image() sino directamente sus direcciones... es cierto que precargándolas sería más eficiente, pero intenta seguir las pautas del código...

... donde imagen es el array de las imágenes.

Saludos

[silvanha]

hola!..

pues que creesss! , deplano no se deja, ahora.. genero el arregloq ue me recomiendas de php, y quedo algo asi, pero sale pero creo yo, porque ahora si no me hace nada de nada.. sabras a que se debe???

Codigo JavaScriptp:
var imagenes = ["muebles/Recamaras/Madera/Colecciones/Recamara Barn/Recamara Barn.jpg","muebles/Recamaras/Madera/Colecciones/Recamara Barn/Buro Barn.jpg","muebles/Recamaras/Madera/Colecciones/Recamara Barn/Cama Barn.jpg","muebles/Recamaras/Madera/Colecciones/Recamara Barn/Comoda Alta Barn.jpg","muebles/Recamaras/Madera/Colecciones/Recamara Barn/Comoda Tv Barn.jpg","muebles/Recamaras/Madera/Colecciones/Recamara Barn/Comoda Wide Barn.jpg","muebles/Recamaras/Madera/Colecciones/Recamara Barn/Ropero Barn.jpg"];

function Cambia_Imagen(i)
{
document.getElementById('foto1').style.backgroundI mage ="url("+imagenes[i]+")";
}

Le mando comoparametro el numero de imagen de acuerdo al arreglo que quiero que me ponga..

Agradesco tu atencion!..GRACIAS!!

salu2!

[silvanha]

Hola!
jejeje, sorry!.. estaba trabajando en Mozila, y me pase a Explorer para ver si hacia lo mismo, y Sorpresa!.. silo hace, es cuestion entonces del Navegador.. chales!.. :(.. sabras entonces algo para que en cualquier navegador me lo haga..:(... empiezo a preocuparme..

salu2!!

[caricatos]

Hola:

La forma de cambiar la imagen es incrementando el índice cada vez que se referencia (i++) y luego se toma el módulo de la división entre la longitud del array de imágenes (% imagenes.length) ... de esa manera cuando se pasa del tamaño del array vuelve otra vez a la primera... infinitas veces (bueno... no es exactamente infinito, pero el número de veces que se vuelva a la primera seguramente será suficiente ... )

saludos

[CHuLoSoY]

Porqué yo si tengo este css:

.menuEncima {
background-image : url('fondo_menu_encima.gif');
}

y este javascript:

function menuEncima(id) {

document.getElementById(id).className = 'menuEncima';

}

y este html:

<TD id=menu1 name=menu1 width="100%"><a href="x" class=menuEnlace onmouseover="javascript:menuEncima('menu1');" onmouseout="javascript:menuFuera('menu1');">XX</a></TD>

No me funciona????????'

He probado mil maneras que siempre me han funcionado (incluso he probado a cambiar el fondo con javascript con document.GetElementById(id).style.backgroundImage y no me funciona).

Si estas cosas siempre me funcionaron, qué puede estar pasando? Puede ser mi navegador? Ahora mismo uso Firefox3beta5.
Gracias amigos.