Alt属性的问题

Question

I need help in a jquery code. I have developed a website where the header image will change when we hover on the navigation tabs like Home, About Us, etc. The problem is I have included the images that need to changed on hover in "alt" attribute. This works fine with chrome but not in firefox and IE. The link for the website is

            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>

The jquery code I have used to do this is given below

$(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);
        });
    });
});

So when ever I mouse over the links with classes heading1, heading2 and ser It will change the header image to respective alt attribute image that is set by me. This is not working in firefox and IE. Please help me with this. Thank You.

Answer 1

Good God no! Don't use alt to store data. Use the data attribute instead. It's what it's designed for.

Also, it probably isn't working because you have placed alt onto an anchor tag. alt is only used for img tags.

HTML Reworked:

<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 Reworked:

$(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);
        });
    });
});

Answer 2

Oh god please don't misuse alt tags for this kind of purpose. You can use data attributes for this kind of thing:

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

Your javascript can stay pretty much the same, but look at that data attribute instead. Alt attributes hold a semantic implication, so really shouldn't be misused. Your code as it stands would be confusing as hell to anyone with a screen reader.

I also second others' sentiments about making sure that your spacing etc is right and your closing tags are there... That can cause problems, too

Answer 3

更改img源对我不是一个好主意，请尝试制作背景精灵，并通过将类添加到标头中来移动它