ayuda con funcion para cambiar imagen de una clase

thedarkman · #1 (**permalink**) 08/05/2010, 12:33

Hola, un saludo a todos ...
estoy empezando a dar mis primeros pasos con JS y tengo el siguiente problemq:

tengo en un css la siguiente clase:

Código:

.ficha{
	width:100px;
	height:inherit;
	background-image: url(../imagenes/mi_ficha.png);
	float: left;
	color:#ffffff;
}

y en mi html el suguiente codigo:

Cita:

y por último, en imagenes.js:

Cita:

function CambiaFicha(){
document.getElementById('ficha').style.width="50px ";
}

y el caso es que no me fuciona .... no em cambia el valor de with ...

que estoy haciendo mal, salu2.,

zerokilled · #2 (**permalink**) 08/05/2010, 12:38

no te funciona porque el elemento no tiene el ID indicado en getElementById. clase y id no es lo mismo. lo que puedes hacer es cambiar clase por id en el css y html. nota aparte, no puede haber mas de un elemento con el mismo valor de ID.

thedarkman · #3 (**permalink**) 08/05/2010, 13:05

Cita:

Iniciado por zerokilled

no te funciona porque el elemento no tiene el ID indicado en getElementById. clase y id no es lo mismo. lo que puedes hacer es cambiar clase por id en el css y html. nota aparte, no puede haber mas de un elemento con el mismo valor de ID.

es que no puedo usar un id, ya que en el html lo utilizo por 5 veces y W3C no valida el uso de varios ids iguales en una misma página, te obliga a usar clases para eso ...

zerokilled · #4 (**permalink**) 08/05/2010, 23:34

pues deja todo como lo tenias y asigna ID. es decir, los elementos tendran clases y IDs, pero por supuesto, cada ID diferente.

thedarkman · #5 (**permalink**) 09/05/2010, 04:48

ok, voy a probar lo que me has dicho ..
de todas formas, explico lo que quiero hacer por que a lo mejor hay alguna forma más sencilla de hacerlo y yo me estoy complicando tontamente ..

tengo un menú con varias pestañas de acceso de la clase 'ficha' y esa clase tiene una imagen de fondo que es la que representa la ficha .. lo que quiero es que cuando se pase el ratón por encima la imagen de la ficha cambie por otra de distinto color y forma para que de la sensación de que se ha seleccionado ...

salu2.

ayadiendo el atributo id me funciona, al final el código HTML es este:

Código:

<span class="ficha" id="f1" onmouseover="CambiaFicha('f1');" 
               onmouseout="RestauraFicha('f1');">
                      <a href="./tecnHTML.html" target="principal">HTML</a>
	</span>

y en JS:

Código:

function CambiaFicha(id){

  document.getElementById(id).className="ficha_activa";

}



function RestauraFicha(id){

  document.getElementById(id).className="ficha";

}

donde ficha y ficha_activa definen distintos formatos ....

¿Cómo lo ves ??? otra forma mejor de hacerlo ???

salu2 y muchas gracias por la ayuda ...

Panino5001 · #6 (**permalink**) 09/05/2010, 08:34

Usa className:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<style>

.a{background:#F00 /*y/o lo que quieras*/}

.b{background:#00F /*y/o lo que quieras*/}

</style>

</head>

 
<body>

<div class="a" onmouseover="this.className='b'" onmouseout="this.className='a'">&nbsp;</div>

</body>

</html>

abimaelrc · #7 (**permalink**) 09/05/2010, 09:05

O puedes indicar hover en el mismo css

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<style>
.a{ background-color: #00f; }
.a:hover{ background-color: #f00; }
</style> 
</head> 
<body> 
<div class="a">&nbsp;</div> 
</body> 
</html>

thedarkman · #8 (**permalink**) 09/05/2010, 13:09

Hola, antes de nada, gracias a todos por vuestra ayuda ...
en principio cambiando el className del identificador ya me funciona OK, el caso es que no es exactamente lo que se me pide ...
lo que debería hacerlo mediante el objeto Style pero no acabo de con la forma de hacerlo

el caso, es llamanod a una funcion con el valor del identificador de mi elemento span, debería cambiar los atributos backgroud y color de esa clase,

algo así cómo :

Código:

<span class="ficha" id="f1" onmouseover="CambiaFicha('f1',  '#ffffff');" .... >
   ...
   ...

function CambiaFicha(id, color_){
   document.getElementById(id).style.color = color_;
   ...
}

salu2 y gracias de nuevo ...

pd: tengo que hacerlo mediante javascript ...

abimaelrc · #9 (**permalink**) 09/05/2010, 18:21

Esto me huele a asignación

thedarkman · #10 (**permalink**) 09/05/2010, 23:33

si claro, es un trabajo que tengo que hacer , del que me quedan un par de cosas que no acabo de dar con la tecla ...

salu2.

pd: no estoy pidiendo que nadie me de la solución, sólo ideas de como hacerlo ...