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'); 
    } 
});