[Totalmente Resolvido] JSF e listener em imagem

<br/>

<a4j:outputPanel id="gallery">
    <h:graphicImage value="/images/imagem.jpg" />
   <h:graphicImage value="/images/imagem2.jpg" />
</a4j:outputPanel>  

<br style="clear:both" />


<rich:jQuery selector="#gallery img" query="addClass('pic-normal')"/>
<rich:jQuery selector="#gallery img" query="wrap('&lt;div class=\'wrap1\'&gt;&lt;/div&gt;')" />
<rich:jQuery selector="#gallery img" query="mouseover(function(){enlargePic(this)})"/>
<rich:jQuery selector="#gallery img" query="mouseout(function(){normalPic(this)})"/>

<rich:jQuery name="enlargePic" timing="onJScall" query="stop().animate({width:'180px'})" />
<rich:jQuery name="normalPic" timing="onJScall" query="stop().animate({width:'120px'})" />

Olá pessoal, primeiramente gostaria de agradecer muito a colaboração de todos vcs pela força que estão me dando.

Com relação aos exemplos que me passaram, não sabia que tinha tanto recurso bacana que poderia aplicar, porém continuo com uma dificuldade de associar um listener que está no meu bean à imagem (que tem a função de um botão). O listener está pronto, porém so consigo chama-lo se utilizar um component ImageHyperlink, porem se utilizar esse componente, nao consigo fazer a imagem ter zoom no mouseover.

Testei algumas das técnicas que me passaram e consegui fazer a imagem ter zoom, porém nao consegui associar ao listener que esta no meu código java… <img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14/assets/72x72/f.pngrowning.png?v=6" title=":frowning:" class="emoji" alt=":frowning:">

Desculpem pelas perguntas, mas é que estou começando no desenvolvimento web, estou lendo bastante, porém quanto mais me aprofundo em determinado assunto, mais vejo que existe muito a aprender;

Se puderem quebrar esse galho pra mim, mesmo nao sendo a resposta imediata, mas onde busco recursos para tentar resolver esse problema agradeço de novo (referente a parte de integraçao do zoom com o listener)

Abraço galera!!!

<webuijsf:button binding="#{Logon.entrarBotao}" id="entrarBotao" text="Entrar"/>
  <webuijsf:button binding="#{Logon.biometriaBotao}" id="biometriaBotao" text="Biometria"/>
                                
  <a4j:outputPanel id="gallery">
          <h:graphicImage value="/img/entrar_zoom.png" onclick="document.getElementById('entrarBotao').click();"/>
  </a4j:outputPanel>
  <rich:jQuery query="addClass('pic-normal')" selector="#gallery img"/>
  <rich:jQuery query="wrap('&lt;div class=\'wrap1\'&gt;&lt;/div&gt;')" selector="#gallery img"/>
  <rich:jQuery query="mouseover(function(){enlargePic(this)})" selector="#gallery img"/>
  <rich:jQuery query="mouseout(function(){normalPic(this)})" selector="#gallery img"/>
  <rich:jQuery name="enlargePic" query="stop().animate({width:'100px'})" timing="onJScall"/>
  <rich:jQuery name="normalPic" query="stop().animate({width:'50px'})" timing="onJScall"/>

<h:graphicImage value="/img/entrar_zoom.png" onclick="document.getElementById('entrarBotao').click();"/>

onclick="document.getElementById('form1:entrarBotao').click();"

<webuijsf:button binding="#{Logon.entrarBotao}" id="entrarBotao" text="Entrar"/>  
<webuijsf:button binding="#{Logon.biometriaBotao}" id="biometriaBotao" text="Biometria"/>  
                          
<a4j:outputPanel id="gallery">  
        <h:graphicImage value="/img/entrar_zoom.png" onclick="document.getElementById('entrarBotao').click();"/>  
</a4j:outputPanel>  
<rich:jQuery query="addClass('pic-normal')" selector="#gallery img"/>  
<rich:jQuery query="wrap('<div class=\'wrap1\'></div>')" selector="#gallery img"/>  
<rich:jQuery query="mouseover(function(){enlargePic(this)})" selector="#gallery img"/>  
<rich:jQuery query="mouseout(function(){normalPic(this)})" selector="#gallery img"/>  
<rich:jQuery name="enlargePic" query="stop().animate({width:'100px'})" timing="onJScall"/>  
<rich:jQuery name="normalPic" query="stop().animate({width:'50px'})" timing="onJScall"/>   


Na linha onde chamo o onclick da imagem estava referenciando o id do botao 'entrarBotao' da forma correta, porem este componente estava dentro de um componente dynamicpane, entao a forma correta de declaraçao do mesmo metodo seria: 
<h:graphicImage value="/img/entrar_zoom.png" onclick="document.getElementById('form1:dynamicPanel:entrarBotao').click()

Com isso resolvi este problema :D, porém surgiu outro, que acredito ser mais simples de resolver:
Como faço para esconder o botão que coloquei na tela para gerar o metodo bindado na minha classe, sem perder a funcionalidade do mesmo, já que o usuário não precisará enxerga-lo pois clicara na imagem que tera zoom no clique para gerar a ação???

Olá Scott, valew pela ajuda... Com relação a colocação que fez sobre o uso do dojo, baixei o mesmo e incorporei na aplicação, porem fiz a chamada do metodo com disse da forma descrita acima e não gerou erros... nao coloquei false(como sou um pouco leigo com relação a utilização não sei que influencia teria,rs) e nao não fiz a chamada da funçao eval que vc comentou... Vc acha que isso poderá acarretar algum erro futuro, mesmo nao tendo acontecido nada agora??? Mas uma vez valeu pela ajuda!!!

Mais uma vez muito obrigado a todos pela ajuda, e fico no aguardo da solução para resolver esse outro problema para matar a charada de vez!!!! 
Abraçaum galera :D

<h:form id="accessfast">
    <div id="msgPrincipal">
      <div id="tituloMsg">Acesso Rapido</div>
      <div id="Msg">
        <ul  class="acessoRapido">
          <li>
          <a4j:outputPanel id="gallery"> 
            <h:graphicImage id="image1" url="/pages/imagens/icon-48-user-add.png" onclick="document.getElementById('accessfast:addPF').click();"/>
          </a4j:outputPanel>

	<br style="clear:both" />


    <rich:jQuery selector="#gallery img" query="addClass('pic-normal')"/>
    <rich:jQuery selector="#gallery img" query="wrap('&lt;div class=\'wrap1\'&gt;&lt;/div&gt;')" />
    <rich:jQuery selector="#gallery img" query="mouseover(function(){enlargePic(this)})"/>
    <rich:jQuery selector="#gallery img" query="mouseout(function(){normalPic(this)})"/>
    
    <rich:jQuery name="enlargePic" timing="onJScall" query="stop().animate({width:'120px'})" />
    <rich:jQuery name="normalPic" timing="onJScall" query="stop().animate({width:'80px'})" />
    


          </li>
          <li id="acessoRapido">
            <h:commandLink value="Adcionar Pessoa Física" action="#{ddmenu.cadastraFuncionario}" id="addPF"/>
          </li>
        </ul>