0

wordpress テンプレートでこのロゴにマウスオーバー効果を実装しようとしていますが、成功しません! 手伝って頂けますか？マウスオーバー時に画像を入れ替えたいdivは<div class="logo">. どうやってやるの？

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php bloginfo('text_direction'); ?>" xml:lang="<?php bloginfo('language'); ?>">
    <head>
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <title><?php wp_title ( '|', true,'right' ); ?></title>
        <meta http-equiv="Content-language" content="<?php bloginfo('language'); ?>" />
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favico.ico" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
        <!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/ie.css" /><![endif]-->
        <?php
            wp_enqueue_script('jquery');
            wp_enqueue_script('cycle', get_template_directory_uri() . '/js/jquery.cycle.all.min.js', 'jquery', false);
            wp_enqueue_script('cookie', get_template_directory_uri() . '/js/jquery.cookie.js', 'jquery', false);
            if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
            wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js', 'jquery', false);
        ?>
        <?php wp_head(); ?>
        <?php if ( is_home() && !get_option('ss_disable') ) : ?>
        <script type="text/javascript">
            (function($) {
                $(function() {
                    $('#slideshow').cycle({
                        fx:     'scrollHorz',
                        timeout: <?php echo (get_option('ss_timeout')) ? get_option('ss_timeout') : '4000' ?>,
                        next:   '#rarr',
                        prev:   '#larr'
                    });
                })
            })(jQuery)
        </script>
        <?php endif; ?>
    </head>
    <body <?php echo (get_option('bg_color')) ? 'style="background-color: '.get_option('bg_color').';"' : '' ?>>
        <div class="wrapper">

            <div class="header clear">
                <div class="logo">
                    <a href="<?php bloginfo('home'); ?>"><img src="<?php echo (get_option('logo_url')) ? get_option('logo_url') : get_bloginfo('template_url') . '/images/graphicbox.jpg' ?>" alt="<?php bloginfo('name'); ?>"/></a>
                </div>

                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Site description') ) ?>

                <?php get_search_form(); ?>

                <?php wp_nav_menu(array('menu' => 'Top menu', 'theme_location' => 'Top menu', 'depth' => 1, 'container' => 'div', 'container_class' => 'menu', 'menu_id' => false, 'menu_class' => false)); ?>

            </div>

            <?php wp_nav_menu(array('menu' => 'Navigation', 'theme_location' => 'Navigation', 'depth' => 2, 'container' => 'div', 'container_class' => 'nav', 'menu_class' => 'dd', 'menu_id' => 'dd', 'walker' => new extended_walker())); ?>

            <?php if ( is_home() && !get_option('ss_disable') ) get_template_part('slideshow'); ?>

            <!-- Container -->
            <div id="container" class="clear">
                <!-- Content -->
                <div id="content">
4

2 に答える 2

0

派手なアニメーションなしで画像を交換したいだけの場合は、単純なcssを使用して画像を交換することもできます。たとえば、次のようになります。http: //jsfiddle.net/S9aQW/（最良のコードではないかもしれませんが、要点を示しています） 。

于 2011-08-31T20:43:53.700 に答える
0

いくつかの異なる言語を混同しています。Php はサーバー側の言語であり、マウスオーバー中に画像を変更するなど、クライアント側の処理には使用しないでください。これを行いたい場合、最適なオプションは javascript (または css) です。以下に両方の方法を説明します。

ジャバスクリプト

JavaScript を使用する場合は、マウスオーバーとマウスアウトをリッスンする 2 つのリスナーを div に追加するだけです。これらのリスナーは JavaScript 関数を呼び出し、イベントを送信するので、何にカーソルを合わせているかがわかります。

<div class="logo" onmouseover="changeLogo(event)" onmouseout="changeLogo(event)">
    <a href="<?php bloginfo('home'); ?>">
        <img src="<?php get_bloginfo('template_url'); ?>/images/graphicbox.jpg" />
    </a>
</div>

<script language="javascript">
    function changeLogo(e)
    {
        var div = e.currentTarget; //GETS THE DIV
        var a = div.firstChild; //GETS THE FIRST CHILD OF THE DIV, WHICH IS THE A-ELEMENT
        var img = a.firstChild; //GETS THE FIRST CHILD OF THE A-ELEMENT, WHICH IS THE IMG.

        img.src = (img.src == "OLDLINK") ? "YourNewLink" : "OLDLINK"; //SWAPS BETWEEN LINKS
    }
</script>

以上で、JavaScript の部分は終了です。cssに。

CSS

実際、これは最もよく使用される方法であり、最も簡単な方法でもあります。div を a 要素でラップし、div の背景画像を設定するだけです。

<a href="<?php bloginfo('home'); ?>">
   <div class="logo"></div>
</a>

<style>
.logo
{
    background-image: url('linkToImage.png');
}

.logo:hover
{
    background-image: url('linkToNewImage.png');
}
</style>

ご覧のとおり、この方法はよりクリーンで簡単です。また、ロゴを使用しているため、div の固定幅と高さを設定できるため、問題はありません。この css-approach を使用することもお勧めします。

他にご不明な点がございましたら、お気軽にお問い合わせください ;)

于 2011-08-31T20:51:55.587 に答える