2

html-

<img id="storyimg" src="images/stor.jpg" alt="img" />  
                <ul class="sb_menu">            
                    <li><a href="linkpage.htm" class="newslink1">Wireless Networking at Fortune Inn, Noida</a></li>
                    <li><a href="linkpage.htm" class="newslink2">18th International Conference on Oral & Maxillofacial Surgery</a></li>
                    <li><a href="linkpage.htm" class="newslink3">WiFi deployment at Vellore Institute of Technology</a></li>                        
                </ul>

ユーザーがこれらのliアイテムの上に移動したときに、次のように画像を変更したい-

<script>
                $('a.newslink1').bind('mouseover', function() {
                $('img#storyimg').src("images/stor1.jpg");
...same for newslink2 and 3, image will be stor2 and 3

しかし、これは機能していません私は間違ったjqueryを書いたと思います?????????

4

5 に答える 5

12

使用attr：

$('img#storyimg').attr("src", "images/stor1.jpg");

より詳しい情報：

http://api.jquery.com/attr/

于 2010-08-05T15:50:51.820 に答える
4

あなたのコード：

<script>
  $('a.newslink1').bind('mouseover', function() {
    $('img#storyimg').src("images/stor1.jpg");

エラー：

3行目：「.attr（ "src"、 "images / stor1.jpg"）;」のように「src」の代わりに「attr」を使用します。

4行目：'}）; 'ステートメントの最後にありません

正しいコード：

<script>
  $('a.newslink1').bind('mouseover', function() {
    $('img#storyimg').attr("src","images/stor1.jpg");
  });

リンクに応じて画像を変更する場合は、次のようにコーディングできます。

<img id="storyimg" src="images/stor.jpg" alt="img" />  
<ul class="sb_menu">            
  <li><a href="linkpage.htm" class="newslink1" data-image="stor1.jpg">Wireless Networking at Fortune Inn, Noida</a></li>
  <li><a href="linkpage.htm" class="newslink2" data-image="stor2.jpg">18th International Conference on Oral & Maxillofacial Surgery</a></li>
  <li><a href="linkpage.htm" class="newslink3" data-image="stor3.jpg">WiFi deployment at Vellore Institute of Technology</a></li>                        
</ul>

<script>
  //binds the mouseover-event-handler to all Links the are childs of an LI in UL with Class "sb_menu"
  $('UL.sb_menu LI A').bind('mouseover', function(e) { 
    $('img#storyimg').attr("src","images/" + $(e.target).attr('data-image'));
  });
</script>

改善：セレクターとしての「img＃storyimg」は問題ありませんが、getElementById（..）はネイティブブラウザー関数であるため、「＃storyimg」のみがより高速です。「img＃storyimg」を使用する場合、jqueryはgetElementsByTagName（'IMG'）を要求し、リストをトラバースして、IDが「storyimg」のこの要素を見つける必要があります。これは、「getElementById」を直接実行するのと同じくらい時間がかかります。ページ内のHTML要素のIDはユニスである必要があります。参照：http ：//www.w3.org/TR/html401/struct/global.html#h-7.5.2 （「この属性は要素に名前を割り当てます。この名前はドキュメント内で一意である必要があります。」）

于 2010-08-05T15:55:24.277 に答える
2 
$('a.newslink1').bind('mouseover', function() {
$('img#storyimg').attr("src","images/stor1.jpg");
于 2010-08-05T15:51:37.733 に答える
1

あなたはおそらくしたい$('img#storyimg').attr('src','path/to/new/image.jpg');

編集：ジンクスお奨めですが、私はコークスです！：o）

もう1つ、とを試してみ.mouseenter()てmouseleave()ください。

于 2010-08-05T15:52:12.643 に答える
1

質問が出されたのはずっと前のことですが、誰かが他の解決策を必要としているかもしれません。だから私も助けることができるのではないかと思いました。

次のように、「。hover（）」関数を使用することもできます。

これは<head>との間</head>です：

<script type="text/javascript">
    $(document).ready(function() {
        var src_path = "path/images/";
        var src_suffix = ".jpg";                   
        $('.yourclass').hover(                         
            function () {
            $(this).addClass("hover");
            var active_id = $(this).attr('id');     
            $('#' + active_id + '_pic').attr("src", src_path + active_id + '_big' + src_suffix); 
            },
            function () {
            $(this).removeClass("hover");
            var active_id = $(this).attr('id');
            $('#' + active_id + '_pic').attr("src", src_path + active_id + '_small' + src_suffix);
            }
        );
    });
</script>

そしてこれは<body>との間</body>です：

<div class="fruits">
<a href="#" class="yourclass" id="apple">
<img id="apple_pic" src="files/images/apple_small.jpg" alt="apple" title="apple" />
</a>
<!--  -->
<a href="#" class="yourclass" id="pear">
<img id="pear_pic" src="files/images/pear_small.jpg" alt="pear" title="pear" />
</a>
</div>

私たちのウェブサイトの1つでは、それはうまく機能します。

「.hover（）」関数の詳細については、http：//api.jquery.com/hover/を参照してください。

于 2013-02-01T10:16:18.867 に答える