下面的代码是我有的,但不幸的是它没有做任何事情。以前我有一个部门为图像交换工作,但它更简单的代码...如果有一个更简单的方法来做到这一点,我都是耳朵。导航通过JQuery的活动/悬停/非活动状态
要回顾一下我试图做到的是:
土地主页>在导航 将鼠标悬停在选择上没有什么 - 图像互换所选择的状态 在点击图像被交换到选择的状态。
感谢您的帮助!
我遇到的另一个问题是我由艺术家给出的文件在图像中有文字。我有两个不同的图像,其中一个处于选定状态,另一个处于处于非活动状态的文本。所以我不能把它上面的文字。
jQuery的
var menu = {
init: function() {
$('.nav-image').hover(function() {
if (!$(this).attr('id') != menu._selectedId + '-nav' && $(this).attr('src').indexOf("_on.png") == -1) {
var src = $(this).attr('src').replace("_off.png", "_on.png");
$(this).attr('src', src);
}
},
function() {
if ((page == "index" && $(this).attr('id') != "index-nav") || (page == "about" && $(this).attr('id') != "about-nav") || (page == "portfolio" && $(this).attr('id') != "portfolio-nav") || (page == "blog" && $(this).attr('id') != "blog-nav") || (page == "contact" && $(this).attr('id') != "contact-nav") || page == "index") {
if (!$(this).attr('id') != menu._selectedId + '-nav' && $(this).attr('src').indexOf("_on.png") >= 0) {
var src = $(this).attr('src').replace("_on.png", "_off.png");
$(this).attr('src', src);
}
}
});
}}
HTML
<div class="menu">
<div style="float: left; hieght: 45px; width: 193px;"><img src="images/nav/left_end.png" class="nav-image"></div>
<div style="float: left; height: 45px; width: 73px;"><a href="index.php"><img src="images/nav/home_off.png" class="nav-image" id="index-nav"></a></div>
<div style="float: left; height: 45px; width: 80px;"><a href="about.php"><img src="images/nav/about_off.png" class="nav-image" id="about-nav"></a></div>
<div style="float: left; height: 45px; width: 112px;"><a href="portfolio.php"><img src="images/nav/portfolio_off.png" class="nav-image" id="portfolio-nav"></a></div>
<div style="float: left; height: 45px; width: 69px;"><a href="http://info.arkmediainc.com/blog"><img src="images/nav/blog_off.png" class="nav-image" id="blog-nav"></a></div>
<div style="float: left; height: 45px; width: 98px;"><a href="http://info.arkmediainc.com/contact-us"><img src="images/nav/contact_off.png" class="nav-image" id="contact-nav"></a></div>
<div style="float: left; height: 45px; width: 35px;"><img src="images/nav/right_end.png"></div>
</div>
我遇到的问题是由艺术家给出的文件在图像中有文字。我有两个不同的图像,其中一个处于选定状态,另一个处于处于非活动状态的文本。所以我不能把它上面的文字。 – Incomudrox 2012-07-19 16:16:42
只是放置“ ”或
而不是文字,文字不需要 – ShaunOReilly 2012-07-20 03:20:48
真正有趣的是,今天我需要做的完全一样,现在我已经有了答案!堆栈溢出非常好! – ShaunOReilly 2012-08-14 04:55:22