javascript y css no funciona class ni classname

[franjgg]

Hola como estan, miren mi cuestion es la siguiente tengo esta funcion.

La cosa es que me gustaria acceder a cada una de esas imagenes desde una hoja de estilos.


if (document.images)
{
pic1on= new Image();
pic1on.src ="app_themes/theme001/images/2.jpg";
pic2on= new Image();
pic2on.src="app_themes/theme001/images/2.jpg";
pic3on= new Image();
pic3on.src="app_themes/theme001/images/2.jpg";
pic4on= new Image();

pic4on.src="app_themes/theme001/images/2.jpg";
pic5on= new Image();
pic5on.src="app_themes/theme001/images/2.jpg";
pic6on= new Image();
pic6on.src="app_themes/theme001/images/2.jpg";


pic7on= new Image();
pic7on.src="app_themes/theme001/images/2.jpg";
pic8on= new Image();
pic8on.src="app_themes/theme001/images/2.jpg";
pic9on= new Image();
pic9on.src="app_themes/theme001/images/2.jpg";



pic1off= new Image();
pic1off.src="app_themes/theme001/images/CornerleftTopImagePicker.png";
pic2off= new Image();
pic2off.src="app_themes/theme001/images/CenterTopImageMPFImage.png";
pic3off= new Image();
pic3off.src="app_themes/theme001/images/CornerRightTopMPFImage.png";

pic4off= new Image();
pic4off.src="app_themes/theme001/images/SideLeftTitleMPFImage.png";
pic5off= new Image();
pic5off.src="app_themes/theme001/images/1.jpg";

pic6off= new Image();
pic6off.ids = "hover";
pic6off.src="app_themes/theme001/images/SideRightTitleMPFImage.png";


pic7off= new Image();
pic7off.src="app_themes/theme001/images/sw1.png";
pic8off= new Image();
pic8off.src="app_themes/theme001/images/CenterBottom.png";
pic9off= new Image();
pic9off.src="app_themes/theme001/images/w15.png";
}

[wigglyUtrera]

picXoff.id = "id_imagen_X" o tambien podras asignarle una clase

picXoff.class = "class_imagen"


Saludos

[franjgg]

si he probado de este modo pero no funciona:

pic6off= new Image();
pic6off.src="app_themes/theme001/images/SideRightTitleMPFImge.png";
pic6off.id = "class_imagen";

y en el archivo de la hoja de estilo:

.class_imagen
{

background-color:Blue;
height:10px;

}

pero no se por que no funciona es raro no?
preferiria utilizar el class pero me da un error en el navegador no se cual es la razon

[JavierB]

Hola franjgg

Prueba con esto:

Código:

pic6off= new Image();
pic6off.src="app_themes/theme001/images/SideRightTitleMPFImge.png";
pic6off.className = "class_imagen";

Saludos,

[franjgg]

tampoco funciona miren voi a poner el codigo completo


<script type="text/javascript" language="JavaScript">
<!--



if (document.images)
{
pic1on= new Image();
pic1on.id;
pic1on.src ="app_themes/theme001/images/2.jpg";
pic2on= new Image();
pic2on.src="app_themes/theme001/images/2.jpg";
pic3on= new Image();
pic3on.src="app_themes/theme001/images/2.jpg";
pic4on= new Image();

pic4on.src="app_themes/theme001/images/2.jpg";
pic5on= new Image();
pic5on.src="app_themes/theme001/images/2.jpg";
pic6on= new Image();
pic6on.src="app_themes/theme001/images/.jpg";
pic6on.className = "class_imagen";


pic7on= new Image();
pic7on.src="app_themes/theme001/images/2.jpg";
pic8on= new Image();
pic8on.src="app_themes/theme001/images/2.jpg";
pic9on= new Image();
pic9on.src="app_themes/theme001/images/2.jpg";



pic1off= new Image();
pic1off.src="app_themes/theme001/images/CornerleftTopImagePicker.png";
pic2off= new Image();
pic2off.src="app_themes/theme001/images/CenterTopImageMPFImage.png";
pic3off= new Image();
pic3off.src="app_themes/theme001/images/CornerRightTopMPFImage.png";

pic4off= new Image();
pic4off.src="app_themes/theme001/images/SideLeftTitleMPFImage.png";
pic5off= new Image();
pic5off.src="app_themes/theme001/images/1.jpg";

pic6off= new Image();
pic6off.src="app_themes/theme001/images/SideRightTitleMPFImge.png";
pic6off.className = "class_imagen";

pic7off= new Image();
pic7off.src="app_themes/theme001/images/sw1.png";
pic8off= new Image();
pic8off.src="app_themes/theme001/images/CenterBottom.png";
pic9off= new Image();
pic9off.src="app_themes/theme001/images/w15.png";
}

function lightup(imgName,imgName2,imgName3,imgName4,imgName 5,imgName6,imgName7,imgName8,imgName9)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
imgOn2=eval(imgName2 + "on.src");
document[imgName2].src= imgOn2;
imgOn3=eval(imgName3 + "on.src");
document[imgName3].src= imgOn3;
imgOn4=eval(imgName4 + "on.src");
document[imgName4].src= imgOn4;
imgOn5=eval(imgName5 + "on.src");
document[imgName5].src= imgOn5;
imgOn6=eval(imgName6 + "on.src");
document[imgName6].src= imgOn6;
imgOn7=eval(imgName7 + "on.src");
document[imgName7].src= imgOn7;
imgOn8=eval(imgName8 + "on.src");
document[imgName8].src= imgOn8;
imgOn9=eval(imgName9 + "on.src");
document[imgName9].src= imgOn9;
}
}

