Onmouseover php page_问答_开发者_运维开发者技术经验分享

I'm trying to implement a mouseover effect to this logo on a wordpress template, without success! Can you help me? The div I want to swap image while mouse is over is <div class="logo">. How can I do that?

Here is the code:

<!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">

If you just want to swap the image without fancy animations, you could even use simple css to swap it, e.g. like this: http://jsfiddle.net/S9aQW/ (may not be the best code, but it shows the point).

You are mixing up some different languages. Php is a server side language and should/can not be used to do client side stuff, e.g. changing an image while doing a mouseover. If you want to do this, your best option is javascript (or css). I will explain both methods below.

JAVASCRIPT

if you want to use javascript, you just need to add two listeners to your div that listen to mouseover and mouseout. These listeners call for a javascript function and wil send an event, so we know what you are hovering over.

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

So that's it for the javascript part. On to the css.

CSS

This is in fact the most used approach and also the easiest one. just wrap your div in an a-element and set a background-image for your 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>

as you can see, this method is cleaner and easier. And since you are using a logo, you can set a fixed width and height for your div, so you won't have any problems. I also recommend to use this css-approach.

If you have any other questions, feel free to ask ;)