Usando apenas JavaScript, podes adicionar a um elemento, neste caso é a tag `img`, dois eventos ([mousedown](https://developer.mozilla.org/pt-BR/docs/Web/Events/mousedown) e [mouseup](https://developer.mozilla.org/en-US/docs/Web/Events/mouseup)), estes iram alterar a propriedade `type` do `input`, alternando entre `text` e `password`. Veja um exemplo: <!-- begin snippet: js hide: false --> <!-- language: lang-js --> document.getElementById('olho').addEventListener('mousedown', function() { document.getElementById('pass').type = 'text'; }); document.getElementById('olho').addEventListener('mouseup', function() { document.getElementById('pass').type = 'password'; }); // Para que o password não fique exposto apos mover a imagem. document.getElementById('olho').addEventListener('mousemove', function() { document.getElementById('pass').type = 'password'; }); <!-- language: lang-css --> #pass { width: 150px; padding-right: 20px; } .olho { cursor: pointer; left: 160px; position: absolute; width: 20px; } <!-- language: lang-html --> <img src="https://cdn0.iconfinder.com/data/icons/ui-icons-pack/100/ui-icon-pack-14-512.png" id="olho" class="olho"> <input type="password" id="pass"> <!-- end snippet -->