フェードインで文章を切り替えたい。

質問

http://www.gkicresourcecenter.com/product/influential-writing-workshop/

ここのようなボタン（★マークの下）をクリックした際に下部の文章が
フェードアウト～フェードインで切り替わるようにしたいのですが、
なにかいいスクリプトをご存知ないでしょうか。

できれば、クリック後、どのボタン内にいるかわかるように、
ボタンの色も変わる（CSSが切り替わる）ような判別も行いたいです。

回答No.2

mikemike7 · ベストアンサー

>と言う風に設置したものをフェードインで
>切り替えるにはどうすればいいでしょうか？
予め仕様があるのなら、初めに書いてくださると二度手間が省けます。
回答側としては参考URLを提示されても異なる仕様なら想像で作るしかないので。

修正案です。

// CSS部

div#text div{display:none;}

// HEAD・HTML部

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"><!--
var defimg = "";
var chengeimg = "chenge.gif"; // マウスが載った時に変える画像
var clickimg = "click.gif"; // クリックした時に変える画像
$(function(){
$("div#imglist img").hover(
function(){
defimg = $(this).attr("src");
$(this).attr("src",chengeimg);
$("div#text ."+$(this).attr("id")).fadeIn("slow");
},
function(){
$(this).attr("src",defimg);
$("div#text ."+$(this).attr("id")).css("display","none");
}
);
$("div#imglist img").click(
function(){
$(this).attr("src",clickimg);
defimg = clickimg;
}
);
});
--></script>
<div id="imglist">
<img src="01.gif" id="a"><br>
<img src="02.gif" id="b"><br>
<img src="03.gif" id="c"><br>
<img src="04.gif" id="d"><br>
<img src="05.gif" id="e">
</div>
<div id="text">
<div class="a"><p>あいうえお</p></div>
<div class="b"><p>かきくけこ</p></div>
<div class="c"><p>さしすせそ</p></div>
<div class="d"><p>たちつてと</p></div>
<div class="e"><p>なにぬねの</p></div>
</div>

// 説明

<img src="***" id="ここに表示したいclass名を指定">

以上です。

回答No.1

mikemike7

JQuery使って簡単に作ってみました。
参考ページと同じ感じで仕上げています。

機能：
１．画像にマウスが乗ったら違う画像になる
２．画像にマウスが乗ったら文章を書き出し
３．画像からマウスが離れたら、マウスが乗る前の画像になる
４．画像をクリックしたら画像が変わる

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"><!--
var defimg = "";
var chengeimg = "chenge.gif"; // マウスが載った時に変える画像
var clickimg = "click.gif"; // クリックした時に変える画像
$(function(){
$("div#imglist img").hover(
function(){
defimg = $(this).attr("src");
$(this).attr("src",chengeimg);
$("div#text").html($(this).attr("alt"));
},
function(){
$(this).attr("src",defimg);
$("div#text").html($(this).attr("alt"));
}
);
$("div#imglist img").click(
function(){
$(this).attr("src",clickimg);
defimg = clickimg;
}
);
});
--></script>
<div id="imglist">
<img src="01.gif" alt="あいうえお"><br>
<img src="02.gif" alt="かきくけこ"><br>
<img src="03.gif" alt="さしすせそ"><br>
<img src="04.gif" alt="たちつてと"><br>
<img src="05.gif" alt="なにぬねの">
</div>
<div id="text"></div>

// 説明
chengeimgにマウスオーバーさせる画像を指定
clickimgにクリックした時に切り替える画像を指定

変化させたい画像を<div id="imglist"></div>内に入れ込みます。
変化させる画像のalt=""内に、下部で書き出す文章を入れます。

以上です。

お礼

ありがとうございます。

試してみました。
こんな方法もあるんですね。
知りませんでした。
しかもこの短時間で作成できるなんて、凄いですね。

ただ、せっかく作成して頂いたのに大変申し訳ないのですが、
この方法ですとALT内の文章が反映される為、
HTML文法により画像やタグが記述できないので、

<div class="a">
<p>あああああああああ</p>
</div>

<div class="bは非表示">
<p>いいいいいいいいい</p>
</div>

<div class="cは非表示">
<p>ううううううううう</p>
</div>

と言う風に設置したものをフェードインで
切り替えるにはどうすればいいでしょうか？