JavaScriptで画像からリンクプラスアルファ
http://www.printpac.co.jp/
こちらのページの
2段目のスライドしているナビゲーションのようにマウスオ-バーでnext,prevボタンが表示され、それをクリックすると次の画像が即座に表示され、なおかつ目的の画像からは個別のページへリンクする。というものが作りたいと思っています。
今現在はフェードインフェードアウト(画像表示の雰囲気がサンプルとは少し異なります)で画像を7枚順に表示されるようにするところまではＯＫです。
更に、最後の画像の（giifファイル）中の文字からクリックでリンクに飛ぶ。
そして、3秒周期の表示が待てない人にはnext,prevの矢印がマウスオーバーで出てきて、それをクリックすると次の画像がフェードインする。という風にしたいと思っています。
現在のコードです。
<script src="http://code.jquery.com/jquery.js"></script>
<script language="JavaScript"><!--
$(function(){
myImageCnt = 7; // 画像の数
myImage = new Array( // 画像ファイル名の設定
"img/main/f01.jpg",
"img/main/f02.jpg",
"img/main/f03.jpg",
"img/main/f04.jpg",
"img/main/f05.jpg",
"img/main/f06.jpg",
"img/main/f07.jpg"
);
myNowCnt = 0; // 現在表示している画像番号
function myChange(){ // 定期的に画像を更新する関数
if (myNowCnt == myImageCnt-1){ // 最後の画像まで表示したのなら
myNowCnt=0; // 最初の画像に戻す
}else{ // 最後の画像まで表示していないのなら
myNowCnt++; // 次の画像へ
}
setTimeout(function() {
$("#myFormImg").fadeOut(2000, function() {
$(this).attr("src", myImage[myNowCnt]);
$(this).fadeIn(1000, function() {
myChange();
});
});
}, 3000); // 3秒周期
}
myChange();
});
// --></script>
<img src="img/main/f01.jpg" width="900" height="300" id="myFormImg">
<script language="JavaScript"><!--
myChange();
// --></script>
サンプルのページでは"CSS"と"画像にMap"作ってリンク飛ばして、スライダーの動きはｊｓファイルで
制御しているようでしたのでこの"Ｍａｐ"を参考にひとまず最後に来るはずの画像を最初に持ってきて画像ファイルにＭａｐ作ってリンク飛ばして対応してるのですが、かなり苦し紛れ状態です・・・
何をどのように記述すれば目的の物が出来るでしょうか？
よろしくお願いいたします。
お礼
返信おそくなりました。 ありがとうございます。参考にさせてもらってます。 あと、いろいろこちらでも調べましたところ 希望にほど近いものを見つけました。 よかったら見てください。 http://www.flowplayer.org/tools/scrollable.html まだまだjavascriptは初心者なので わからないことだらけですが、いろいろ試してみたいとおもいます。 ありがとうございました。