テキスト部分を画像に変えたい

質問

いつもお世話になっています。

http://depthcode.com/jquery/fadetoggle/index.html
部分の「もっと見る」と「隠す」の部分を画像にしたいのですが、どこを直せば画像にできるのでしょうか？

<script type="text/javascript">
<!--
$(function () {
var fadeToggleBox = $('div.box');
$(fadeToggleBox).hide();
$('a.open').click(function () {
if ($(fadeToggleBox).is(':hidden')) {
$(this).text('隠す');
} else {
$(this).text('もっと見る');
}
$(fadeToggleBox).animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow'); //or fast
$(this).toggleClass('close');
return false;
});
});
// -->
</script>

部分をかえればできると思うのですが、どうかえればいいかわかりません。
よろしくお願いいたします。

回答No.2

SeydaNeen · ベストアンサー

キモは、$(this).text('隠す');の部分で、まあ分かるでしょうが、
ここを

$(this).html('<img src="btn2.gif">');
} else {
$(this).html('<img src="btn1.gif">');
}
で、htmlの最後のほうを

<p><a href="#" class="open"><img src="btn1.gif"></a></p>

に変更する、という感じで動きます。

お礼

ありがとうございます！無事出来ました！感謝です！！

回答No.1

fujillin

トリガーになっているのが、
　$('a.open').click(～～　　の部分なので、
　$('img.open').click(～～　　などとして

<a>～～</a>内のテキスト表示を変えている部分が、
　　$(this).text('隠す');
　} else {
　　$(this).text('もっと見る');
ですので、画像の内容を変更するのであれば
　　$(this).attr("src", ～～)
などを利用して入替えるようにしてあげればよろしいかと思います。
（後の部分は基本的に同じ）

もちろん、HTMLのリンクの部分は画像に変えておく必要があります。