Uma rollover image quer dizer que quando se passa o rato a imagem muda e não quando se clica.
Para fazeres aquilo que queres é muito fácil, basta teres um pouco de conheciemento de Javascript (é muito mais difícil fazer uma rollover do que das que tu queres).
Fiz aqui um pequeno exemplo:
Código:
<html>
<head>
<script language="javascript">
function click() {
document.getElementById('img1').src = "(Caminho para a segunda imagem que aparece depois do clique)";
}
</script>
</head>
<body>
<img border="0" id="img1" onclick="click();" src="(Aqui pões a localização da primeira imagem)">
</body>
</html>
Espero que ajude