Change Image Url on mouse over (hover) using JavasSript in ASP.Net

sarash
 
on Apr 27, 2021 03:39 AM
431 Views

hello everyone

I use the below the image on page:

 <asp:Image ID="bulbPic" runat="server" ImageUrl="~/pics/bulboff.gif" />

I want when I go over the image with the mouse it will change image URL refer below thread (here I define by clicking on button it will change imageurl)

Change Image Url on Button Click using JavasSript in ASP.Net

but now I want when I go over it, itwill change the image url

can you help me?

Thanks

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Apr 27, 2021 04:07 AM

Hi sarash,

Refer below code.

HTML

<div id="container">
    <asp:Image ID="bulbPic" runat="server" ImageUrl="~/pics/bulboff.gif" onmouseout="turnOffTheBulb()" onmouseenter="turnOnTheBulb()"/>
</div>
<script>
    var $ = document;
    var bulbPic = $.getElementById("bulbPic");
    function turnOnTheBulb() {
        bulbPic.src = "pics/bulbon.gif";
    }

    function turnOffTheBulb() {
        bulbPic.src = "pics/bulboff.gif";
    }
</script>
<style>
    #container {
        margin-top: 100px;
        margin-left: 600px;
    }
</style>

Screenshot