var RollOver = Class.create();
RollOver.prototype = {
initialize: function(option) {
  var props = { //?????????
    hclass : "hover", //class=rollover??????
    suffix : "_o" //?????????????_ovr???????
  };
  if(option) for(var key in option) props[key] = option[key];
  $$('img.'+props.hclass,'input.'+props.hclass).each(
    function(el){
      var osrc = el.getAttribute('src');
      if (!osrc) return;
      var hsrc = osrc.replace(/(\.gif|\.jpg)/,props.suffix+'$1');
      (new Image()).src = hsrc; //?????????
      el.observe("mouseover",function(){
        el.setAttribute('src', hsrc);
      }).observe("mouseout",function(){
        el.setAttribute('src', osrc);
      });
    }
  );
}
}//prototype
Event.observe(window,'load',function(){new RollOver();});


$(document).ready(function(){
	//ナビゲーションのmouseover。画像切り替えとは関係ない。
	$("ul > li").hover(function(){ 
		$(this).fadeTo(200,0.5); 
	},function() {
		$(this).fadeTo(200,1); 
	});
	
	//画像切り替え、#targetの内容を変更する。
	$("ul > li > a").click(function(){
		var src = $(this).attr("href");
		$("#target").fadeOut("slow",function() {
			$(this).attr("src",src);
			$(this).fadeIn();
		});
		return false;
	});
});