Cambiar boton por imagen...

[andrewp]

Hola...

No soy muy experto en JavaScript y es por eso que os pido vuestra ayuda...

Tengo un .JS que sirve para subir multiples archivos a un servidor, acompañado de un formulario típico en PHP.
El caso, es que el código de JS me muestra un botón para eliminar el archivo de la lista (delete) pero es muy grande y me gustaría cambiarlo por una imagen más agradable (línea 33 y 34). El código es el siguiente:

Código Javascript:

function MultiSelector( list_target, max ){
    this.list_target = list_target;
    this.count = 0;
    this.id = 0;
    if( max ){this.max = max;
    } else {
        this.max = -1;};
    this.addElement = function( element ){
        if( element.tagName == 'INPUT' && element.type == 'file' ){
            element.name = 'file_' + this.id++;
            element.multi_selector = this;
            element.onchange = function(){
                var new_element = document.createElement( 'input' );
                new_element.type = 'file';
                this.parentNode.insertBefore( new_element, this );
                this.multi_selector.addElement( new_element );
                this.multi_selector.addListRow( this );
                this.style.position = 'absolute';
                this.style.left = '-5000px';
            };
            if( this.max != -1 && this.count >= this.max ){
                element.disabled = true;
            };
            this.count++;
            this.current_element = element;
        } else {
            alert( 'Error: not a file input element' );
        };
    };
    this.addListRow = function( element ){
        var new_row = document.createElement( 'div' );
        var new_row_button = document.createElement( 'input' );
        new_row_button.type = 'button';
        new_row_button.value = 'Delete';
        new_row.element = element;
        new_row_button.onclick= function(){
            this.parentNode.element.parentNode.removeChild( this.parentNode.element );
            this.parentNode.parentNode.removeChild( this.parentNode );
            this.parentNode.element.multi_selector.count--;
            this.parentNode.element.multi_selector.current_element.disabled = false;return false;
        };
        new_row.innerHTML = element.value;
        new_row.appendChild( new_row_button );
        this.list_target.appendChild( new_row );
    };
};
 

En cualquier caso, las líneas son:

Código Javascript:

new_row_button.type = 'button';
new_row_button.value = 'Delete';
 

Sabéis cómo puedo hacerlo?

Gracias!

[emprear]

Bastaría que le apliques una clase al input y que la definas en tu css

Código Javascript:

new_row_button.className = 'btn';
 

Código CSS:

<style type="text/css">
/*<![CDATA[*/
 
/* estilos */ 
.btn{
background-color: yellow;
width: 100px;
height: 30px;
}
/*]]>*/
</style>
 

Podés quitarle el borde, darle un background transparente con una imagen de fondo, etc

Saludos

[andrewp]

Hola emprear... Muchas gracias, tu post me resultado de gran ayuda.

Para compartir la solución, solo debo añadir que en el código CSS, en vez de añadir un color, he añadido el path a mi imagen:

Código CSS:

<style type="text/css">
.btn {
  background-image: url('/path/botonborrar.jpg');
  width: 20px;
  height: 20px;
  border: none;
}
</style>
 

Gracias!!!!!

POST RESUELTO

[caricatos]

Hola:

Por cierto, no debes entrecomillar la url de tu imagen... me refiero al estilo background-image (y me alegro que hayas resuelto el tema).

Saludos