Question

我想根据鼠标悬停时字段的值显示图像。我在这里搜索了它，并尝试了下面的一些东西。但问题是我不能使用#image，因为没有像这样的占位符。

 $("#s_1_1_60_0_icon").mouseover(function () {
    $(*'#image'*).show(); //displays image on mouse in
 }
 $("#s_1_1_60_0_icon").mouseleave(function(){
    $(*'#image'*).hide(); //hides image on mouse out
});
});

我想像工具提示一样展示图像。请建议实现这一目标的方向。

由于

Answer 1

这是一个基于你的小提琴的简单的。 http://jsfiddle.net/RnnrA/

与网页设计中的大多数事情一样，有数百种方法可以做某事。如果您可以提供更多详细信息（例如图片的位置），我可以为您提供更好的方法。

$("li a").mouseover(function(){
    $("#img_"+$(this).attr("id")).show();
});
$("li a").mouseout(function(){
    $("#img_"+$(this).attr("id")).hide();
});

这个有点复杂：http://jsfiddle.net/e7UVb/

我创建了一个包含图像的div，每次鼠标悬停在它上面都会创建一个图像元素并用图像填充它然后将它附加到div。在mouseout上它会破坏图像元素。这将需要更多的客户端调用，因为每次鼠标悬停它都需要获取图像。在我的例子中，我只使用了一个图像，你必须使用一些更好的逻辑来确定为这个图像显示哪个图像。

$("li a").mouseover(function(){
    $("#imagePlaceholder").append($("<img></img>").prop("src","http://www.psdgraphics.com/file/psd-credit-card.jpg").prop("height","50"));
});
$("li a").mouseout(function(){
    $("#imagePlaceholder").empty();
});

最后，一个更简单的版本：http://jsfiddle.net/Zt2pu/1/

$("li a").mouseover(function(){
    $("#imagePlaceholder").prop("src","http://www.psdgraphics.com/file/psd-credit-card.jpg").prop("height","50");
});
$("li a").mouseout(function(){
    $("#imagePlaceholder").prop("src","");
});

这里我刚制作了一个空图像标签，在鼠标悬停时我更改了src属性。在鼠标输出时，我清空了src属性。就像前一个一样，您将有一个客户端调用来下载每个鼠标上的图像。

最重要的是，最上面的一个是最简单最容易的。客户端将只加载一次所有图像，因此只会进行初始调用以下载所有图像。

再一次，让我们更好地了解你的实际行动，我们可以为你提供更好的答案。在此期间，玩得开心。

在鼠标上显示字段的图像

1 个答案: