li hover/onmouseover更改圖片

Question

我被要求對我們的網站進行更改（它使用asp [關於我什麼都不知道]），基於css和javascript的解決方案對我來說更容易。

當用戶將光標移動到某個<li>項目上時，是否有可能在網頁上顯示圖形，例如：

• 選項1
• 選項2
• 選項3

當鼠標被移動超過選項1會造成一定的圖像是來得光彩啦，另一選項2和一個不同再次爲選項3.

Answer 1

給出下面的HTML：

<ul> 
    <li>Some text</li> 
    <li>Some text</li> 
</ul> 

<img src="http://davidrhysthomas.co.uk/playtime/img/dwLogoS.png" id="graphic" /> 

和JavaScript：

var lis = document.getElementsByTagName('li'); 
var graphic = document.getElementById('graphic'); 
var originalGraphic = graphic.src; 
for (i=0; i<lis.length; i++){ 
    lis[i].onmouseover = function(){ 
     graphic.src = "http://davidrhysthomas.co.uk/linked/astrid_avatar.png"; 
    }; 
    lis[i].onmouseout = function(){ 
     graphic.src = originalGraphic; 
    }; 
} 

This is certainly possible。

如果你想修改這個讓每個li觸發出現特定的圖像，那麼你可能會導致使用以下，或者類似的東西：

var lis = document.getElementsByTagName('li'); 
var graphic = document.getElementById('graphic'); 
var originalGraphic = graphic.src; 
for (i=0; i<lis.length; i++){ 
    lis[i].onmouseover = function(){ 
     graphic.src = "http://example.com/path/to/images/" + i + ".png"; 
     // this generates image sources of the form: 
     // http://example.com/path/to/images/1.png 
     // http://example.com/path/to/images/2.png 
     // ...and so forth 
    }; 
    lis[i].onmouseout = function(){ 
     graphic.src = originalGraphic; 
    }; 
} 

要使用的圖像源的陣列，它的可能使用：

var lis = document.getElementsByTagName('li'); 
var graphic = document.getElementById('graphic'); 
var originalGraphic = graphic.src; 
var images = [ 
    "http://davidrhysthomas.co.uk/linked/astrid_avatar.png", 
    "http://davidrhysthomas.co.uk/img/dexter.png" 
    ]; 
for (i=0; i<lis.length; i++){ 
    lis[i].setAttribute('data-altimage',images[i]); 
    lis[i].onmouseover = function(){ 
     graphic.src = this.getAttribute('data-altimage'); 
    }; 
    lis[i].onmouseout = function(){ 
     graphic.src = originalGraphic; 
    }; 
} 

JS Fiddle demo。

最後，離開置換後的圖像在頁面上（而不是替換的onmouseout圖像的原始源），只需取下onmouseout功能：

var lis = document.getElementsByTagName('li'); 
var graphic = document.getElementById('graphic'); 
var originalGraphic = graphic.src; 
var images = [ 
    "http://davidrhysthomas.co.uk/linked/astrid_avatar.png", 
    "http://davidrhysthomas.co.uk/img/dexter.png" 
    ]; 
for (i=0; i<lis.length; i++){ 
    lis[i].setAttribute('data-altimage',images[i]); 
    lis[i].onmouseover = function(){ 
     graphic.src = this.getAttribute('data-altimage'); 
    }; 
} 

JS Fiddle demo。

Answer 2

是的，這是可能的，你只需要在你的<li>的每個使用鼠標懸停處理程序。

編輯：如果需要可以提供樣品。

EDIT2：http://jsfiddle.net/gajfk/1/是一個簡單的例子（圖像不按比例等等，它只是顯示的鼠標懸停處理）

Answer 3

考慮「乾淨」的解決方案是不（直接）。 您可以附加鼠標懸停處理程序，該程序會調用loadImage（）函數與預定義的參數列表。的LoadImage（），則可以要求服務器基於上下文特定的圖像，並加載它在列表項

Answer 4

This是用jQuery：

標記

<ul> 
    <li>PHP</li> 
    <li>MySQL</li> 
    <li>HTML5</li> 
</ul> 

<img id="thumb" 
    src="http://www.portable-net.co.uk/images/logos/unknown-logo.png"/> 

JS

$('li').mouseover(function() { 
    var myText = $(this).text(); 
    var myImg = $("#thumb"); 
    switch (myText) { 
     case 'PHP': 
      myImg.attr('src', 
      'http://www.php.net/images/logos/php-med-trans-light.gif'); 
     break; 
     case 'MySQL': 
      myImg.attr('src', 
      'http://www.mysql.com/common/logos/mysql-167x86.png'); 
     break; 
     case 'HTML5': 
      myImg.attr('src', 
      'http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png'); 
    } 
});