Button with icon which changed when i click

Hello

I am beginner. I have a TV server with button to show passwords. This button have icon named 'eye' which is savev in ext.css:

.eye {

background-image: url(../icons/eye.png) !important;

}

Code button in idnode.js is:

if (conf.hidepwd) {

buttons.push('-');

abuttons.add = new Ext.Toolbar.Button({

tooltip: 'Show or hide passwords',

iconCls: 'eye',

text: 'Show passwords',

disabled: false,

handler: function() {

conf.showpwd = !conf.showpwd ? true : false;

this.setText(conf.showpwd ? 'Hide passwords' : 'Show passwords');

roweditor_destroy();

roweditor(select.getSelected());

}

});

buttons.push(abuttons.add);

}

I wnat changed icon for this:

.showPass{

background-image: url(../icons/show_pass.png) !important;

}

.hidePass{

background-image: url(../icons/hide_pass.png) !important;

}

When button have text Show password the icon must be: show_pass.png

When button have text Hide password the icon must be: hide_pass.png

Please help me how changed the code of button to work with this double icon.

Button with icon which changed when i click