none
Executar evento/método ao passar mouse em cima do texto RRS feed

  • Pergunta

  • Pessoal,

    Preciso executar um método ao passar o mouse em cima de um texto, onde esse pode ser qualquer coisa: label, linkbutton, hyperlink...

    Como faço isso ?

    Desde já, agradeço.

    quarta-feira, 7 de março de 2012 15:00

Respostas

  • Sim, faça o seguinte:

    <html>
    <body>
    	<div id="teste">aaaaaaaa</div>
    </body>
    <script>
    	document.getElementById("teste").onmouseover = function(){
    		__doPostBack("evento");
    	}
    </script>
    </html>

    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    • Marcado como Resposta Gustavo Brum quarta-feira, 7 de março de 2012 20:12
    quarta-feira, 7 de março de 2012 16:18
  • Gustavo,

    Eu não aconselharia vocÊ utilizar ajax nesse cenário, toda hora você precisará ir no servidor e fazer um transação no banco para pegar
    seus dados oriundos a vida, carro e casa, como essas informações não representam nada vocÊ pode renderizar seu o html com elas

    Eu imagino você com um cenário parecido com este:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    namespace DevBrasil
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                // inclui apolice
                Apolice apolice1 = new Apolice(1,"Minha Apolice1");
                Apolice apolice2 = new Apolice(2,"Minha Apolice2");
                List<Apolice> listApolice = new List<Apolice>();
                listApolice.Add(apolice1);
                listApolice.Add(apolice2);
                // inclui Seguro
                Seguro seguro1 = new Seguro(1,"Casa1","Carro1","Vida1");
                Seguro seguro2 = new Seguro(2, "Casa2", "Carro2", "Vida2");
                List<Seguro> seguro = new List<Seguro>();
                seguro.Add(seguro1);
                seguro.Add(seguro2);
                GridView1.DataSource = listApolice;
                GridView1.DataBind();
            }
        }
        public class Apolice
        {
            public int IdApolice { get; set; } 
            public string NomeApolice {get; set;}
            public Apolice(int idApolice, string nomeApolice)
            {
                this.IdApolice = idApolice;
                this.NomeApolice = nomeApolice;
            }
        }
            
        public class Seguro
        {
            public int IdApoliceSeguro{get;set;}
            public string Casa { get; set; }
            public string Carro { get; set; }
            public string Vida { get; set; }
            public Seguro(int idApoliceSeguro, string casa, string carro, string vida)
            {
                this.IdApoliceSeguro = idApoliceSeguro;
                this.Casa = casa;
                this.Carro = carro;
                this.Vida = vida;
            }
        }
               
    }

    Acesse as informações utilizando javascript da seguinte forma:

    Dentro da sua tag Head insira sua biblioteca jquery

    <head id="Head1" runat="server">
              <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        </head>

    Depois obtenha a string que você deseja e coloquei na variável quando o cliente passar o mouse em cima do que você deseja dessa forma:

    <asp:Label ID="lblBrasil" runat="server" Text="Msdn Brasil"></asp:Label>
        <asp:Label ID="lblResultado" runat="server" Text=""></asp:Label>
        <script language="javascript" type="text/javascript">
            var meuDados = "Inicio";
            $('#<%= lblBrasil.ClientID %>').mouseenter(function () {            
                $('#<%= lblResultado.ClientID %>').text(meuDados);
            });
        </script>

    Eu costumo utilizar Ajax apenas quando vejo a necessidade de trazer uma coleção de objetos, ai da para implementar de vários formas pode ser
    do jeito que nosso colega colocou acima, nesses casos para você tem uma manioulação melhor você realizar uma busca na sua page e retorna um objeto
    JsON para sua aplicações, que lhe facilitará o trabalho uma vez que com um objeto JSON, DOM e Jquery para você tem controle total do que quiser
    fazer dentro de uma página.

    Abraços,

    Leandro Rodrigues


    Caso a resposta tenha ajudado, não esqueça de marcar como resposta válida

    • Marcado como Resposta Gustavo Brum quarta-feira, 7 de março de 2012 20:12
    quarta-feira, 7 de março de 2012 17:34
  • Gustavo,

    Gustavo,


    Bom vou partir da premissa que essas dados estaram dentro de uma GridView certo o que deixa o cenário um pouco mais complexo,
    você vai precisar utilizar o método FindControl(), já pesquisa por esse método da internet para aprender usá-lo, pesquisa como é realizada a utilização
    dele com GridView, em suma ele possibilita vocÊ encontrar um controle .aspx, uma vez que o ID que é renderizado no html nunca é igual
    aquele que você escreveu no seu .aspx.

    Pensa assim o processo que você terá que fazer é o seguinte:

    1º Encontrar o ID da sua Label que esta dentro da linha do Griview.

    2º Utilizar a função que eu coloquei aqui.   

    Outra coisa, eu não costumo ver GridView trabalhando dessa forma, acho até estranho para ser sincero porque imagina que o usuário passsou
    o mouse em cima da apólice, só que ele não quer ver os seguros, vidas , carros para aquela apolice, mesmo ele não querendo vai ser exibido,
    outro problema como você vai finalizar que ele para ver os dados vai ter que passar o mouse em cima, você vai escrever em algum lugar,
    passe o mouse aqui para ver os dados, eu sou a favor de aplicações ricas para internet porém ao meu ver o usuário que esta acessando o site
    ele tem que ser notificado a cada processo, se eu fosse fazer eu faria da seguinte forma criaria uma coluna do lado da apolice com
    dentro dessa coluna colocaria um botão e quando o usuário clicasse nesse botão abria um Modal numa p´gina diferente ou na mesma página em baixo.

    <asp:Label ID="lblBrasil" runat="server" Text="Msdn Brasil"></asp:Label>
        <asp:Label ID="lblResultado" runat="server" Text=""></asp:Label>
        <script language="javascript" type="text/javascript">
            // variável não tipada que recebe como valor a string "Inicio"
            var meuDados = "Inicio";
            // $('#<%= lblBrasil.ClientID %>') = é o ID do seu Label no nosso caso é lblBrasil 
            // mouseenter = uma função nativa da biblioteca jquery que dispara um evento/ação chamando uma função quando você passa o mouse em cima da sua label que é a lblBrasil
            // function(){} é uma função que o evento mouseenter recebe como argumento, é uma função comum que você terá que escrever alguma coisa dentro
            $('#<%= lblBrasil.ClientID %>').mouseenter(function () {
                // aqui você chama o que você precisa fazer nesse caso, eu apenas adicionei o conteúdo "Inicio" que esta dentro da minha variável meuDados para a propriedade Text 
                // da minha Label chamada lblResultado
                $('#<%= lblResultado.ClientID %>').text(meuDados);
            });
        </script>

    Abraços,

    Leandro Rodrigues


    Caso a resposta tenha ajudado, não esqueça de marcar como resposta válida

    • Marcado como Resposta Gustavo Brum quarta-feira, 7 de março de 2012 20:12
    quarta-feira, 7 de março de 2012 18:39

