Trabajo con imágenes

[markmb]

Tengo en una página, una foto grande, y debajo unos thumbnails, unas fotos en pequeño.

Quisiera que al pulsar sobre uno de los thumbnails, se mostrase en el cuadro grande, y ya lo he conseguido (esto es el código fuente, en el original tiene también PHP):

Código HTML:

<script language="javascript">
var id=1;
imagen1=new Image
imagen1.src="imgs/1278502949_3.jpg"
imagen2=new Image
imagen2.src="imgs/1278502949_4.jpg"
imagen3=new Image
imagen3.src="imgs/1278502950_5.jpg"
function cambiar(id) {
if (id == 1){
            document.images["fotog"].src=imagen1.src
}else if (id == 2){
            document.images["fotog"].src=imagen2.src
}else{
            document.images["fotog"].src=imagen3.src;
            }

document.images['foto' + id].border=2;
}
</script><div id="imgg">
<img src="imgs/1278502949_3.jpg" title="Imagen" name="fotog" alt="Imagen principal" />
</div>
<div id="thumbs">
<img src="thmbs/1278502949_3.jpg" title="Imagen" alt="Imagen secundaria" name="foto1" onMousedown="cambiar(1)" border=2/>
<img src="thmbs/1278502949_4.jpg" title="Imagen" alt="Imagen secundaria" name="foto2" onMousedown="cambiar(2)"/>
<img src="thmbs/1278502950_5.jpg" title="Imagen" alt="Imagen secundaria" name="foto3" onMousedown="cambiar(3)"/>
</div>
</div> 

Lo de cambiar las fotos va perfectamente, pero el problema viene a la hora del borde (para que quede mejor).

Como veréis si lo probáis, lo que ocurre es que se pone el borde, pero no se quita. Cómo podría hacerlo?

Edito: me imagino que poniendo "border=0", pero no se como ponerlo en el javascript

[markmb]

Y he aquí la respuesta:

Código HTML:

for (i=0;i<document.images.length;i++){
    if (document.images[i].border != 0){
        document.images[i].border = 0;
    }
}
document.images['foto' + id].border=2;

Este sería todo el código entero:

Código PHP:

 <div id="contimg">
<?php
$resto = '';
echo ('<script language="javascript">'."\n");
echo ('var id=1;'."\n");
for ($i = 1; $i<=count($img); $i++){
    echo ('imagen'.$i.'=new Image'."\n");
    echo ('imagen'.$i.'.src="imgs/'.$img[$i-1].'"'."\n");
    if ($i == 1){
        $resto .= 'if (id == 1){
            document.images["fotog"].src=imagen1.src'."\n";
    }else if ($i == count($img)){
        $resto .= '}else{
            document.images["fotog"].src=imagen';
        $resto .= $i;
        $resto .= '.src;
            }'."\n";
    }else{
        $resto .= '}else if (id == ';
        $resto .= $i;
        $resto .= '){
            document.images["fotog"].src=imagen';
        $resto .= $i;
        $resto .= '.src';
        $resto .= "\n";
    }
}
echo ('function cambiar(id) {'."\n");
echo $resto."\n";
echo 'for (i=0;i<document.images.length;i++){
    if (document.images[i].border != 0){
        document.images[i].border = 0;
    }
}'."\n";
echo "document.images['foto' + id].border=2;"."\n";
echo '}'."\n";
echo ('</script>');
?>
<div id="imgg">
<img src="imgs/<?php echo $img[0]; ?>" title="Imagen" name="fotog" alt="Imagen principal" />
</div>
<div id="thumbs">
<?php
$i = 1;
foreach ($img as $path){
    echo ('<img src="thmbs/'.$path.'" title="Imagen" alt="Imagen secundaria" name="foto'.$i.'" onMousedown="cambiar('.$i.') "');
    if ($i == 1){
        echo ('border=2');
    }
    echo ('/>');
    $i++;
}
?></div>
</div>  

($img es un array con las rutas a las fotos)

[markmb]

Espero que alguien lea esto:

En el script anterior, me gustaría hacer también que el borde tuviese un color, que sería así:

Código:

style='border-color:#FF00FF';

Pero si lo pongo así:

Código:

document.images['foto' + id].style='border-color:#FF00FF';

no va. Como podría hacerlo?

[xziolhvinvhgl]

hola markmb

para lo del border-color en HTML como ya sabras seria style='border-color:#FF00FF';

pero en javascript las referencias a estilos que tienen un guion de por medio se escriben pegados y con la primera letra de la segunda referencia en mayuscula

ejemplo
HTML : border-color:#004488;
JAVASCRIPT : borderColor = '#004488';
HTML : background-color:#003399;
JAVASCRIPT :backgroundColor = '#003399';

ESPERO TE SEA UTIL...SALUDOS

[stock]

O tambien podrías usar el método "setAttribute" para asignarle el atributo "style" con los estilos que necesites.

[markmb]

Va perfecto con setAttribute. Mirad esto: http://www.syntaxerror.es/2007/01/22...rnet-explorer/

Y quedaría así:

Código:

document.images['foto' + id].border=2;
document.images['foto' + id].setAttribute('className','bfoto');
document.images['foto' + id].setAttribute('class','bfoto');

El segundo y el tercero son lo mismo, pero si os miráis el enlace que he puesto explica por qué.

[caricatos]

Hola:

Para modificar el atributo class, en vez de setAttribute, basta con usar .className:

document.images['foto' + id].className = "bfoto";

Saludos

[markmb]

Da igual de una forma u otra, deberia funcionar igual. Pero gracias igualmente