使用JavaScript添加JavaScript活動通過圖像使用JavaScript

Question

好吧，我會盡量讓這個儘可能清晰。我想寫一個函數，當被調用時將添加一個onmouseout屬性到圖像。

在圖像被隱藏之前。

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

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

後，我也想用function()來改變圖片，然後的onmouseout設置圖片回原來的。我知道如何在圖像代碼中使用onmouseover和onmouseout來更改圖片，但是我試圖簡化這一點，因爲我必須對圖像進行100次左右的改變，而且我不想多次寫出代碼。呃我希望那很清楚。

Answer 1

在這裏，我們去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支持。（來源：@詹姆斯希爾的回答）

Answer 2

這也許比你想象的更簡單：

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() on MDN

見.attachEvent() on MSDN