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
                                 );

追加情報

MDNで見る.addEventListener()

MSDNを参照してください.attachEvent()

于 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);
}

アップデート

  • AddEventIE サポートの代わりに使用しaddEventListner()ます。 (CREDIT: @James Hill の回答)
于 2012-12-09T19:58:09.487 に答える