2

好的，所以我将尝试尽可能清楚地说明这一点。我想编写一个函数，调用时会onmouseout为图像添加一个属性。

在图像被鼠标悬停之前。

<img src="myfile.jpg" onmouseover="function()" />

后

<img src="myfile.jpg" onmouseover="function()" onmouseout="anotherFunction()" />

我也想用function()onmouseout把图片改回原图。我知道如何在图像代码中使用 onmouseover 和 onmouseout 更改图片，但我试图简化这一点，因为我必须做 100 次左右的图像更改，而且我不想多次写出代码。啊，我希望这很清楚。

4

2 回答 2

1

这比你想象的要简单：

function SetImageSource(ele, url) {
    ele.src = url;
}

<img src="myfile.jpg" 
     onmouseover="SetImageSource(this, 'someURL')"
     onmouseout="SetImageSource(this, 'someOtherURL')" />

注意：内联 JavaScript 并不理想。我建议阅读 JS 中的事件处理。更具体地说，阅读有关附加到事件的信息。

根据说明进行编辑

<img id="imgMyImage" src="myfile.jpg" 
     onmouseover="SetImageSource(this, 'someURL')"
     onmouseout="SetImageSource(this, 'someOtherURL')" />


function AddEvent(html_element, event_name, event_function) 
{       
   if(html_element.attachEvent) //Internet Explorer
      html_element.attachEvent("on" + event_name, function() {event_function.call(html_element);}); 
   else if(html_element.addEventListener) // Everything else
      html_element.addEventListener(event_name, event_function, false);
}

AddEvent(document.getElementById('imgMyImage'),
                                 'onmouseover',
                                 // do something
                                 );

附加信息

参见.addEventListener()MDN

见.attachEvent()MSDN

于 2012-12-09T19:12:52.337 回答
0

我们去http://jsfiddle.net/5U9w9/2/

我将使用更多评论更新 jsFidle，并将在此处更新链接。

javascript 

// grab all the required element on the page
var img_all = document.getElementsByTagName('img');

// for every element do this
for (i=0; i< img_all.length; i++){
    var img = img_all[i];
    // set the required event on the element
    // when the event of the element occurs, the associated function will be called with event object as it's argument.
    // https://developer.mozilla.org/en-US/docs/Mozilla_event_reference
    //img.addEventListener('mouseover', mouseover_handler, false);
    AddEvent(img, 'mouseover', mouseover_handler) 

    //mouseout_handler will be called, on mouseout event
    // img.addEventListener('mouseout', mouseout_handler, false);
    AddEvent(img, 'mouseout', mouseout_handler)
}


function mouseover_handler(e){
    // el is and event object and has various properties like clientX, clientY, srcElement, etc. you can check them by console.log(el)
    console.log(e)

    // to get the element i'm hovering, use
    var element = e.srcElement;

    //element is DOM element and can be manupulated
    element.style.width="100px";
}

// similarly handler for an another event.
function mouseout_handler(e){
    e.srcElement.style.width="50px";
}

​// cross-browser addEventListner
function AddEvent(html_element, event_name, event_function) 
{       
   if(html_element.attachEvent) //Internet Explorer
      html_element.attachEvent("on" + event_name, function() {event_function.call(html_element);}); 
   else if(html_element.addEventListener) // Everything else
      html_element.addEventListener(event_name, event_function, false);
}

更新

  • AddEvent代替addEventListner()IE 支持使用。（信用：@James Hill 的回答）
于 2012-12-09T19:58:09.487 回答