フェードイン・アウトで画像を切り替えるとき画像サイズがかわってしまいます

Question

###前提・実現したいこと
カーソルを合わせるとフェードイン・アウトで画像を切り替えるようにしたいのですが,
bootstrapを使用しているためか、２つ全く同サイズの画像を用いているのに
フェードインさせる画像だけ大きく表示されてしまいます。
どうしたらサイズを変えずに表示できるでしょうか。

###該当のソースコード

 <div class="row">
            <div class="col-xs-6 col-sm-4">
                     <a>
                        <img src="images/picture_off.jpg" alt="" class="img-responsive" />
                      </a>
             </div>
</div>

function 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);

}

###補足情報(言語/FW/ツール等のバージョンなど)
Bootstrap 3.3.7使用
JQuery 1．11.3使用

Comments

[naomi3]

bootstrapを使用していませんが、バグが再現できません。

[退会済みユーザー]

Watanababe様より頂いた回答にあります通りimgタグのクラスが統一されていないのが問題であったようです。

[退会済みユーザー]

検討頂きありがとうございます！

Answer 1

この次の記事の別の方法で実現できているようですね。
こちらはご参考までにお願いします^^

Answer 2

初投稿です(^_^)

修正方法ですが、下記のいずれかで直りませんでしょうか。

◆１．class 名「.img-responsive」の CSS に「max-width: initial;」などを追加する。

/* 大雑把な例 */
.img-responsive {
    max-width: initial !important;
}

◆２．後からjsで追加する<img>タグ（images/picture_on.jpg）の class に「img-responsive」を追加する。

// js内
...
rolloverImg.style.filter = 'alpha(opacity='+alpha+')';
rolloverImg.style.position = 'absolute';
rolloverImg.className = "img-responsive"; // ここを追加

---

ご記載いただいているソースをローカル上で試したところ、
最初に入っている<img>画像（images/picture_off.jpg）の大きさが、
元の画像サイズより小さくなっていました。

Chrome のデベロッパーツールで確認したところ、
bootstrap.css の class 名「.img-responsive」の「max-width: 100%;」が影響していました。

/* bootstrap.css */
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%; /* ★ここです。 */
    height: auto;
}

class 名「.img-responsive」が付いている<img>タグと
付いていない<img>タグで画像サイズが異なっていました。

ですので、上記の１か２の方法で解決できるのではないでしょうか。

Comments

[退会済みユーザー]

ご回答ありがとうございます！
回答に気付かずご連絡が遅くなって申し訳ありません。
ご丁寧な回答の御蔭で無事解消することができました。
他方法でも試行錯誤して解決できましたが
現在自力でなんとか勉強しているところなので
このようなアドバイス本当に勉強になります！
ありがとうございます！！