http://www.printpac.co.jp/
こちらのページの
2段目のスライドしているナビゲーションのようにマウスオ-バーでnext,prevボタンが表示され、それをクリックすると次の画像が即座に表示され、なおかつ目的の画像からは個別のページへリンクする。というものが作りたいと思っています。
今現在はフェードインフェードアウト(画像表示の雰囲気がサンプルとは少し異なります)で画像を7枚順に表示されるようにするところまではOKです。
更に、最後の画像の(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"作ってリンク飛ばして、スライダーの動きはjsファイルで
制御しているようでしたのでこの"Map"を参考にひとまず最後に来るはずの画像を最初に持ってきて画像ファイルにMap作ってリンク飛ばして対応してるのですが、かなり苦し紛れ状態です・・・
何をどのように記述すれば目的の物が出来るでしょうか?
よろしくお願いいたします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
>最後の画像の(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作ってリンク飛ばして
これに関しては、当該の画像を表示した時にMAP要素を表示、それ以外では非表示にするなんて方法もあるかと思います。
この回答への補足
ありがとうございます
でも、コードが分からないのでどう記述していいのかがさっぱり分からないのです。。。
例えば、1、「onClickイベントを指定したnext,prev画像」とは・・・???
コードを出来れば教えていただけませんでしょうか。
あちこち調べてますがなかなか進まず・・・
Ajaxというものを使えばできるのかなぁと漠然と思ったりもするのですが・・・
そうなると又一からなので、jQeryの方がいいかもしれません。
実は、Flashで今までやっていたのですが、今後使えなくなるようなので、HTML5だったり、jQeryだったりに、シフトしていかなければいけないかなぁと思っているところです。
すみません、質問の仕方が悪かったでしょうか。
どうぞよろしくお願いいたします。
No.2
- 回答日時:
解答が遅くなりました。
私は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を削除
}
とします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
textareaに画像を表示したい
-
prettyphotoの画像表示について
-
画像をドラッグ&ドロップで移...
-
image.onload = .. の後に imag...
-
画像を指定座標まで移動させたい
-
マウス追従スクリプトについて
-
プルダウンの位置がwin/macでず...
-
画像をクリックすると、詳細の...
-
プルダウンメニューを作りたい
-
クリックして変更した画像を他...
-
【java】背景画像を一定時間で...
-
edgeでスクロールバーに色が表...
-
画像の重なりの順序を代える方...
-
bxsliderにて読み込み後に内容...
-
JQueryを使用して画像をゆっく...
-
JavaScriptとチェックボックス...
-
画像の上に画像リンクを貼る方法
-
画像ランダム表示、しかしダブ...
-
iframe内のリンク文字のマウス...
-
PC設定に依存しない曜日判定JS...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
1枚の画像をクリックして複数の...
-
Javascript で共通の処理をどこ...
-
JavaScriptとチェックボックス...
-
画像ランダム表示、しかしダブ...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
1枚の画像をクリックすると複数...
-
javascriptで毎月替わる画像
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報