Hide link button text and show image instead

Question

if you dont understand what i said please do let me know via comments donot flag or downvotes

I am having linkbutton , that is used top getting Id in GridView.

I want to show Image instead of text.. I am attaching Image . See on the left side top marked section I want to get rid of text 7241

Below is my code.. but I m in need of getting 7241 on the jquery click,,, see at bottom the jquery code

ASP.Net Code

 <asp:LinkButton ID="lnkSubmission" CssClass="PopupShow" runat="server"
                                                                        data-toggle="modal" ToolTip="Make Submission"  data-target="#Submission"><%# Eval("fk_LoginId") %>
                                                                        <i class="fa fa-location-arrow" aria-hidden="true"></i>
                                                                    </asp:LinkButton>

Jquery Code

 $(function () {
            $('.PopupShow').click(function () {
                var a = $(this).text();
                $("#<%=CID.ClientID%>").val(a);
            });
        });

Current Image is

Why not an image link like `` – sujith karivelil Jun 21 '16 at 07:12 — sujith karivelil, Jun 21 '16 at 07:12

score 1 · Accepted Answer · answered Jun 21 '16 at 07:33

I checked and below code is working:

<asp:LinkButton ID="btnRandom"  runat="server"  CssClass="btn btn-primary PopupShow" >
          <span aria-hidden="true" class="glyphicon glyphicon-refresh"> <label id="lbl" style="display:none;"><%#Eval("fk_LoginId")%></label> </span>
</asp:LinkButton>

JavaScript

$('.PopupShow').click(function () {                    
          var a = $(this).find('label').html();
          console.log(a);
          alert(a);
          return false;
});

Hope this helps!

noobProgrammer · Answer 2 · 2016-06-21T07:16:11.120

0

why are you using linkbutton then??

<img src="path to your image"  class="PopupShow"/>

you can even call this using onClick=

make sure PopupShow class wont disfigure your image style or just add any random blank class with cursor:pointer

edited Jun 21 '16 at 07:16

answered Jun 21 '16 at 07:13

noobProgrammer

2,884
3
17
20

1

You have to be more clear about your answer. Now it has no value to the OP – Mivaweb Jun 21 '16 at 07:15

score 0 · Answer 3 · answered Jun 21 '16 at 07:17

Instead of customizing a LinkButton you can use an image Embedded <a> tag. With its href points to the redirection URL of the Link button. And also you can bind specific image URL to the img tag as well. Consider an example code below

<a href="<%#Eval("url_here")%>" Class="PopupShow">
      <img src="i<%#Eval("img_url_here")%>" />
</a>

Or else you can use a javascript to do the function and call the method in onClick of the img tag

Hide link button text and show image instead

3 Answers3