[英]not able to show tool tip items for image button when we are hovering
当我将鼠标悬停在图像按钮上时,我想同时做两件事,我需要显示另一张图像,并且我也需要显示工具提示
当我将鼠标悬停在图像按钮上时,我已经成功实现了第一个(即)显示另一个图像的功能,但是无法显示该图像按钮的工具提示。 这是我的jQuery代码...
按钮:1(搜索按钮)
$(function () {
$("#Search").mouseover(function () {
var hoverimg = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
var orgimg = $(this).attr("src");
$(this).attr("src", hoverimg);
$(this).attr("title", orgimg);
})
.mouseout(function () {
$(this).attr("src", $(this).attr("title"));
});
});
按钮2:重置按钮
$(function () {
$("#Reset").mouseover(function () {
var hoverimg = $(this).attr("src").match(/[^\.]+/) + "_Hover.png";
var orgimg = $(this).attr("src");
//var tarr = orgimg.split('/');
//var file = tarr[tarr.length - 1];
//var data = file.split('.')[0];
//alert(data);
$(this).attr("src", hoverimg);
$(this).attr("title", orgimg);
// $(this).attr("title", data);
})
.mouseout(function () {
$(this).attr("src", $(this).attr("title"));
});
});
对于两个图像按钮,如果我执行注释出的行,则我需要在第二个按钮中做同样的事情(我得到的工具提示项的名称为(Reset)
但是当我从该按钮上移出鼠标时,我将丢失按钮图像.. 。
对于搜索按钮,我需要显示工具提示名称(如“ Search
,对于重置按钮,我需要显示工具提示项(如“ Reset
这是这两个按钮的HTML标记
<div class="rstbtn">
<img src="~/Images/Reset.png" id="Reset" />
</div>
<div class="btn">
<img src="~/Images/Search.png" id="Search" />
</div>
任何人都可以在此方面提供帮助,任何建议和想法,这将非常感谢我...
提前谢谢了.....
为此目的尝试此HTML
var orgimg
var orgimg2
$(function () {
$("#Search").mouseover(function () {
var hoverimg = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
orgimg = $(this).attr("src");
$(this).attr("src", hoverimg);
})
.mouseout(function () {
$(this).attr("src", orgimg);
});
});
$(function () {
$("#Reset").mouseover(function () {
var hoverimg = $(this).attr("src").match(/[^\.]+/) + "_Hover.png";
orgimg2 = $(this).attr("src");
//var tarr = orgimg.split('/');
//var file = tarr[tarr.length - 1];
//var data = file.split('.')[0];
//alert(data);
$(this).attr("src", hoverimg);
// $(this).attr("title", data);
})
.mouseout(function () {
$(this).attr("src", orgimg2);
});
});
HTML:
<div class="rstbtn">
<img src="~/Images/Reset.png" id="Reset" title="Reset" />
</div>
<div class="btn">
<img src="~/Images/Search.png" id="Search" title="Search"/>
</div>
谢谢
搜索按钮
$(function () {
var orgimg = $("#Search").attr("src");
var tooltip = $("#Search").attr("id");
$("#Search").mouseover(function () {
var hoverimg = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
$(this).attr("src", hoverimg);
$(this).attr("title", tooltip);
})
.mouseout(function () {
$(this).attr("src", orgimg);
});
});
对于“重置”按钮,请遵循类似的方法。 由于您没有标记标题,因此我使用id作为标题(工具提示)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.