Javascript Rollover in Wordpress_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-12 02:22 出处：网络

I would like to ask about the Button with Roll Over Javascript I have in my wordpress theme, the problem is the code is divided in two parts:

The 1st code is about Javascript

<script>
<!--
if(document.images)
{
  var image_array = new Array();

  // path to the directory with images
  var path = '/img/';

  // enumeration of the "active" images
  image_array[0] = "<?php bloginfo('template_directory'); ?>/button1_red.png";
  image_array[1] = "<?php bloginfo('template_directory'); ?>/button2_red.png";
  image_array[2] = "<?php bloginfo('template_directory'); ?>/button3_red.png";

  var preload_image = new Array ();

 for(var i=0; i<image_array.length; i++)
  {
    preload_image[i]= new Image();
    preload_image[i].src = image_array[i];
  }
}

function rollover(name, filename)
{
    var fullpath = '' + filename;
    document.images[name].src = fullpath;
}
//-->
</script>

<!--ROLL OVER SCRIPT-->

and the 2nd is html.

        <div id="buttons">

            <a href="http://www.facebook.com/pages/Ben-Daggers/209582909053404" target="_blank" onmouseover=rollover('button1','<?php bloginfo('template_directory'); ?>/button1_red.png'); onmouseout=rollover('button1','<?php bloginfo('template_directory'); ?>/button1_blue.png')><img src="<?php bloginfo('template_directory'); ?>/button1_blue.png" name="button1" width="35" height="35" border="0" title="Like us on Facebook!" alt="BenDaggers.com: Like us on Facebook!"></a>
            <a href="http://twitter.com/bendaggers" target="_blank" onmouseover=rollover('button2','<?php bloginfo('template_directory'); ?>/button2_red.png'); onmouseout=rollover('button2','<?php bloginfo('template_directory'); ?>/button2_blue.PNG')><img src="<?php bloginfo('template_directory'); ?>/button2_blue.PNG" name="button2" width="35" height="35" border="0" title="Follow us on Twitter!" alt="BenDaggers.com: Follow us on Twitter!"/></a>
            <a href="http://feeds.feedburner.com/bendaggers" target="_blank" onmouseover=rollover('button3','<?php bloginfo('template_directory'); ?>/button3_red.png'); onmouseout=rollover('button3','<?php bloginfo('template_directory'); ?>/button开发者_StackOverflow社区3_blue.PNG')><img src="<?php bloginfo('template_directory'); ?>/button3_blue.PNG" name="button3" width="35" height="35" border="0" title="Subscribe to our RSS Feeds!" alt="BenDaggers.com: Subscribe to our RSS Feeds!" /></a>

</div>

Where should i put the javascript code since the Button should be in sidebar (sidebar.php)?

I tried putting the javascript in the index.php and the html code in sidebar.php but its not working.

Any help?

Put the HTML in sidebar.php and javascript in header.php (assuming your theme has a header.php file) inside the <head> tag.

Because your html part depends on the Javascript part, the Javascript part must go first in the page. The simplest way to ensure this without knowing much about the structure of Wordpress is simply include both snippets in the same place, say sidebar.php, one after the other.