mouseover.js doesn't work in wordpress

Question

I have an error somewhere, but I can figure it out. I have a mouseover.js script that is supposed to create a nice effect on a page - on mouse-over an image the image will switch from grayscale to a colored version.

The script is loaded in header.php like this:

<script src="<?php bloginfo( 'stylesheet_directory' );?>
    /js/mouseover.js" type="text/javascript"></script> 

The full script is here: http://pastebin.com/yeBtedcg

The page where this script should function is here: http://www.capital-restaurants.com/web/menu (the menu-images should all be in grayscale and only on mouse-over they should reveal colors).

I know the script works fine because I used it before, but now I can't seem to find out what I'm missing.

Answer 1

该页面为www.domain.com，并且您的图片是从domain.com加载的，因此出于安全原因，canvas.getImageData不能正常工作，请将您的图片更改为同一域。

Answer 2

mouseover.js is being loaded so you'r problem isn't with the WordPress integration. Figured I'd note, however, that you're not really going about script addition the correct way for a WordPress plugin. Take a look at wp_enqueue_script .

Here's a helper function:

function add_static_js_asset( $asset_name, $asset_path, $dependencies = false, $version = null, $in_footer = false ) {

        $dependencies = ( is_bool( $dependencies ) ) ? $dependencies : false;
        $version = ( !empty( $version ) ) ? $version : '0.1';
        $in_footer = ( is_bool( $in_footer ) ) ? $in_footer : false;

        if ( empty( $asset ) ) {
                return false;
        }                                                                                                      

        wp_enqueue_script( "{$asset_name}_script", $asset_path), $dependencies, $version, $in_footer );

}