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関数のパラメータを変更したいです。すべてが正常に機能していますが、マウスアウト関数のパラメータは変更されていません

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

http://api.jquery.com/mouseout/はおそらくあなたが探しているものです

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

outer は、イベントを関連付ける要素の ID になります。

于 2012-12-12T04:12:38.907 に答える
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 に答える