No.4ベストアンサー
- 回答日時:
Netscape4.x では、IMG の onClick がサポートされていないので、No.1や2の方法では動きません。
通常、画像に対する処理を書く場合は、画像をAタグで囲んで、その onClick に処理を書きます。
また、初めは表示されない画像は、Imageオブジェクトを作って、予め読み込んでおきます。
<HTML>
<HEAD>
<SCRIPT language="JavaScript"><!--
var count = 3; // 画像数
var files = new Array("a_1.gif", "b_1.gif", "c_1.gif"); // 画像ファイル名
var objs = new Array(count);
function init() { // 初期化(イメージのプリロードなど)
for (i = 0; i < objs.length; i++) {
objs[i] = new Image(32,32); // 画像サイズ
objs[i].src = files[i];
objs[i].bak = document.images["image"+i].src;
objs[i].flg = 0;
}
}
function change_img(n) { // 画像変更
if (objs[n].flg == 0) {
document.images["image"+n].src = objs[n].src;
} else {
document.images["image"+n].src = objs[n].bak;
}
objs[n].flg = 1 - objs[n].flg;
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="init()">
<A href="javascript:void(0)" onClick="change_img(0)"><IMG name="image0" border="0" src="a_0.gif"></A>
<A href="javascript:void(0)" onClick="change_img(1)"><IMG name="image1" border="0" src="b_0.gif"></A>
<A href="javascript:void(0)" onClick="change_img(2)"><IMG name="image2" border="0" src="c_0.gif"></A>
</BODY>
</HTML>
必要に応じて、画像数や画像ファイル名、画像サイズは変更して下さい。
ありがとうございます!希望通りのものが出来ました。
IMGのonClickがサポートされてないっていうのも聞いたことがあったので、良かったです。
No.3
- 回答日時:
少し面倒かもしれませんが,画像をページに貼り付け,画像そのものにリンクを貼る方法ではまずいですか?
1枚目
<BODY>
<P><A href="2枚目のページ.html" target="_self"><IMG src="最初の画像.jpg"></A></P>
</BODY>
2枚目
<BODY>
<P><A href="3枚目のページ.html" target="_self"><IMG src="2枚目の画像.jpg"></A></P>
</BODY>
3枚目
<BODY>
<P><A href="1枚目のページ.html" target="_self"><IMG src="3枚目の画像.jpg"></A></P>
</BODY>
いかがなものでしょう?
これなら,何枚画像があっても大丈夫だと思いますが・・・。
蛇足ですが,こんなことも可能です。
<BODY>
<P><IMG src="2枚目の画像.jpg" usemap="#2枚目の画像(拡張子無しのファイル名)"></A></P>
<MAP name="2枚目の画像(拡張子無しのファイル名)">
<AREA href="最初のページ.html" target="_self" shape="rect" coords="sx1,sy1,ex1,ey1" alt="前の画像">
<AREA href="Indexなどのページ.html" target="_self" shape="rect" coords="sx2,sy2,ex2,ey2" alt="元に戻す">
<AREA href="3枚目のページ.html" target="_self" shape="rect" coords="sx3,sy3,ex3,ey3" alt="次の画像">
<AREA shape="default" nohref>
</MAP></BODY>
このようにすると,画像のクリックする部分によって,前の画像や次の画像,または,一覧ページなどに戻すことも出来るようになります。
(sxは最初のX座標,syは最初のY座標,exは終わりのX座標,eyは終わりのY座標です・・・「範囲指定の」ですよ)
画像はメインに使うものでは無いし、読み込み時間を出来るだけ少なくしたいので、リンクよりはスタイルシートかJavaScriptなどが良いのです。私の説明不足ですみません。でも、ご回答ありがとうございました。
No.2
- 回答日時:
前のやつにちょっと手を加えてみました。
↓<script language=javascript>
var clicked = new Array();
function mouseclick(n) {
if (clicked[n]) {
window.event.srcElement.src = "最初の画像.gif";
clicked[n] = false;
} else {
window.event.srcElement.src = "2枚目の画像.gif";
clicked[n] = true;
}
}
</script>
<img id="image1" src="最初の画像.gif" onclick="mouseclick(1)">
<img id="image2" src="最初の画像.gif" onclick="mouseclick(2)">
<img id="image3" src="最初の画像.gif" onclick="mouseclick(3)">
ありがとうございます!助かります。
ところで、もし使う2枚の画像がそれぞれ違う、3組のボタン(ボタンに使ってます)を置きたい時も、どうすれば良いのか教えてもらえますか?これ↑を試してみて、それぞれ色だけ変えても良いなぁ、なんて思ったんです。
1個目のボタンは赤系の色、2個目は青系、3個目は黄色系で、押すと色が鮮やかになり、もう一度押すと元の色に戻る、みたいな感じで出来ますか?何度も質問することになってしまい、申し訳ありませんm(_ _)m
No.1
- 回答日時:
JavaScriptで出来そうです。
↓こんな感じ。
<script language=javascript>
var clicked = false;
function mouseclick() {
if (clicked) {
image1.src = "最初の画像.gif";
clicked = false;
} else {
image1.src = "2枚目の画像.gif";
clicked = true;
}
}
</script>
<img id="image1" src="最初の画像.gif" onclick="mouseclick()">
※ ネットスケープだとうまくいかないかもしれません。(^^;
ありがとうございます(^-^)試してみたら、1つだと出来ました!でも同じページに3つそういうものを置きたいのですが(3つとも、使う2枚の画像は同じものです)、3つ書いてみると出来ませんでした。3つでも出来る方法はありますか?
HTMLのカテゴリで書いたけど、JavaScriptの方に移した方が良いでしょうか。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショーの上にロゴマー...
-
拡張子無しで画像を表示したいです
-
「DecareステートメントにPtrSa...
-
IMGタグでTIFF画像を表示
-
タイトルバーに画像を入れるHTM...
-
ボタンを押したままにする。
-
HPのリンクボタン。。。。
-
YAHOOオークションの出品説明に...
-
バナーの貼り方とバナーにリン...
-
▲▲マウスオンで画像を変更につ...
-
IE11にてonclickの動作不良
-
windowsは画像にマウスオンで画...
-
自分のHPにタグで天気予報を...
-
<img src="相対パス">の絶対パ...
-
<area></area> 部分にボーダー...
-
画像の周りに色がつく
-
期間ごとに画像表示を切り替え...
-
テーブルタグの余白
-
PDFの保存ボタンが表示されません
-
background-sizeでcontainする...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
pngやjsの後ろの英数字の意味は...
-
タイトルバーに画像を入れるHTM...
-
背景が透明なリンクボタンで、...
-
画像クリックでクリップボード...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
バナーの貼り方とバナーにリン...
-
HTMLにQRコードを挿入する方法
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
期間ごとに画像表示を切り替え...
-
スライドショーの上にロゴマー...
-
アルバムをめくるように、画像...
-
複数のボタンで1つのエリアに...
-
HTML上の画像を結合する方法が...
-
「DecareステートメントにPtrSa...
-
<A href= と<IMG srcの使い分け
-
CSSを使わずにマウスオーバーで...
おすすめ情報