jquery hover to change image src show empty image

Question

I have images as my website menu button, and I wanna change the image to another when user hover it or opening the page.

So, I set the hover function in my _Layout.cshtml:

 <div id="menubutton">
        <a href="@Url.Action("Index", "Home")" id="bg1">
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/homebutton.png")" alt="home" id="homebutton" />
        </a><a href="@Url.Action("Index", "Kitchen")" id="bg2">
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/kitchenbutton.png")" alt="kitchen" id="kitchenbutton" />
        </a><a href="@Url.Action("Index", "Stock")" id="bg3" >
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/stockbutton.png")" alt="stock" id="stockbutton" /></a>
        <a href="@Url.Action("Index", "Shop")" id="bg4" >
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/shopbutton.png")" alt="shoppinglist" id="shopbutton" /></a>
        <a href="@Url.Action("Index", "Recipe", new { id = 0 })" id="bg5" >
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/recipebutton.png")" alt="recipe" id="recipebutton" /></a>
        <a href="@Url.Action("Index", "Report")" id="bg6" >
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/reportbutton.png")" alt="report" id="reportbutton" /></a>
        <a href="@Url.Action("Index", "Notification")" id="bg7" >
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/notificationbutton.png")" alt="notification" id="notificationbutton" /></a>
        <a href="@Url.Action("Index", "Information", new { id = 0})" id="bg8" >
            <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/infobutton.png")" alt="info" id="infobutton" /></a>
    </div>

   // Store the old src of the image before hover to reapply after hover
    var oldsrc = "";
    $('#menubutton img').hover(
        function () {
            var name = $(this).attr('id') + '_o';
            oldsrc = $(this).attr('src');
            var newsrc = '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString())' + '/Content/New_Layout/' + name + '.png';
            $(this).attr('src', newsrc);
        },
        function () {
            var name = $(this).attr('id');
            //var newsrc = '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString())' + '/Content/New_Layout/' + name + '.png';
            $(this).attr('src', oldsrc);
        }
    );

(Note: I am using the AppSettings to get the correct image path after deploy)

And at every page, I wan to set the image as to highlight the current page user in:

 $('#bg4 img').attr('src', '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/shopbutton_o.png")');

Currently, it seems works fine. But if the image hover is triggered several times, the image src will become "" so the image is disappear.

I could not find the cause, so hope can get some help here...

Thank you very much

Answer 1

This might be happening because you're using the same variable for all <img> elements. Instead of sharing one variable between all of them, you should probably store the oldsrc in a way that keys on the specific element.

One way to do this is via the jQuery .data method.

Code:

$('#menubutton img').hover(
    function () {
        var oldsrc = $(this).attr('src');
        $(this).data('oldsrc', oldsrc); // Attach data to element

        var name = $(this).attr('id') + '_o';
        var newsrc = '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString())'
            + '/Content/New_Layout/' + name + '.png';
        $(this).attr('src', newsrc);
    },
    function () {
        var oldsrc = $(this).data('oldsrc'); // Extract data from element
        $(this).attr('src', oldsrc);
    }
);