Java scripts conflict on my home page

<script type="text/javascript" src="jquery-1.js"></script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
<script type="text/javascript">  
 //<![CDATA[
   window.addEvent('domready', function(){
     var data = {
       '1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' }, 
       '2.jpg': { caption: 'A Ceibu tree.' }, 
       '3.jpg': { caption: 'The view from Volcano Maderas.' }, 
       '4.jpg': { caption: 'Beer an开发者_StackOverflow社区d ice cream.' }
     };
     var myShow = new Slideshow('show', data, {controller: true, height: 400, hu: 'images/', thumbnails: true, width: 500});
   });
 //]]>
</script>
<script type="text/javascript">
$(document).ready(function()
{
 //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
 $("#firstpane p.menu_head").click(function()
    {
  $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().css({backgroundImage:"url(left.png)"});
 });
 //slides the element with class "menu_body" when mouse is over the paragraph
 $("#secondpane p.menu_head").mouseover(function()
    {
      $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(left.png)"});
 });
});
</script>

<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

---

jQuery's no conflict is a great choice. I'd suggest though doing something like this:

<script language=javascript>
  var $j = jQuery.noConflict();
</script>

That's going to give you access to jQuery's functionality using $j in place of $. I use this method to include jQuery in most pages via GreaseMonkey. I've got a custom copy of jQuery that includes the above call at the end. I use GreaseMonkey to insert a link to that script into the head of web pages so I can investigate object properties using $j without affecting other libraries that might be present in the page and using $.

---

After including jQuery, you should call $.noConflict(). This will remove the "$" from the global namespace:

<script type="text/javascript" src="jquery-1.js"></script>
<script>
$.noConflict();
</script>
<script type="text/javascript" src="mootools.js"></script>

At this point, you should use jQuery instead of $ if you want to call jQuery code. Or you could use a trick by wrapping the $ symbol in a closure:

<script type="text/javascript">
jQuery(function($) {
  // here you can use $ instead of jQuery
});
</script>