0

jquery コードのヘルプが必要です。ホーム、会社概要などのナビゲーション タブにカーソルを合わせるとヘッダー画像が変わる Web サイトを開発しました。問題は、ホバー時に変更する必要がある画像を「alt」属性に含めたことです。これは chrome では正常に機能しますが、firefox と IE では機能しません。ウェブサイトへのリンクは

            http://datacrawl.in/home.html

HTML:

<ul>
<li><a href="home.html"> Home  </a><span style = "color: #FFF; position: relative;  left: 23px; "> | </span></li>
<li><a class = "ser" alt = "images/7.jpg" href="about.html"> About Us</a><span style = "color: #FFF; position:             relative; left: 23px;"> | </span></li>
<li><a class = "ser" alt = "images/5.jpg" href=""> Services </a> <span style = "color: #FFF; position: relative; left:     23px;"> | </span>
<ul>
<li style = "background-color: #8e64b0;"><a class = "ser" alt =  "images/3.jpg" href="software.html"> Software             Development </a></li>
<li style = "background-color: #7b55a0;"><a class = "ser" alt = "images/2.jpg" href="web.html"> Web & Graphic              Designing </a></li>
<li style = "background-color: #8e64b0;"><a class = "ser" alt = "images/4.jpg" href="technical.html"> Technical            Training </a></li>
</ul>
</li>
<li><a class = "ser" alt = "images/6.jpg" href=""> Portfolio  </a><span style = "color: #FFF; position: relative;          left: 23px;"> | </span>
</ul>

これを行うために使用したjqueryコードを以下に示します

$(document).ready(function () {
    $('.heading1, .heading2, .ser').mouseover(function () {
        var src = $(this).attr('alt');
        $('.header img').stop().fadeOut(50, function () {
            $(this).attr('src', src);
            $(this).fadeIn(50);
        });
    });
    $('.heading1, .heading2, .ser').mouseout(function () {
        $('.header img').stop().fadeOut(50, function () {
            $(this).attr('src', 'images/1.jpg');
            $(this).fadeIn(50);
        });
    });
});

したがって、heading1、heading2、および ser クラスのリンクにマウスを合わせると、ヘッダー画像が、自分で設定したそれぞれの alt 属性画像に変更されます。これは、Firefox および IE では機能しません。これで私を助けてください。ありがとうございました。

4

3 に答える 3

1

なんてこった！altデータの保存には使用しないでください。data代わりに属性を使用してください。それはそれが設計されているものです。

altまた、アンカータグに配置したため、おそらく機能していません。タグaltのみに使用されます。img

HTML のリワーク:

<ul>
    <li><a href="home.html">Home</a><span style = "color: #FFF; position: relative;  left: 23px; "> | </span></li>
    <li><a class = "ser" data-image = "images/7.jpg" href="about.html"> About Us</a><span style = "color: #FFF; position: relative; left: 23px;"> | </span></li>
    <li><a class = "ser" data-image = "images/5.jpg" href=""> Services </a> <span style = "color: #FFF; position: relative; left: 23px;"> | </span>
        <ul>
            <li style = "background-color: #8e64b0;"><a class = "ser" data-image =  "images/3.jpg" href="software.html"> Software Development </a></li>
            <li style = "background-color: #7b55a0;"><a class = "ser" data-image = "images/2.jpg" href="web.html"> Web & Graphic Designing </a></li>
            <li style = "background-color: #8e64b0;"><a class = "ser" data-image = "images/4.jpg" href="technical.html"> Technical Training </a></li>
        </ul>
    </li>
    <li><a class = "ser" data-image = "images/6.jpg" href=""> Portfolio  </a><span style = "color: #FFF; position: relative; left: 23px;"> | </span>
</ul>

jQuery のリワーク:

$(document).ready(function () {
    $('a.ser').mouseover(function () {
        var src = $(this).data('image');
        $('.header img').stop().fadeOut(50, function () {
            $(this).attr('src', src);
            $(this).fadeIn(50);
        });
    });
    $('a.ser').mouseout(function () {
        $('.header img').stop().fadeOut(50, function () {
            $(this).attr('src', 'images/1.jpg');
            $(this).fadeIn(50);
        });
    });
});
于 2013-03-01T13:12:03.157 に答える
0

この種の目的で alt タグを悪用しないでください。この種のデータ属性を使用できます。

<li><a class="ser" data-header-image="images/3.jpg" href="my-page.html">Link Text</a></li>

JavaScript はほぼ同じままでかまいませんが、代わりにそのデータ属性を見てください。Alt 属性にはセマンティックな意味が含まれているため、実際には誤用すべきではありません。このままのコードは、スクリーン リーダーを使用している人にとっては非常に紛らわしいものです。

また、スペーシングなどが正しく、終了タグがそこにあることを確認することについての他の人の感情を支持します...それも問題を引き起こす可能性があります

于 2013-03-01T13:05:02.030 に答える
-1

img ソースを変更することは私にとっては良い考えではありません。背景のスプライトを作成し、クラスをヘッダーに追加して移動してみてください

于 2013-03-01T11:10:45.370 に答える