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

li hover / onmouseover更改图片

4 个答案: