hihow to change image url with transition or effectI put button and image on the page and I want when users click on the button it will change the images image URL so I wrote the below codeslthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltstylegt DivImg float right width400px height300px border 1px solid red image

Hi nedashUse JQuery fadeIn and fadeOutRefer below codeHTMLltaspImageButton ID34Imgchange34 runat34server34 ImageUrl34Imagemainvorod1png34 AlternateText34Change34 gtltdiv class34DivImg34 runat34server34gt ltaspImage ID34Img134 runat34server34 CssClass34image34 ImageUrl34picsbulboffgif34 gtltdivgtltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgtltscript type34textjavascript34gt function 39Imgchange39on39click39 function 34Img134fadeOut34slow34 function 39Img139attr39src39 39picsbulbongif39 34Img134fadeIn34slow34 return false ltscriptgtltstylegt DivImg float right

Change ASP.Net Image Url with transition effect on Button Click using jQuery

nedash

SOLVED CLOSED ACTIVE ANSWERED
User: nedash
Posted: on Apr 26, 2021 10:45 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 4278

how to change image url with transition or effect

I put button and image on the page and I want when users click on the button it will change the image's image URL so I wrote the below codes:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .DivImg {
            float: right;
            width:400px;
              height:300px;
            border: 1px solid red;
         
        }
        .image {
             width:400px;
              height:300px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div>
                <asp:ImageButton ID="Imgchange" runat="server" ImageUrl="~/Image/main/vorod1.png" OnClick="Imgchange_Click" />
                <div class="DivImg" runat="server">
                     <asp:Image ID="Img1" runat="server" CssClass="image" ImageUrl="~/image/slideshow/02.jpg"/>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

and

protected void Imgchange_Click(object sender, ImageClickEventArgs e)
{
    Img1.ImageUrl = "~/image/slideshow/03.jpg";
}

here it will change the image url but I want it does with transition or effect on the image

How I can do it?

Best regards

Neda

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Apr 27, 2021 05:16 AM
Modified: on Apr 27, 2021 05:17 AM
Report

Hi nedash,

Use JQuery fadeIn and fadeOut.

Refer below code.

HTML

<asp:ImageButton ID="Imgchange" runat="server" ImageUrl="~/Image/main/vorod1.png" AlternateText="Change" />
<div class="DivImg" runat="server">
    <asp:Image ID="Img1" runat="server" CssClass="image" ImageUrl="~/pics/bulboff.gif" />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#Imgchange').on('click', function () {
            $("#Img1").fadeOut("slow", function () {
                $('#Img1').attr('src', 'pics/bulbon.gif');
                $("#Img1").fadeIn("slow");
            });

            return false;
        });
    });
</script>
<style>
    .DivImg {
        float: right;
        width: 110px;
        height: 110px;
        border: 1px solid red;
    }

    .image {
        width: 100px;
        height: 100px;
    }
</style>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Change ASP.Net Image Url with transition effect on Button Click using jQuery

Company

Explore

Follow us

Contact Us