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

on Apr 27, 2021 03:39 AM

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?


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

Hi sarash,

Refer below code.


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

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