JAVAで画像をボタンで切り替え表示し、さらにそれぞれの画像をそれぞれ別のURL(.html)へリンクをつける方法について教えて下さい。
<html>
<head>
<script language="JavaScript"> <!--
var i_index=-1;
var arrImgs = [ '絵1.jpg', '絵2.jpg', '絵3.jpg', '絵4.jpg' ];
var tmp;
for (j=0; j<arrImgs.length ;j++){
tmp = new Image(); tmp.src = arrImgs[j]; arrImgs[j] = tmp;
}
function flt1(){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[0].Apply();
img1.src=arrImgs[getGazou()].src;
img1.filters[0].Play();
}
function getGazou(){
var i= Math.floor(Math.random()*arrImgs.length);
if ( i==i_index ) {
if (i_index==arrImgs.length-1) {
i=0;
} else {
i++;
}
}
i_index=i;
return i
}
//-->
</script>
</head>
<body text="#000000">
<center>
<img id="img1" src="絵0.jpg">
</center>
<form name="fm">
<table align="center" border=1 bgcolor="#FFFFCC">
<tr>
<td colspan=2 align="right">
<input type="button" value="絵のランダム切り替え(フィルタ付)" onClick="flt1()">
</td>
</tr>
</table>
</form>
</body>
</html>
上記の内容で、各画像ごとにそれぞれ別のホームページURLへリンクさせたいのですが、どのようにすれば良いか分かりません。
下の方にある
<img id="img1" src="絵0.jpg">
の前に<a href=" ">を加えるとどの画像にもこのURLしかリンクされません。当然ですが…
http://oshiete.goo.ne.jp/qa/3786377.html
で回答されている方の内容にリンクを加える形になります。
色々と検索して探していますが、これらが組み合わさったソースが見当たらず解決できず先に進めません。
どうかご回答よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
もとプログラムががぜんぜんだめすすが、そのレベルで
そのまま改造すると
<script type="text/javascript">
<!--
var i_index=-1;
var arrImgs=['絵1.jpg','絵2.jpg','絵3.jpg','絵4.jpg'];
var arrUrls=['1.html','2.html','3.html','4.html'];
var tmp;
for (j=0; j<arrImgs.length ;j++){
tmp = new Image(); tmp.src = arrImgs[j]; arrImgs[j] = tmp;
}
function flt1(){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[0].Apply();
var index=getGazou();
link1.href=arrUrls[index];
img1.src=arrImgs[index].src;
img1.alt="絵"+(index+1);
img1.filters[0].Play();
}
function getGazou(){
var i= Math.floor(Math.random()*arrImgs.length);
if ( i==i_index ) {
if (i_index==arrImgs.length-1) {
i=0;
} else {
i++;
}
}
i_index=i;
return i
}
//-->
</script>
</head>
<body text="#000000">
<center>
<a id="link1" href="/0.html"><img id="img1" src="絵0.jpg" alt="絵0"></a>
</center>
<form name="fm">
<table align="center" border=1 bgcolor="#FFFFCC">
<tr>
<td colspan=2 align="right">
<input type="button" value="絵のランダム切り替え(フィルタ付)" onClick="flt1()">
</td>
</tr>
</table>
</form>
</body>
試したところできました!有難う御座います。
素人なりに色々とさわっていましたが、全然見当違いのところを改変していました。
それから、このプログラムは良いとは言えないのですね。
貴重な時間を割いて回答いただき、有難う御座いました。質問して良かったです^^
No.3
- 回答日時:
それから、これはとても大切な事ですが、
JAVASCRIPTじゃなくてJAVAです。
JAVAとJAVASCRIPTは全く別のものです。
No.1
- 回答日時:
ご提示のコードでは、img要素のsrc属性を変更することで画像の内容を変更しているのですが、同じようにリンク要素( <a )のhref属性を変更してあげれば、リンク先を変更できます。
でも、その前に…
ご提示のコードはIE限定(他のブラウザだと動かない)けど、そういう限定環境での利用のみと考えてよいのですね?
ご説明いただき、有難う御座います。
IE限定というのは理解しておりましたが、他のブラウザでも動くようにするプログラムというのは、私には全然分かりませんので、これで納得させています。本当はできるといいですが・・・
貴重なお時間をいただき、有難う御座いました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
画像をランダムな座標に一定の...
-
JavaScriptを外部ファイルにす...
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
jQueryスライドショー画像への...
-
画像の表示位置
-
JavaScript スライドの画像にリ...
-
ポップアップのソースの書き方...
-
デフォルト非表示にしたい。【t...
-
onclickとonmouseoverを同時に...
-
複数トリガーで動作するアコー...
-
背景色を透明化
-
バッチファイルでカウントアッ...
-
ホームページビルダー15 メニュ...
-
createElementが一瞬で消えてし...
-
タブで開いてさらにタブ内をア...
-
スライダーを実装した場合、ペ...
-
スマートフォンサイトに部分的...
-
jQueryで特定のURLの時のみ表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
this.src等のthisについて
-
imgのsrcに値を設定するには
-
jQueryでサーバー上のファイル...
-
画像の座標位置取得
-
イベントハンドラを完全に外部...
-
連番画像「次へ」「前へ」で、...
-
画像の下に説明文をつけて切り...
-
JS switch文について
-
JavaScriptでリクエストを飛ば...
-
スマートな外部javaでロールオ...
-
JavaScriptでシンプルなスライ...
-
一定時間で画像とリンク先を変...
-
javascript 時計24時間表示
-
画像と文字を同時に切り替えたい
-
これはどんなJavaScriptなので...
-
Javaにて画像を残像が残りつつ...
-
FirefoxでonMouseOver/Outの動...
-
divの背景画像を、徐々に表示さ...
-
時間によって表示される画像を...
おすすめ情報