javascript - 单击时更改图像

Question

我有一个带有图像的菜单。假设这些是图像。当我将鼠标悬停在上面时，它会变为第二张图像。我希望在单击第二张图像时保留第二张图像（当处于活动状态时）。

<a href='index.html'>
   <span>
     <img src="http://cdn.arstechnica.net/wp-content/uploads/2012/10/06_Place_20773_1_Mis.jpg" onmouseover="this.src='http://s3.firstpost.in/wp-content/uploads/2012/12/1Christmas_GettyImages.jpg'" onmouseout="this.src='http://cdn.arstechnica.net/wp-content/uploads/2012/10/06_Place_20773_1_Mis.jpg'"/>
   </span>
</a>

http://jsfiddle.net/nDkRG

Answer 1

在纯 JavaScript 中（给图像一个id, 以轻松定位它）：

/* called by clicking the link (because the image is a child-element),
   a simple means of preventing the default action: */
function nothing (e){
    e.preventDefault();
}

// the 'event' itself is passed as the first argument to the function
function update (e){
    // find what the event-type is ('click','mouseover', 'mouseout'):
    switch (e.type){
        // if it was the mouseover event, we:
        case 'mouseover':
            /* update the src property, retrieving the new src from the
               custom data-over attribute of the element:
            */
            this.src = this.getAttribute('data-over');
            // break out of the switch:
            break;
        case 'mouseout':
            // if the image doesn't contain the 'clicked' class-name, we:
            if (!this.classList.contains('clicked')){
                /* change the src to the string stored within the custom
                   data-out attribute:
                */
                this.src = this.getAttribute('data-out');
            }
            // break out of the switch:
            break;
        // if it's the 'click' event:
        case 'click':
            /* we add the 'clicked' class if it's not already there,
               and remove it if it is already there:
            */
            this.classList.toggle('clicked')
            break;
    }
}

/* retrieving the relevant image element (by its id, using querySelector
   and CSS-notation:
*/
var image = document.querySelector('#demo'),
// retrieving all the 'a' elements, then selecting only the first:
    link = document.getElementsByTagName('a')[0];

// binding an event-handler to the image for the various events:
image.addEventListener('click', update);
image.addEventListener('mouseover', update);
image.addEventListener('mouseout', update);

// binding an event-handler to the 'a' element, to handle the 'click' event:
link.addEventListener('click', nothing);

JS 小提琴演示。

Answer 2

尝试添加这个

$('a').click(function(e){
    e.preventDefault();
    $('img').removeAttr('onmouseover').removeAttr('onmouseout');
})

更新了你的小提琴