function turnoff(imgName,imgName2,imgName3,imgName4,imgName 5,imgName6,imgName7,imgName8,imgName9)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
imgOff2=eval(imgName2 + "off.src");
document[imgName2].src= imgOff2;
imgOff3=eval(imgName3 + "off.src");
document[imgName3].src= imgOff3;
imgOff4=eval(imgName4 + "off.src");
document[imgName4].src= imgOff4;
imgOff5=eval(imgName5 + "off.src");
document[imgName5].src= imgOff5;
imgOff6=eval(imgName6 + "off.src");
document[imgName6].src= imgOff6;
imgOff7=eval(imgName7 + "off.src");
document[imgName7].src= imgOff7;
imgOff8=eval(imgName8 + "off.src");
document[imgName8].src= imgOff8;
imgOff9=eval(imgName9 + "off.src");
document[imgName9].src= imgOff9;
}
}
//-->
</script>



<table id="panel" border="1">
<tr>
<td onmouseover="lightup('pic1','pic2','pic3','pic4',' pic5','pic6','pic7','pic8','pic9') " onmouseout="turnoff('pic1','pic2','pic3','pic4','p ic5','pic6','pic7','pic8','pic9')">
<img src="app_themes/theme001/images/CornerleftTopImagePicker.png" alt="panel" name="pic1">
</td>
<td onmouseover="lightup('pic1','pic2','pic3','pic4',' pic5','pic6','pic7','pic8','pic9')" onmouseout="turnoff('pic1','pic2','pic3','pic4','p ic5','pic6','pic7','pic8','pic9')">
<img src="app_themes/theme001/images/CenterTopImageMPFImage.png" alt="panel" name="pic2">
</td>
<td onmouseover="lightup('pic1','pic2','pic3','pic4',' pic5','pic6','pic7','pic8','pic9')" onmouseout="turnoff('pic1','pic2','pic3','pic4','p ic5','pic6','pic7','pic8','pic9')">
<img src="app_themes/theme001/images/CornerRightTopMPFImage.png" alt="panel" name="pic3">
</td>
</tr>
<tr>
<td onmouseover="lightup('pic1','pic2','pic3','pic4',' pic5','pic6','pic7','pic8','pic9') " onmouseout="turnoff('pic1','pic2','pic3','pic4','p ic5','pic6','pic7','pic8','pic9')">
<img src="app_themes/theme001/images/SideLeftTitleMPFImage.png" alt="panel" name="pic4">
</td>
<td onmouseover="lightup('pic1','pic2','pic3','pic4',' pic5','pic6','pic7','pic8','pic9')" onmouseout="turnoff('pic1','pic2','pic3','pic4','p ic5','pic6','pic7','pic8','pic9')">
<img src="app_themes/theme001/images/1.jpg" alt="panel" name="pic5">
</td>
<td onmouseover="lightup('pic1','pic2','pic3','pic4',' pic5','pic6','pic7','pic8','pic9')" onmouseout="turnoff('pic1','pic2','pic3','pic4','p ic5','pic6','pic7','pic8','pic9')">
<img src="app_themes/theme001/images/SideRightTitleMPFImage.png" alt="panel" name="pic6">
</td>
</tr>
<tr>
<td onmouseover="lightup('pic1','pic2','pic3','pic4',' pic5','pic6','pic7','pic8','pic9') " onmouseout="turnoff('pic1','pic2','pic3','pic4','p ic5','pic6','pic7','pic8','pic9')">
<img src="app_themes/theme001/images/sw1.png" alt="panel" name="pic7">
</td>
<td onmouseover="lightup('pic1','pic2','pic3','pic4',' pic5','pic6','pic7','pic8','pic9')" onmouseout="turnoff('pic1','pic2','pic3','pic4','p ic5','pic6','pic7','pic8','pic9')">
<img src="app_themes/theme001/images/CenterBottom.png" alt="panel" name="pic8">
</td>
<td onmouseover="lightup('pic1','pic2','pic3','pic4',' pic5','pic6','pic7','pic8','pic9')" onmouseout="turnoff('pic1','pic2','pic3','pic4','p ic5','pic6','pic7','pic8','pic9')">
<img src="app_themes/theme001/images/w15.png" alt="panel" name="pic9">
</td>
</tr>
</table>

es un panel que cambio de estilo al hacer hover, el panel lo componen un seria de images que son las que qiero controlar desde el archivo de la hoja de estilos pero no funciona, y no entiendo lo hice tal como me dijeron pero nada

Seria necesario referenciarlo a la hoja de estilos?
Trabajo con visualestudio por si les sirve de algo

[derkenuke]

Intenta simplificar el código. 100 lineas iguales funcionan igual que una. Didácticamente se comprende mejor.

A mi este ejemplo me funciona con normalidad:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Author" content="derkeNuke">
<style>
.borde1 {
    border: solid 2px black;
}
.borde2 {
    border: dashed 2px red;
}
</style>
</head>

<body>



<script>

var uno=new Image();
uno.src="http://www.forosdelweb.com/images/buttons/multiquote_off.gif"
var dos=new Image();
dos.src="http://www.forosdelweb.com/images/buttons/quickreply.gif";

function cambia(imagen) {
    if( imagen.src==uno.src ) {
        imagen.src=dos.src;
        imagen.className="borde2";
    }
    else {
        imagen.src=uno.src;
        imagen.className="borde1";
    }
}

</script>

<img class="borde1" src="http://www.forosdelweb.com/images/buttons/multiquote_off.gif" onmouseover="cambia(this)" onmouseout="cambia(this)" />

</body>
</html> 
  

Deberías hacer un par de alert() entre tu código para ver si accedes bien a las imagenes, si están bien referenciadas.



Un saludo.