1

以下のコードは私が持っているものですが、残念ながら何もしていません。以前は、画像を交換するためのセクションがありましたが、それははるかに単純なコードでした...それを行うためのより簡単な方法があれば、私はすべて耳にします。

私が達成しようとしていることを要約すると、次のとおりです。

ホーム ページに移動する > ナビゲーションで何も選択されていない ホバー オーバー - 画像が選択状態に切り替わります クリックすると、画像が選択状態に切り替わります。

助けてくれてありがとう！

私が抱えているもう 1 つの問題は、アーティストから提供されたファイルの画像にテキストが含まれていることです。テキストを含む選択状態と、テキストを含む非アクティブ状態の 2 つの異なる画像があります。そのため、その上にテキストを配置することはできません。

Jクエリ

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>
4

2 に答える 2

0

CSS に任せることができます。

各 div は、任意のメニュー項目の背景画像にすることができ、その上にテキストを配置することもできます。

次に、このサンプルのようなコードを使用します。

したがって、リンクごとに、よりクリーンなコードを作成できます。

<div class="nav home"><a href="index.php">Home</a></div>

<script>
jQuery('.nav').click(function() {
    jQuery(this).css("background-image",jQuery(this).css("background-image").replace("on","clicked");
});
<script>

<style>
.nav {
    float: left; 
    height: 45px; 
    width: 73px;;
}

.home {
    background-image: url("images/nav/home_off.png");
    }

.home:hover {
    background-image: url("images/nav/home_on.png");
    }

</style>
于 2012-07-19T01:52:43.343 に答える
0

画像を css に background-images として 2 つのクラスに配置し、要素のクラスを切り替えるだけで簡単になると思います。

于 2012-07-19T01:54:14.387 に答える