問題與替身屬性

Question

我需要幫助的jQuery代碼。我開發了一個網站，當我們將鼠標懸停在Home，About Us等導航選項卡上時，標題圖像會發生變化。問題是我已經在「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); 
     }); 
    }); 
}); 

因此，考慮當過我鼠標與鏈接類標題1，標題2和標題它會將標題圖像更改爲由我設置的各自的alt屬性圖像。這不適用於Firefox和IE。請幫我解決一下這個。謝謝。

Answer 1

改變IMG源不是一個好主意，對我來說，嘗試使背景精靈，並通過添加類的頭

Answer 2

哦，上帝，請不要濫用ALT標籤爲這種目的的移動它。您可以使用這些數據屬性：

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

您的JavaScript可以保持幾乎相同，但請查看該數據屬性。 Alt屬性具有語義含義，所以真的不應該被濫用。現在的代碼會讓所有使用屏幕閱讀器的人感到困惑。

我也是第二次別人對確保您的間距等是正確的，你的結束標記有...這可能會導致問題，太情緒

Answer 3

天哪，不！不要使用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); 
     }); 
    }); 
});