Gostaria de saber como fazer com que uma imagem aumente de tamanho ao passar o mouse por cima da mesma e ao mesmo tempo adicionar uma action que será acionada quando o usuário clicar nela, action esta declarada no arquivo .java referente ao mesmo .jsp.
Estou utilizando netbeans 6 para desenvolver.
Atualmente estou conseguindo inserir a imagem e fazer com que ela se comporte como um botao, utilizando o componente webuijsf:imageHyperlink, realizando a chamada da action normalmente, porém nao consigo fazê-la aumentar de tamanho (como se fosse um zoom)…
Se alguem tiver alguma idéia para me ajudar a resolver o problema, agradeço;
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…
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!!!
Explicando melhor…
Basicamente (que para mim não é tão básico) o que preciso é fazer com que um evento onclick de uma imagem existente em uma página jsp execute uma action existente no meu managed beam.
Se eu substituir a imagem por um commandbutton rola normal, porem com uma imagem ta dificultando bastante.
Se alguem tive alguma idéia eu agradeço muito…
Abraço a todos
E ae galera, consegui implementar os exemplos utilizando JQuery na minha página, ou seja consigo inserir as images e aplicar zoom nas mesmas.
Porém nao consegui associar o click na imagem ao action localizado no meu managed bean
O componente que estou utilizando para armazenar a imagem é um <h:graphicImage>, pois acredito que seja o único que possa incluir no jQuery…
Aguém tem alguma idéia de como posso fazer para associar um listener (localizado no bean) ao click na imagem???
Valew e fico no aguardo!!!
E ae , implementei da seguinte forma, conforme explicação do pessoal, porém é gerado um erro na página no momento que clico na imagem…
Segue código para análise:
vc está chamando o evento click certo. Quem sabe o nome do form que o botao está dentro não seja form1, então você precisa identificar bem certo qual é o id do botao que você quer chamar. O fireBug é um ótimo inspector pra esse tipo de coisa. É um plugin do Firefox muito fácil de usar…
Mais uma coisinha. Quando vc chama um clique do botão por Javascript desse jeito, chamando uma função JSF, veja que na verdade você não está utilizando JSF de forma correta. Com isso alguns bugs podem vir à tona.
Descobri na minha aplicação, quando utilizei dessa estratégia, um bug com relação a isso. Eu tive que baixar uma biblioteca Javascript chamada DOJO, substituir a parte “return false” da string de click do botao para " ". e executei a funcao chamando a funcao da biblioteca javascript “eval”.
Então agora o que vc precisa é identificar qual erro realmente está acontecendo. Se você utiliza o firebug, dá pra debugar o javascript e saber se não está conseguindo pegar o botão, ou não está conseguindo executar.
E ae galera, muito obrigado pela ajuda!!!
A parte de identificação do id do botão foi fundamental para resolução do problema, juntamente com a dica de uso do firebug :lol:
Descobri que o erro que estava comentendo era o seguinte:
<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
Valew galera, com esta ultima ajuda para esconder o botao, consegui resolver todos os itens pendentes aqui, (pelo menos por hora, rsrsrs)!!!
Mais uma vez muito obrigado a todos pela colaboração!!!
Abraçaum!!!
[quote=barcellosrod]Valew galera, com esta ultima ajuda para esconder o botao, consegui resolver todos os itens pendentes aqui, (pelo menos por hora, rsrsrs)!!!
Mais uma vez muito obrigado a todos pela colaboração!!!
Abraçaum!!! [/quote]
Olá barcellosrod, td bem?
Amigo, estou com um problema semelhante ao seu, só que ao clicar na imagem, o meu commandLink não é executado.
