How to use onclick in jQuery using an image button

Question

When I don't use OnClickI can see the effect of mousehover:
when i dont use onclick i can see the effect of mousehover

When I do use OnClick I do not see a mousehover effect:
when i use onclick i am not apply to mousehover effect

This is my code:

<head>
<title></title>

<style type="text/css">
        .Empty
        {
            background: URL("images/Category/Empty.gif"") no-repeat right top;
        }
        .Empty:hover
        {
            background: url("img src="images/Category/Filled.gif") no-repeat right top;
        }
        .Filled
        {
            background: url("img src="images/Category/Filled.gif") no-repeat right top;
        }
        .Filled
        {
            background-image: <img src= "images/Category/Filled.gif" />;
        }
    </style>

    <script type="text/javascript">

            function Decide(option) {
                var temp = "";
                document.getElementById('lblRate').innerText = "";

                    if (option == 1) {
                        document.getElementById('Rating1').className = "Filled";
                        document.getElementById('Rating2').className = "Empty";
                        document.getElementById('Rating3').className = "Empty";
                        document.getElementById('Rating4').className = "Empty";
                        document.getElementById('Rating5').className = "Empty";
                        temp = "1-Poor";
                    }

                if (option == 2) {
                    document.getElementById('Rating1').className = "Filled";
                    document.getElementById('Rating2').className = "Filled";
                    document.getElementById('Rating3').className = "Empty";
                    document.getElementById('Rating4').className = "Empty";
                    document.getElementById('Rating5').className = "Empty";
                    temp = "2-Ok";

                }
                if (option == 3) {
                    document.getElementById('Rating1').className = "Filled";
                    document.getElementById('Rating2').className = "Filled";
                    document.getElementById('Rating3').className = "Filled";
                    document.getElementById('Rating4').className = "Empty";
                    document.getElementById('Rating5').className = "Empty";
                    temp = "3-Fair";
                }
                if (option == 4) {
                    document.getElementById('Rating1').className = "Filled";
                    document.getElementById('Rating2').className = "Filled";
                    document.getElementById('Rating3').className = "Filled";
                    document.getElementById('Rating4').className = "Filled";
                    document.getElementById('Rating5').className = "Empty";
                    temp = "4-Good";
                }
                if (option == 5) {
                    document.getElementById('Rating1').className = "Filled";
                    document.getElementById('Rating2').className = "Filled";
                    document.getElementById('Rating3').className = "Filled";
                    document.getElementById('Rating4').className = "Filled";
                    document.getElementById('Rating5').className = "Filled";
                    temp = "5-Nice";
                }
                document.getElementById('lblRate').innerText = temp;
                return false;

            }


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Label ID="Label1" runat="server" Text="Rate The Product"></asp:Label><br />
    <asp:ImageButton BorderStyle="None" ID="Rating1" onmouseover="return Decide(1);"
        OnClientClick="return Decide(1);" Height="20px" Width="20px" CssClass="Empty"
        src="images/Category/Empty.gif" runat="server" OnClick="imagebutton" />
    <asp:ImageButton BorderStyle="None" ID="Rating2" onmouseover="return Decide(2);"
        OnClientClick="return Decide(2);" Height="20px" Width="20px" CssClass="Empty"
        src="images/Category/Filled.gif" runat="server" OnClick="imagebutton" />
    <asp:ImageButton BorderStyle="None" ID="Rating3" onmouseover="return Decide(3);"
        OnClientClick="return Decide(3);" Height="20px" Width="20px" CssClass="Empty"
        src="images/Category/Filled.gif" runat="server" OnClick="imagebutton" />
    <asp:ImageButton BorderStyle="None" ID="Rating4" onmouseover="return Decide(4);"
        OnClientClick="return Decide(4);" Height="20px" Width="20px" CssClass="Empty"
        src="images/Category/Filled.gif" runat="server" OnClick="imagebutton" />
    <asp:ImageButton BorderStyle="None" ID="Rating5" onmouseover="return Decide(5);"
        OnClientClick="return Decide(5);" Height="20px" Width="20px" CssClass="Empty"
        src="images/Category/Filled.gif" runat="server" On Click="image button" />
    <br />
    <br />
    <asp:Label ID="lblRate" runat="server" Text=""></asp:Label>
    </div>
    </form>
</body>
</html>

I have used this code for rating and it's working, but the issue is that when I click on image button I want it to redirect me to the next page taking its value. But when I used $("p").click(function () { });

This method for OnClick will redirect me to the next page but the problem is, it will stop showing me value that is shown on mouse hover time.

The hover is bound to CSS style as far as I can see there is no way that event registration will stop that from working. Problem is somewhere else. — Emad, Dec 05 '16 at 08:19
can u please tell me how to write onclick? and where to write — anni, Dec 05 '16 at 08:21
Welcome to Stack Overflow! I've edited your question. It looks like you've given all relevant information here, so I'm going to vote this one up. One little tip: you can put things in `code markdown` by indenting them by 4 spaces. Your first lines (`` and ``) were not indented enough, so they were not visible originally. Good luck, hope you'll get an answer! — S.L. Barth is on codidact.com, Dec 08 '16 at 13:34

score 0 · Answer 1 · edited May 23 '17 at 12:30

i think you can try to build a custom form for each image's on click.

Send POST data on redirect with Javascript/jQuery?

with that you can pass any parameters to the new page for each image is clicked

just make sure that the new page on the server side has handled the parameters correctly

function imgOnClick(valueFromImage)
{
    var url = 'http://example.com/newPage';
    var form = $('<form action="' + url + '" method="post">' +
      '<input type="text" name="api_url" value="' + Return_URL + '" />' +
      '<input type="text" name="yourValue1" value="helloworld" />' +
      '</form>');
    $('body').append(form);
    form.submit();
}

How to use onclick in jQuery using an image button

1 Answers1