Java Scriptの画像切り替えについて

質問

□（カーソルが置かれた下記の画像を表示）

　■　　　 ■　 　　■
画像１　画像２　画像３

上記のようなJavaScriptは
よくあると思いますが…

例えば…

画像１～３の部分にカテゴリのアイコンまたは画像を配置し、
TOPの切り替わる画像の部分を
カーソルが置かれたカテゴリの”最新”記事画像を表示

のように表示される画像を可変にすることはできますか？

説明ベタですみませんが…
上記のないようを理解できた方で
もしわかる方がいらっしゃいましたら教えてください。

回答No.1

JJDOM

イマイチ理解出来てないかもしれませんが、

　 □←A

■ ■ ■
画1　画2　画3

「画1」をクリックしたら「カテゴリ1」から最新の記事画像を
「画2」をクリックしたら「カテゴリ2」から最新の記事画像を
「画3」をクリックしたら「カテゴリ3」から最新の記事画像を
「領域A」に表示させたいということでしょうか？

だとしたら
画1～3のクリックイベントで
各DBから最新の記事画像のパスを取得して
領域Aの画像SRCにURLを呼び出すと言う流れでいいかと思います。

<script src="jquery.js"></script>
<script>
$(function(){
$("li img").click(function(){
var DB = $(this).attr("id")
$("#img_a").load("db.php?cate="+DB);//db.phpで最新画像を呼ぶ
});
});
</script>

<p id="img_a"><img src="a.jpg" /></p>

<ul>
<li><img src="img1.png" id="category1"></li>
<li><img src="img2.png" id="category2"></li>
<li><img src="img3.png" id="category3"></li>
</ul>

お礼

>「画1」をクリックしたら「カテゴリ1」から最新の記事画像を
>「画2」をクリックしたら「カテゴリ2」から最新の記事画像を
>「画3」をクリックしたら「カテゴリ3」から最新の記事画像を
>「領域A」に表示させたいということでしょうか？

やりたい内容は上記の通りです。

助かりました！
ありがとうございますm(_ _)m