改變使用jQuery或JavaScript

我想使用jquery去本圖片或JavaScript，然後懸停圖像改變HREF attrb另一個SRC圖像改變使用jQuery或JavaScript

這hovring的IMAG在href attrb是代碼：

<a href="Sign-Up.aspx" ><img alt="Login" src="images/login3.png" style="width: 173px; margin-top: 0px; z-index:10;" /></a>

來源

2012-03-18 user1233875

你有什麼試過？這很容易使用['.hover（）']（http://api.jquery.com/hover/）和['.attr（）']（http://api.jquery.com/attr/ ）方法。 – 2012-03-18 12:50:16

添加一個id你的形象標籤，比如：id =「圖像」，然後添加這個JavaScript

<script type="text/javascript"> 
$(function(){ 
    $('#image').hover(function(){ 
     $(this).attr('src', 'images/new_image.png'); 
    }); 
});

來源

2012-03-18 12:49:26 Pierre

'src'而不是'href'。 'this.src ='images/new_image.png';'而不是'$（this）.attr（...）'雖然更好。 – 2012-03-18 12:51:30

@RobW thanx，我把它改成了src。當使用jQuery時，我認爲使用$（this）.attr（）會更好。另一種選擇是預加載圖像，通過var rollover = new Image; rollover.src ='images/rollover.png';然後你可以使用$（this）.attr（'src'，rollover.src）; – Pierre 2012-03-18 12:55:42

jQuery是JavaScript。任何可讀且JavaScript支持良好的東西都不需要用jQuery編寫。有關許多示例的列表，請參見[何時使用vanilla JavaScript vs jQuery？]（http://stackoverflow.com/questions/4651923/when-to-use-vanilla-javascript-vs-jquery）。 – 2012-03-18 12:57:42

首先，讓我們給我們自己從別的識別這個錨/圖像組合的方式在你的頁面：

<a class="button" href="Sign-Up.aspx" ><img alt="Login" 
    src="images/login3.png" 
    style="width: 173px; margin-top: 0px; z-index:10;" /></a>

然後讓我們寫一些jQuery來交換圖片：

$('a.button img').mouseover(
    function() { $(this).attr('src', 'images/login3_hover.png'); } 
); 
$('a.button img').mouseout(
    function() { $(this).attr('src', 'images/login3.png'); } 
);

第二位，確保我們回到原來的狀態沒有懸停時。

但是，您實際上並不需要Javascript，你可以改爲使用CSS和HTML。要做到這一點，你必須分開文本和鏈接的圖像。類似下面的HTML：

<a class='button' href="Sign-Up.aspx"><b>Login</b></a>

與一些CSS：

a.button { 
    width: 173px; 
    height: 73px; // or whatever your image height is 
    position: relative; 
    background-image: url("images/login3.png"); 
    background-position: top left; 
    background-repeat: no-repeat; 
    display: block; 
} 

a.button:hover { 
    background-image: url("images/login3_hover.png"); 
} 
a.button b { 
    position: absolute; 
    left: -9999px; 
}

（我省略了margin-top和z-index規則，因爲他們可能依賴於其他的東西在你的頁面怎麼回事。）

我們在那裏做的是將圖像作爲CSS背景圖像附加到錨上，然後在我們將鼠標懸停在該錨上時將其更改。然後，文本（之前位於圖像的alt屬性中）被樣式化爲不顯示（但仍可用於搜索引擎和輔助工具）。

但是，這兩種解決方案仍然存在問題，因爲images/login3_hover.png圖片在懸停之前不會加載，所以您會在加載錨點後的背景顏色時獲得簡短的閃現。爲了解決這個問題，你需要使用CSS sprites，它建立在上面的background-image技術之上。

來源

2012-03-18 13:02:05

改變使用jQuery或JavaScript

回答

相關問題