マウスオーバーで画像を入れ替える方法

Question

前提・実現したいこと

WordPressでホームページをつくっています。
以下のページにあるGoogleMapにマウスオーバーで画像を入れ替えたいです。

http://www.asobinomori.org/access

発生している問題・エラーメッセージ

もともとテーマについていたjscript.jsというスクリプトが読み込んでしまい、
読み込ませたいmain.jsというスクリプトが読み込んでくれません。

該当のソースコード

smartRollover() {
    if(document.getElementsByTagName) {
        var images = document.getElementsByTagName("img");
 
        for(var i=0; i < images.length; i++) {
            if(images[i].getAttribute("src").match("_off."))
            {
                images[i].onmouseover = function() {
                    this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
                }
                images[i].onmouseout = function() {
                    this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
                }
            }
        }
    }
}
 
if(window.addEventListener) {
    window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
    window.attachEvent("onload", smartRollover);
}
 
// cross fade
 
new function(){
  function setRollOver2(){
    if(!document.images){return;}
    var imgs = document.images;
    var insert = [];
    for(var i=0;i<imgs.length;i++){
      var splitname = imgs[i].src.split('_off.');
      if((splitname[1])&&(imgs[i].parentNode.tagName=='A')){
        var rolloverImg = document.createElement('img');
        rolloverImg.src = splitname[0]+'_on.'+splitname[1];
        var alpha = 0;
        rolloverImg.currentAlpha = alpha;
        rolloverImg.style.opacity = alpha/100;
        rolloverImg.style.filter = 'alpha(opacity='+alpha+')';
        rolloverImg.style.position = 'absolute';
 
        addEvent(rolloverImg,'mouseover',function(){setFader(this,100);});
        addEvent(rolloverImg,'mouseout',function(){setFader(this,0);});
 
        insert[insert.length] = {position:imgs[i],element:rolloverImg};
      }
    }
    for(var i=0;i<insert.length;i++){
      var parent = insert[i].position.parentNode;
      parent.insertBefore(insert[i].element,insert[i].position);
    }
  }
 
  function setFader(targetObj,targetAlpha){
    targetObj.targetAlpha = targetAlpha;
    if(targetObj.currentAlpha==undefined){
      targetObj.currentAlpha = 100;
    }
    if(targetObj.currentAlpha==targetObj.targetAlpha){
      return;
    }
    if(!targetObj.fading){
      if(!targetObj.fader){
        targetObj.fader = fader;
      }
      targetObj.fading = true;
      targetObj.fader();
    }
  }
 
  function fader(){
    this.currentAlpha += (this.targetAlpha - this.currentAlpha)*0.2;
    if(Math.abs(this.currentAlpha-this.targetAlpha)<1){
      this.currentAlpha = this.targetAlpha;
      this.fading = false;
    }
    var alpha = parseInt(this.currentAlpha);
    this.style.opacity = alpha/100;
    this.style.filter = 'alpha(opacity='+alpha+')';
    if(this.fading){
      var scope = this;
      setTimeout(function(){fader.apply(scope)},30);
    }
  }
 
  function addEvent(eventTarget, eventName, func){
    if(eventTarget.addEventListener){
      eventTarget.addEventListener(eventName, func, false);
    }else if(window.attachEvent){
      // IE
      eventTarget.attachEvent('on'+eventName, function(){func.apply(eventTarget);});
    }
  }
 
  addEvent(window,'load',setRollOver2);

Comments

[yambejp]

コードがマークアップされていません、調整ください
jQueryのタグが付いていますがピュアなjsで処理を希望していますか？

[kouji_piano]

ピュアなjsで処理が希望です。

[kouji_piano]

ごめんなさい。マークアップという意味がわかりません。よろしければやり方を教えて頂けないでしょうか

[yambejp]

> ピュアなjs

jQueryタグをjavascriptタグに付け替えてください

> マークアップ

あ、ごめんなさい、正しくはマークダウンですね
ソースの部分の前後の行にバックスラッシュ３つ「```」を挿入します
ソースを「ここがソースですよー」と明示することです。
質問時に「Markdown記法」について下にヘルプが表示されているので参照してください

Answer 1

直接の答えではありませんが、
main.jsが読み込まれていないのは、他のライブラリのせいではなく
main.js内にエラーがあるからだと思われます。

1行目：関数定義になっていないので修正

smartRollover(){
　↓
function smartRollover(){

中段

new function(){

の閉じ}がない

というより、そもそも文法がおかしい気がしますので
「new function(){」を削除すれば良いかと思います。