img要素のsrc属性を変えるオーソドックスな方法

HTMLである【img要素】のsrc属性（画像ファイルがある場所までのパスやURLを指定するところ）は、CSSだけでは変更できません。hoverなどで画像を変更する場合はjQueryなどスクリプトで行うことになります。

オーソドックスなサンプルコード

[html]

<img src="images/LogicA.png" alt="LogicA" />

[/html]

[javascript]

jQuery("img").hover(function(){
jQuery(this).find("img").attr("src", "images/LogicAhover.png");
},function(){
jQuery(this).find("img").attr("src", "images/LogicA.png");
});

[/javascript]

今回は 通常時の画像ファイルを【LogicA.png】、hoverしたときの画像を【LogicAhover.png】にしてます。

で、普通のHTMLファイル上ならこれで問題ないんです。が、WordPressで制作したサイトだと問題が多々発生してくるんです。試しにさっきのサンプルコードだとこうなりますんでhoverしてみてください。

みたいな、ですよ。なんで？というと、WordPressでimg要素のsrcを指定するときは
[php]

<img src="<?php bloginfo(‘template_url’); ?>/images/LogicA.png" alt="LogicA">

[/php]

と、<?php bloginfo(‘template_url’); ?>というタグをsrcの頭に付けて トップのディレクトリを取得してからのルート指定をしないといけないんです。
しかし、jQueryのなかではもちろんPHPは使えません。例えばこうしてみても、

[javascript]

jQuery("img").hover(function(){
jQuery(this).find("img").attr("src", "<?php bloginfo(‘template_url’); ?>/images/LogicAhover.png");
},function(){
jQuery(this).find("img").attr("src", "<?php bloginfo(‘template_url’); ?>/images/LogicA.png");
});

[/javascript]

エラーになります。PHPとして展開してくれないんです。なので打開策をいくつか考えてみました。

サンプル

CSSのみ

jQueryでsrc変更（手打ち）

jQueryでsrc変更（一部）

力技

classで対応

どれも挙動は全く同じになります。が、やってることがけっこう違います。以下から説明しますね。

CSSのみ　で対応

[html]

<div>
<span>LogicA</span>
</div>

[/html]

[css]

span {
display: block;
width: 220px;
height: 91px;
margin: 0;
padding: 0;
background: left top no-repeat url("LogicA.png");
border: none;
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
}
span:hover {
background: left top no-repeat url("LogicAhover.png");
}

[/css]

img要素を諦めたパターンです。正直これが一番軽いしやりやすいし後からメンテもしやすいし、で いいです。

ただ、これだと今回の記事のテーマがいらない子になります。だし、img要素を諦められないことだっていろいろとあったりすることもあるとか思います。ですよ。

なので、imgを諦めない 別パターンで行きます。

jQueryでsrc変更（手打ち）　で対応

[php]

<div>
<img src="<?php bloginfo(‘template_url’); ?>/images/LogicA.png" alt="LogicA" />
</div>

[/php]

[javascript]

jQuery("img").hover(function(){
jQuery(this).attr("src", "http://logic-a.com/wp/wp-content/themes/logica2/images/LogicAhover.png");
},function(){
jQuery(this).attr("src", "http://logic-a.com/wp/wp-content/themes/logica2/images/LogicA.png");
});

[/javascript]

ベタ打ちで画像までのURLを頭から入れるパターンです。とりあえず対応させるならこれでいんじゃね、的なパターンです。

ただこれだと後からメンテとかけっこう大変です。あと、HTMLファイルとかを変更したときに予期せぬカタチで画像が表示されなくなったりする原因になったりするかもです。

そこでちょっとしゃれたやり方でやってみます。

jQueryでsrc変更（一部）　で対応

[php]

<div>
<img src="<?php bloginfo(‘template_url’); ?>/images/LogicA.png" alt="LogicA" />
</div>

[/php]

HTMLはさっきと一緒です。

[javascript]

var defSrc = jQuery("img").attr("src"); // srcの初期値
var changeSrc = defSrc.replace(/LogicA/g, "LogicAhover"); // hoverのsrcの値
jQuery("img").hover(function(){
jQuery(this).attr("src", changeSrc);
},function(){
jQuery(this).attr("src", defSrc);
});

[/javascript]

先にsrcの初期値と 変更後の値を取得してしまいます。
変更後のsrcは、画像ファイルまでのパスはそのまま流用し、画像ファイル名だけを変更して取得してます。

これだと、HTMLファイル側で何かしらの変更があっても対応しやすいです。画像ファイル自体が変わったときに、画像ファイル名だけ変えたらOKです。

力技　で対応

次はけっこうな力技です。まあ、結果が同じならいいや、的な。

[html]

<div id="parent">
<div id="child-1">
<img src="<?php bloginfo(‘template_url’); ?>/images/LogicA.png" alt="LogicA" />
</div>

<div id="child-2">
<img src="<?php bloginfo(‘template_url’); ?>/images/LogicA.png" alt="LogicAhover" />
</div>
</div>

[/html]

[css]

#parent {
width: 240px;
height: 120px;
margin: 0 auto 50px;
padding: 0;
position: relative;
}

#child-1, #child-2 {
position: absolute;
left: 0;
top: 0;
}

#child-2 {
display: none;
}

[/css]

[javascript]

jQuery("#child-1").hover(function(){
jQuery(this).hide();
jQuery("#child-2").show();
});
jQuery("#child-2").mouseleave(function(){
jQuery("#child-1").show();
jQuery("#child-2").hide();
});

[/javascript]

show()、hide()　で元画像と変更後を入れ替えてます。すさまじく無駄が多いです。でも結果は同じです。コツは親要素に【position: relative】を付けて 子要素に【position: absolute】で 子要素の位置をぴったり合わせてるところくらいです。

一応、メリットは あとからHTMLとか画像を変更とかしても、jQueryは一切いじらなくてすむ、くらい？です。

class で対応

[html]

<div>
<span>LogicA</span>
</div>

[/html]

[css]

span {
background: left top no-repeat url("LogicA.png");
}
span.on {
background: left top no-repeat url("LogicAhover.png");
}

[/css]

[javascript]

jQuery("span").hover(function(){
jQuery(this).addClass("on");
},function(){
jQuery(this).removeClass("on");
});

[/javascript]

これは一番最初のCSSで対応するパターンと近い方法で、実質CSSで切り替えしてます。

jQueryはhoverするたびに【class名 on】を付けたり外したりしているだけです。

CSSでは【span.on】で、class名 on　が付いているときだけ発動するCSSを指定しておけば、classが付いたときと付いてないときをCSSで記述するだけなので汎用性が高く、応用させやすいです。

結果、どれがいいの？

わかりません(笑)が、使うサイトによって、何のために、とか 誰が使う、とか考えて使い分けてみると良いと思いました。以上！