0

我有像这样的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 函数参数而选择的图像。一切正常，但 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(); 

});
4

2 回答 2

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

这行不通。您不能将 javascript 事件设置为属性。

您要做的是使用“绑定”将事件绑定到元素。因此，您应该将其重写为：

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

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

于 2012-12-12T04:45:28.063 回答
0

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

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

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

于 2012-12-12T04:12:38.907 回答