Todas as Respostas

  • Gustavo,

    Essa implementação é estranha, você poderia falar o que você pretende fazer para eu te propor uma implementação melhor?

    Abraços,

    Leandro Rodrigues


    Caso a resposta tenha ajudado, não esqueça de marcar como resposta válida

    quarta-feira, 7 de março de 2012 16:11
  • Sim, faça o seguinte:

    <html>
    <body>
    	<div id="teste">aaaaaaaa</div>
    </body>
    <script>
    	document.getElementById("teste").onmouseover = function(){
    		__doPostBack("evento");
    	}
    </script>
    </html>

    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    • Marcado como Resposta Gustavo Brum quarta-feira, 7 de março de 2012 20:12
    quarta-feira, 7 de março de 2012 16:18
  • Bom é o seguinte:

    É um sistema para as corretoras de seguros..Tenho um grid onde lista todas as apólices do cliente, e nele tem uma coluna que diz o número da apólice. Em uma reuniao aqui, o pessoal chegou a decisão que querem: ao passar o mouse no numero da apolice automaticamente aparecerá em uma Label o objeto do seguro (automovel,casa, vida..). Conforme for passando em outras apolices essa label vai trocando o objeto. Deu para entender ? Sei que tem diversas formas mais fáceis de se fazer isso, porém é assim que o pessoal deseja..

    Tem como fazer isso ? 

    Obrigado.

    quarta-feira, 7 de março de 2012 16:21
  • Ola!

    Da maneira que você precise que seja feita, acho melhor você utilizar o ajax do jquery chamando um webmethod da sua página. Alem de ser fácil implementar você ainda ganha em performance, pois não vai ser a página inteira que vai requisitar o servidor, e sim alguns k de banda.

    Procure saber mais sobre ajax jquery com c# ou vb (não sei qual é a sua linguagem)

    Um exemplo pequeno vai aqui para você ter uma ideia de como funciona

    JS

     function TipoSeguro() {
    
            $.ajax({
                type: "POST",
                async: false,
                url: "Default.aspx/TipoSeguro",
                contentType: "application/json; charset=utf-8",
                data: "{seguro: "+$(#seguro).val()+"}"
                dataType: "json",
                success: function (data) {
    
                    $('#tipoSeguro').append(data.d.tipo);
                },
                error: function (XMLHttpRequest, textStatus, error) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        }

    C#

    [WebMethod]
            public static void TipoSeguro(int seguro)
            {
               return new {tipo = "casa"};
            }

    Dessa forma você faz uma conexão com o servidor rápida e atende muito bem o que você deseja.

    Se a resposta for útil marque-a 



    Stephany Henrique de Almeida Batista

    quarta-feira, 7 de março de 2012 17:13
  • Murilo,

    Primeiramente, obrigado pela resposta. Esse "evento" pode ser um método c# existente no code-behind ou tem que ser uma function javascript? O meu desejo é sempre utilizar o c#

    Ate+

    quarta-feira, 7 de março de 2012 17:20
  • Gustavo,

    Eu não aconselharia vocÊ utilizar ajax nesse cenário, toda hora você precisará ir no servidor e fazer um transação no banco para pegar
    seus dados oriundos a vida, carro e casa, como essas informações não representam nada vocÊ pode renderizar seu o html com elas

    Eu imagino você com um cenário parecido com este:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    namespace DevBrasil
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                // inclui apolice
                Apolice apolice1 = new Apolice(1,"Minha Apolice1");
                Apolice apolice2 = new Apolice(2,"Minha Apolice2");
                List<Apolice> listApolice = new List<Apolice>();
                listApolice.Add(apolice1);
                listApolice.Add(apolice2);
                // inclui Seguro
                Seguro seguro1 = new Seguro(1,"Casa1","Carro1","Vida1");
                Seguro seguro2 = new Seguro(2, "Casa2", "Carro2", "Vida2");
                List<Seguro> seguro = new List<Seguro>();
                seguro.Add(seguro1);
                seguro.Add(seguro2);
                GridView1.DataSource = listApolice;
                GridView1.DataBind();
            }
        }
        public class Apolice
        {
            public int IdApolice { get; set; } 
            public string NomeApolice {get; set;}
            public Apolice(int idApolice, string nomeApolice)
            {
                this.IdApolice = idApolice;
                this.NomeApolice = nomeApolice;
            }
        }
            
        public class Seguro
        {
            public int IdApoliceSeguro{get;set;}
            public string Casa { get; set; }
            public string Carro { get; set; }
            public string Vida { get; set; }
            public Seguro(int idApoliceSeguro, string casa, string carro, string vida)
            {
                this.IdApoliceSeguro = idApoliceSeguro;
                this.Casa = casa;
                this.Carro = carro;
                this.Vida = vida;
            }
        }
               
    }

    Acesse as informações utilizando javascript da seguinte forma:

    Dentro da sua tag Head insira sua biblioteca jquery

    <head id="Head1" runat="server">
              <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        </head>

    Depois obtenha a string que você deseja e coloquei na variável quando o cliente passar o mouse em cima do que você deseja dessa forma:

    <asp:Label ID="lblBrasil" runat="server" Text="Msdn Brasil"></asp:Label>
        <asp:Label ID="lblResultado" runat="server" Text=""></asp:Label>
        <script language="javascript" type="text/javascript">
            var meuDados = "Inicio";
            $('#<%= lblBrasil.ClientID %>').mouseenter(function () {            
                $('#<%= lblResultado.ClientID %>').text(meuDados);
            });
        </script>

    Eu costumo utilizar Ajax apenas quando vejo a necessidade de trazer uma coleção de objetos, ai da para implementar de vários formas pode ser
    do jeito que nosso colega colocou acima, nesses casos para você tem uma manioulação melhor você realizar uma busca na sua page e retorna um objeto
    JsON para sua aplicações, que lhe facilitará o trabalho uma vez que com um objeto JSON, DOM e Jquery para você tem controle total do que quiser
    fazer dentro de uma página.

    Abraços,

    Leandro Rodrigues


    Caso a resposta tenha ajudado, não esqueça de marcar como resposta válida

    • Marcado como Resposta Gustavo Brum quarta-feira, 7 de março de 2012 20:12
    quarta-feira, 7 de março de 2012 17:34
  • Gustavo,

    O javascript você deve saber que ele só roda do lado do cliente é um client-side, o que você pode fazer é chamar ele através de um server-side
    seguinte aquele exemplo que eu te passei que faz basicamente o que o nosso colega bostou acima porém através do poderoso recurso da biblioteca jquery,
    que é renderizada perfeitamente em qualquer browser que você já tenha ouvido falar, aconselharia usar jquery sempre.

    public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "", "<script>var meuDados = 'Inicio'; $('#<%= lblBrasil.ClientID %>').mouseenter(function () { $('#<%= lblResultado.ClientID %>').text(meuDados); });</script>");
            }
        }

    Abraços,

    Leandro Rodrigues


    Caso a resposta tenha ajudado, não esqueça de marcar como resposta válida

    quarta-feira, 7 de março de 2012 17:53
  • Leandro,

    Muito obrigado pela paciência de ajudar :D . O seu código está um pouco avançado para mim, nao entendi direito. Vamos supor que eu tenho um método no behind que retorna o meu objeto do seguro. Como faco para executa-lo ao passar o mouse em um Label, e jogar a string retornada pelo método em outro Label ? Eu nao entendi isso no seu código

    Para que serve o .mouseenter ?

    Foi mal pela dúvida =/

    Edit: Li o seu outro post, porém nao consigo colocar para funcionar algo ao passar o mouse
    • Editado Gustavo Brum quarta-feira, 7 de março de 2012 18:19
    quarta-feira, 7 de março de 2012 18:05
  • Gustavo,

    Gustavo,


    Bom vou partir da premissa que essas dados estaram dentro de uma GridView certo o que deixa o cenário um pouco mais complexo,
    você vai precisar utilizar o método FindControl(), já pesquisa por esse método da internet para aprender usá-lo, pesquisa como é realizada a utilização
    dele com GridView, em suma ele possibilita vocÊ encontrar um controle .aspx, uma vez que o ID que é renderizado no html nunca é igual
    aquele que você escreveu no seu .aspx.

    Pensa assim o processo que você terá que fazer é o seguinte:

    1º Encontrar o ID da sua Label que esta dentro da linha do Griview.

    2º Utilizar a função que eu coloquei aqui.   

    Outra coisa, eu não costumo ver GridView trabalhando dessa forma, acho até estranho para ser sincero porque imagina que o usuário passsou
    o mouse em cima da apólice, só que ele não quer ver os seguros, vidas , carros para aquela apolice, mesmo ele não querendo vai ser exibido,
    outro problema como você vai finalizar que ele para ver os dados vai ter que passar o mouse em cima, você vai escrever em algum lugar,
    passe o mouse aqui para ver os dados, eu sou a favor de aplicações ricas para internet porém ao meu ver o usuário que esta acessando o site
    ele tem que ser notificado a cada processo, se eu fosse fazer eu faria da seguinte forma criaria uma coluna do lado da apolice com
    dentro dessa coluna colocaria um botão e quando o usuário clicasse nesse botão abria um Modal numa p´gina diferente ou na mesma página em baixo.

    <asp:Label ID="lblBrasil" runat="server" Text="Msdn Brasil"></asp:Label>
        <asp:Label ID="lblResultado" runat="server" Text=""></asp:Label>
        <script language="javascript" type="text/javascript">
            // variável não tipada que recebe como valor a string "Inicio"
            var meuDados = "Inicio";
            // $('#<%= lblBrasil.ClientID %>') = é o ID do seu Label no nosso caso é lblBrasil 
            // mouseenter = uma função nativa da biblioteca jquery que dispara um evento/ação chamando uma função quando você passa o mouse em cima da sua label que é a lblBrasil
            // function(){} é uma função que o evento mouseenter recebe como argumento, é uma função comum que você terá que escrever alguma coisa dentro
            $('#<%= lblBrasil.ClientID %>').mouseenter(function () {
                // aqui você chama o que você precisa fazer nesse caso, eu apenas adicionei o conteúdo "Inicio" que esta dentro da minha variável meuDados para a propriedade Text 
                // da minha Label chamada lblResultado
                $('#<%= lblResultado.ClientID %>').text(meuDados);
            });
        </script>

    Abraços,

    Leandro Rodrigues


    Caso a resposta tenha ajudado, não esqueça de marcar como resposta válida

    • Marcado como Resposta Gustavo Brum quarta-feira, 7 de março de 2012 20:12
    quarta-feira, 7 de março de 2012 18:39
  • Leandro,

    Entendi tudo que vc falou, e conheço sim o FindControl(). Consegui executar seu exemplo, o problema era a referencia ao jquery, baixei igual a tua versao e funcionou..

    Porém só nao estou entendendo uma coisa..

    O objeto do seguro é trazido em runtime, o que consta no grid é apenas o numero da apolice, como eu poderei adicionar na function() um acesso ao meu método c# que traz o objeto ?

    Antigamente era um linkbutton, eu escolhia um e executava o evento onrowcomnand do grid, preenchendo o label com o objeto do seguro.

    O problema é que eu preciso executar esse método, nao sei fazer essa rotina utilizando JS (se é possivel)

    O restante pegou de boa, ja consegui executar algo existente na function() ao passar o mouse na lblBrasil.

    EDIT:Conseguiiiii!!! adicionei isso na function()

    __doPostBack('<%=LinkButton1.UniqueID %>', '1')

    Aí executa o OnClick do LinkButton1, onde coloquei para preencher o label com o objeto do seguro..

    Muito Obrigado pela ajuda!! Grande valia para mim! :D



    • Editado Gustavo Brum quarta-feira, 7 de março de 2012 20:12
    quarta-feira, 7 de março de 2012 20:00