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"作ってリンク飛ばして、スライダーの動きはｊｓファイルで
制御しているようでしたのでこの"Ｍａｐ"を参考にひとまず最後に来るはずの画像を最初に持ってきて画像ファイルにＭａｐ作ってリンク飛ばして対応してるのですが、かなり苦し紛れ状態です・・・

何をどのように記述すれば目的の物が出来るでしょうか？
よろしくお願いいたします。

回答No.2

ermomurder

解答が遅くなりました。
私はjQueryを使わないのでそれを活用した方法は分かりません。ライブラリを使わないコードを簡単に示しておきます。

> 1.画像にonClickイベントを指定して座標を取得
> 2.それが文字の位置なら移動させる

<script type="text/javascript">
function click(){
var x=event.offsetX;//クリックX座標
var y=event.offsetY;//Y座標
if(画像の左端<=x&&画像の右端>=x&&画像の上端<=y&&画像の下端>=y){//クリックしたのが文字の位置か判定
//画像移動処理
}
}
</script>
<img id="myFormImg" onclick="click()" src="src.jpg" />

> 1.onClickイベントを指定したnext,prev画像などをHTML内に用意しておく。そのonClickに画像フェードイン処理を記述
> 2.表示する画像などにonMouseOverイベントを指定する。そこでnext,prevを表示
> 3.onMouseLeaveイベントでnext,prevを非表示

<script type="text/javascript">
function click(){
//画像移動処理
}
function over(){
document.getElementById("next").style.visibility="visible";//next画像表示
}
function leave(){
document.getElementById("next").style.visibility="hidden";//next画像非表示
}
</script>
<img id="next" onclick="click()" src="next.jpg" style="visibility:hidden;" /><!--next,prev画像-->
<img id="myFormImg" onmouseover="over()" onmouseleave="leave()" src="img.jpg" />

>当該の画像を表示した時にMAP要素を表示、それ以外では非表示にするなんて方法もあるかと思います。

これはたとえばmap要素（idをmapと仮定して）を用意した上で、myChange()の中で
if (myNowCnt == myImageCnt-1){ // 最後の画像まで表示したのなら
document.getElementById("myFormImg").useMap="#map";//mapを設定
myNowCnt=0; // 最初の画像に戻す
}else{ // 最後の画像まで表示していないのなら
myNowCnt++; // 次の画像へ
document.getElementById("myFormImg").useMap="";//mapを削除
}
とします。

回答No.1

ermomurder

>最後の画像の（giifファイル）中の文字からクリックでリンクに飛ぶ。
これをMAP要素を使わないでするとすれば、
1.画像にonClickイベントを指定して座標を取得
2.それが文字の位置なら移動させる
という処理にでもなるでしょうか。

>3秒周期の表示が待てない人にはnext,prevの矢印がマウスオーバーで出てきて、それをクリックすると次の画像がフェードインする
これには、
1.onClickイベントを指定したnext,prev画像などをHTML内に用意しておく。そのonClickに画像フェードイン処理を記述
2.表示する画像などにonMouseOverイベントを指定する。そこでnext,prevを表示
3.onMouseLeaveイベントでnext,prevを非表示
とでもなるでしょう。
next,prevはonMouseOverやonLoad内で作っても構いません。

>最後に来るはずの画像を最初に持ってきて画像ファイルにＭａｐ作ってリンク飛ばして
これに関しては、当該の画像を表示した時にMAP要素を表示、それ以外では非表示にするなんて方法もあるかと思います。

補足

ありがとうございます

でも、コードが分からないのでどう記述していいのかがさっぱり分からないのです。。。

例えば、１、「onClickイベントを指定したnext,prev画像」とは・・・？？？
コードを出来れば教えていただけませんでしょうか。

あちこち調べてますがなかなか進まず・・・
Ajaxというものを使えばできるのかなぁと漠然と思ったりもするのですが・・・
そうなると又一からなので、jQeryの方がいいかもしれません。
実は、Flashで今までやっていたのですが、今後使えなくなるようなので、HTML5だったり、jQeryだったりに、シフトしていかなければいけないかなぁと思っているところです。

すみません、質問の仕方が悪かったでしょうか。
どうぞよろしくお願いいたします。