Question

我有像

这样的html结构

<tr>
<td valign="top">   <div class="thumbnails">  <a id="1" href="#">
<img alt="ebony" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/ebony1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/ebony1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/ebony2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/ebony2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/ebony1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="2" href="#" class="selected">
<img alt="iceglass" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/iceglass1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/iceglass1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/iceglass2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/iceglass2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/iceglass2.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="3" href="#">
<img alt="glimmerglass" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/glimmerglass1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/glimmerglass1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/glimmerglass2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/glimmerglass2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/glimmerglass1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="4" href="#">
<img alt="purpleglass" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/purpleglass1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/purpleglass1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/purpleglass2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/purpleglass2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/purpleglass1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="5" href="#">
<img alt="shorestone" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/shorestone1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/shorestone1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/shorestone2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/shorestone2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/shorestone1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="6" href="#">
<img alt="lavastone" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/lavastone1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/lavastone1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/lavastone2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/lavastone2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/lavastone1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="7" href="#">
<img alt="moonstone/dark" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-dark1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-dark1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/moonstone2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/moonstone2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-dark1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="8" href="#">
<img alt="moonstone/pale" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-pale1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-pale1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/moonstone-pale2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/moonstone-pale2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-pale1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="9" href="#">
<img alt="pebblestone" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/pebblestone1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/pebblestone1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/pebblestone2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/pebblestone2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/pebblestone1.jpg"></a></div></td>
</tr>

我添加了一个编码来改变鼠标上的图像

function swap_image( event, image_url ) {
   var e = event || window.event;
   if( e.target )
     var node = e.target;
   else
     var node = e.srcElement;

   if( node )
     if( node.tagName == "IMG" ){    
      node.src = image_url;

      }
   else{

      node.getElementsByTagName("img")[0].src = image_url;
      }    
   return false;

}

我希望显示为我想要更改mouseout函数参数而选择的图像。每件事都运行正常但是鼠标输出功能参数没有改变

jQuery(".thumbnails a").live('click' ,function(){

    var selectedclass = jQuery('#portfolio tr td .thumbnails a').hasClass('selected');
    //alert(selectedclass);
    if(selectedclass)
    {
        var small_img = jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('rel2');
        var big_img = jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('rel1');
        jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('src',small_img);
        jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('onmouseover',swap_image( 'event',big_img));
        jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('onmouseout',swap_image( 'event',small_img));
        jQuery('#portfolio tr td .thumbnails .selected').removeClass('selected');
    }


    var img_url = jQuery(this).find('img').attr('rel1');
    jQuery(this).find('img').attr('src',img_url);
    jQuery(this).find('img').bind('onmouseout',swap_image( 'event',img_url));
    jQuery(this).addClass('selected');

    id = jQuery(this).attr("id");               
    jQuery("#large-img img").hide();
    jQuery('#large_'+id).show(); 

});

Answer 1

http://api.jquery.com/mouseout/可能就是你要找的东西

$('#outer').mouseout(function() {
   //functions goes here
});

outer将是您将事件绑定到的元素的id。

Answer 2

jQuery(this).find('img').attr('onmouseout',"swap_image( event,'"+org_url+"')");

这不起作用。您不能将javascript事件设置为属性。

您要做的是使用“bind”将事件绑定到元素。所以你应该把它重写为：

jQuery(this).find('img').bind('onmouseout',function(){
   swap_image(event, org_url);
});

（抱歉，我现在不在javascript可测试的环境中，它可能会有一个小的语法错误。但这将是基本的想法）

在onclick中更改鼠标输出事件参数

2 个答案: