display a dynamic text on imagebutton

Question

0.00/5 (No votes)

See more:

I want to display a dynamic text on an imagebutton.
more specifically, I have a imagebutton list in a listview, then with mouseover, the corresponding information text (e.g. from a variable) will be displayed for this imagebutton.

Any suggestions?
I have searched website and could not find a suitable solution.
many thanks.

Posted 26-Jun-12 8:42am

Seraph_summer

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

shah dipen · Answer 1 · 2012-06-27T02:02:00

I'm giving solution which requires jQuery and scripting stuff. On server side on data bound event of listview you can add effect like this

    protected void lvVendors_DataBound(object sender, EventArgs e)
    {
        foreach (var item in lvVendors.Items)
        {
            string cid=((LinkButton)item.FindControl("lnkbtnEdit")).ClientID;                    ScriptManager.RegisterClientScriptBlock(this,GetType(),item.ToString(),"$('"+cid+"').hover(
  function () {
  	val=document.getElementById('"+cid+"').innerText;
	document.getElementById("abc").innerText="my new text";
  }, 
  function () {
	document.getElementById('"+cid+"').innerText=val;
  }
);
",true);
        }
    }

I had used link button instead of image button you can change it easily. And you need to add script to load jQuery on your page

shah dipen · Answer 2 · 2012-06-27T02:03:00

Solution 2

I'm giving solution which requires jQuery and scripting stuff. On server side on data bound event of listview you can add effect like this

    protected void lvVendors_DataBound(object sender, EventArgs e)
    {
        foreach (var item in lvVendors.Items)
        {
            string cid=((LinkButton)item.FindControl("lnkbtnEdit")).ClientID;                    ScriptManager.RegisterClientScriptBlock(this,GetType(),item.ToString(),"$('"+cid+"').hover(
  function () {
  	val=document.getElementById('"+cid+"').innerText;
	document.getElementById("abc").innerText="my new text";
  }, 
  function () {
	document.getElementById('"+cid+"').innerText=val;
  }
);
",true);
        }
    }

I had used link button instead of image button you can change it easily. And you need to add script to load jQuery on your page. I had tried this on simple HTML but no luck with asp.net i had posted this just to give you idea of how it can be done.

Posted 27-Jun-12 2:03am

shah dipen

Comments

Seraph_summer 27-Jun-12 15:03pm

thanks, but I can not download JQuery for the moment.
it is strange in JQuery wetsite. I will try once I can download it.

Seraph_summer 28-Jun-12 12:37pm

I have download JQuery library, but where should I add it, like the following?
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"> </script>
it seems not correct, this is only correct when I want to write the script in the script page.
Can you give me a hint?
thanks a lot!

Seraph_summer 28-Jun-12 13:23pm

one more thing,hover function takes two function as parameters?
I do not understand here.

Seraph_summer 28-Jun-12 14:05pm

OK, now I understand it.
but one question:'"+cid+"', why here two quoate?

shah dipen 28-Jun-12 14:09pm

sorry i'm out for vacation so not able to answer. single quotes are for jQuery and double to append dynamic id to function.

shah dipen 28-Jun-12 14:13pm

also make sure you load jquery file otherwise function will not work as i'm out i will not able to post code as soon as i return i will post my working version.

Seraph_summer 28-Jun-12 14:25pm

I have tried, but not yet sucessful, I have changed to the following in order to make sure it has some effect on the imagebutton,

ScriptManager.RegisterClientScriptBlock(item, this.GetType(), item.ToString(), "<script type='text/javascript'>$(document).ready("
+"function(){$('" + cid + "').hover("
+"function(){val=document.getElementById('" + cid + "').Height;document.getElementById('" + cid + "').Height='400px';},"
+"function(){document.getElementById('" + cid + "').Height=val;});});</script>", false);

unfortunately, this intends to change the image button size, but it does not show the effect, i.e. imagebutton size is not changed.

then if I use the following test function

ScriptManager.RegisterClientScriptBlock(item, this.GetType(), item.ToString(), "<script type='text/javascript'>$(document).ready(function(){$('p').hover(function(){$('p').css('background-color','yellow');},function(){$('p').css('background-color','#E9E9E4');});});</script>", false);

strangly, this shows some effect (i.e. color change) for the listview not the imagebutton.

do you have some idea for it?

shah dipen 28-Jun-12 14:32pm

you're applying effect on <p> tag so it will affect block of p tag.

Seraph_summer 28-Jun-12 17:01pm

thanks!
so far, I can not make it work.
it seems that the action can not be done for the item in a listview. I think for a single imagebutton, should be no problem.I could not figure out why no action for it. if you have time later, you can check why the following does not work:

protected void ListView_Book_DataBound(object sender, EventArgs e)
{
foreach (var item in ListView_Book.Items)
{

string cid = ((ImageButton)item.FindControl("Image_Button_BookCover")).ClientID;

ScriptManager.RegisterClientScriptBlock(item, this.GetType(), item.ToString(), "<script type='text/javascript'>$(document).ready("
+"function(){$('" + cid + "').hover("
+"function(){val=document.getElementById('" + cid + "').Height;document.getElementById('" + cid + "').Height='400px';alert('hi')},"
+"function(){document.getElementById('" + cid + "').Height=val;});});</script>", false);
}

}