jquery наведите курсор, чтобы изменить изображение src показать пустое изображение - PullRequest
Новая
       14

jquery наведите курсор, чтобы изменить изображение src показать пустое изображение

0 голосов
/ 16 декабря 2011

У меня есть изображения в качестве кнопки меню моего веб-сайта, и я хочу изменить изображение на другое, когда пользователь наводит на него курсор или открывает страницу.

Итак, я установил функцию наведения в моем _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);
        }
    );

(Примечание. Я использую AppSettings для получения правильного пути к образу после развертывания)

И на каждой странице я хочу установить изображение так, чтобы выделить пользователя текущей страницы: 

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

В настоящее время, кажется, работает нормально. Но если наведение изображения запускается несколько раз, src изображения становится "", поэтому изображение исчезает.

Я не смог найти причину, поэтому надежда может получить помощь здесь ...

Большое спасибо

Ответы [ 2 ]

2 голосов
/ 16 декабря 2011

Насколько я понимаю вашу проблему, вы можете попробовать это. 

   // 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[name] = $(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');
            $(this).attr('src', oldsrc[name]);
            delete oldsrc[name];
        }
    );
1 голос
/ 16 декабря 2011

Это может произойти, потому что вы используете одну и ту же переменную для всех <img> элементов.Вместо того, чтобы делить одну переменную между всеми ними, вам, вероятно, следует хранить oldsrc таким образом, чтобы он указывал на конкретный элемент.

Один из способов сделать это - через метод jQuery .data.

Код: 

$('#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);
    }
);
...