jQuery与动态图形按钮

CSS的部份

img.ButtonImage
{
border: 0;
cursor: pointer;
padding: 0;
margin: 0;
}

JavaScript的部份(需配合jQuery使用)
var ButtonImage = {
imgs: {},
preloadImgs: function () {
var a = ButtonImage.preloadImgs.arguments;
var url;
for (var i = 0; i < a.length; i++) {
url = a[i];
if (typeof url === "string") {
if (!ButtonImage.imgs[url]) {
ButtonImage.imgs[url] = new Image;
ButtonImage.imgs[url].src = url;
}
}
}
},
start: function () {
jQuery.each($("img.ButtonImage"), function (key, val) {
with ($(val)) {
attr("out", attr("src"));
ButtonImage.preloadImgs(attr("out"), attr("over"));
mouseover(function () {
$(this).attr("src", attr("over"));
});
mouseout(function () {
$(this).attr("src", attr("out"));
});
}
});
}
};

$(document).ready(function () {
ButtonImage.start();
});

使用範例
<a href="/Menu06/index.htm">
<img src="/images/Menu06-A.png" over="/images/Menu06-B.png" class="ButtonImage" alt="" />
</a>

滑鼠移上去前使用 /images/Menu06-A.png 去显示
滑鼠移上去前使用 /images/Menu06-b.png 去显示
如果两张图的长宽不一样的话
再多一层 div 做定位,垂直置中,水平置中


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章