我应该把Javascript放在哪里？

Question

Okai so i have this worldmap in on of my wordpress pages and have for example this code

<area onmousedown="changeImages('world_leisureCargo_01', './images/worldmap/north_america.jpg')" onmouseout="changeImages('world_leisureCargo_01', './images/worldmap/world.jpg')" onmouseover="changeImages('world_leisureCargo_01', './images/worldmap/north_america.jpg')" coords="121,72,155,45,202,46,248,35,289,27,340,44,352,54,336,69,349,93,342,110,261,159,261,177,240,162,220,168,213,187,218,198,233,189,235,202,244,211,249,225,241,225,216,206,190,195,171,171,159,130,172,111,178,78,154,68,132,79" href="#" alt="North America" shape="poly"> 

What this code does is change to another images when hovering over certain part of the map by using the function changeImage.. The problem is i cant have the function which is like this

<script type="text/javascript">

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}

below the html code because wordpress seems to "sugar-code" some part of it so it doesnt work.

Where should i put the Javascript code then so it works ?

Answer 1

Here is an example of how I added it in a site I built for a client. I had a hard time including it externally, so I ended up just using the editor to place the images. I use TinyMce Advanced (I'm not sure if the regular editor would strip out the formatting, but it works with TinyMce Advanced):

  <p style="text-align: center;">
    <a title="Other Notable Projects" href="http://www.amasonry.com/other-notable-projects/">
    <img class="alignnone" onmouseover="this.src='http://www.amasonry.com/wp-content/themes/infocus/images/Sonic-Headquarters-Sepia.jpg';" onmouseout="this.src='http://www.amasonry.com/wp-content/themes/infocus/images/Sonic-Headquarters-Color.jpg';" src="http://www.amasonry.com/wp-content/themes/infocus/images/Sonic-Headquarters-Color.jpg" alt="" width="375" height="205" />
    </a>
  </p>