Go to Qiita Advent Calendar 2024 Top
LoginSignup
tarunegi
@tarunegi

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

JavaScript 画像切り替えと転移について

Q&A

JavaScriptJavaScript初心者

JavaScriptの画像切り替えと転移

「画像をボタンによって切り替える」はできました。
切り替えた画像を直接クリックして別のページへ飛ぶようにしたいのですが、参考になりそうなサイトが見当たらなかったので教えてほしいです。

該当するソースコード

JavaScript

現状こうなっています

	<div class="genre">
		<div class="genre_img">
			<input type="button" value="&lt;" onclick="back()" class="input_back">
			<img src="./img2/nyu.png" id="img" class="button_img">
			<input type="button" value="&gt;" onclick="forward()" class="input_forward">
		</div>
			<script>
				var img_src = new Array("./img2/fish.png", "./img2/bento.png", "./img2/meet.png", "./img2/bread.png", "./img2/cup.png", "./img2/spice.png", "./img2/nyu.png","./img2/drink.png", "./img2/snack.png", "./img2/fruit.png", "./img2/vege.png");
				var num = 0;

				function forward() {
					if (num == 10) {
						num = 0;
					}
					else {
						num++;
					}
					document.getElementById("img").src=img_src[num];
				}

				function back() {
					if (num == 0) {
						num = 10;
					}
					else {
						num--;
					}
					document.getElementById("img").src=img_src[num];
				}
			</script>

該当するコード

CSS

上記のコードのCSS

.genre {
	display: flex;
	margin: 0 auto;
	width: 70%;
	height: 100vh;
}

.geare_img {
	display: flex;
}

img {
	width: 300px;
}

.button_img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.input_back {
	position: absolute;
	top: 50%;
	left: 30%;
}

.input_forward {
	position: absolute;
	top: 50%;
	right: 30%;
}
0

3Answer

Steven_Yang
@Steven_Yang

I've translated your question by machine.
Here's the final solution.
If you want to do better, use Hash/Dictionary instead of Array.

<style>
	.genre {
		display: flex;
		margin: 0 auto;
		width: 70%;
		height: 100vh;
	}

	.geare_img {
		display: flex;
	}

	img {
		width: 300px;
	}

	.button_img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.input_back {
		position: absolute;
		top: 50%;
		left: 30%;
	}

	.input_forward {
		position: absolute;
		top: 50%;
		right: 30%;
	}

	.img_link {
		border: 0;
	}
</style>
<script>
	var img_src = [
			"./img2/fish.png",
			"./img2/bento.png",
			"./img2/meet.png",
			"./img2/bread.png",
			"./img2/cup.png",
			"./img2/spice.png",
			"./img2/nyu.png",
			"./img2/drink.png",
			"./img2/snack.png",
			"./img2/fruit.png",
			"./img2/vege.png"
	];
	var urls = [
		"https://website_1",
		"https://website_2",
		"https://website_3",
		"https://website_4",
		"https://website_5",
		"https://website_6",
		"https://website_7",
		"https://website_8",
		"https://website_9",
		"https://website_10",
		"https://website_11"
	];
	var num = 0;

	function forward() {
		if (num == 10) {
			num = 0;
		}
		else {
			num++;
		}
		document.getElementById("img").src=img_src[num];
	}

	function back() {
		if (num == 0) {
			num = 10;
		}
		else {
			num--;
		}
		document.getElementById("img").src=img_src[num];
	}

	function goto() {
		window.location.href = urls[num];
	}
</script>
<div class="genre">
	<div class="genre_img">
		<input type="button" value="&lt;" onclick="back()" class="input_back">
		<a href="javascript:goto()" class="img_link"><img src="./img2/nyu.png" id="img" class="button_img"></a>
		<input type="button" value="&gt;" onclick="forward()" class="input_forward">
	</div>
</div>
1Like

Comments

  1. @tarunegi

    Questioner

    わかりやすい説明とコード提供の方大変感謝いたします！検証とともに参考にさせていただきます！

SurferOnWww
@SurferOnWww

画像を直接クリックして別のページへ飛ぶようにしたいのですが

「別のページ」って何ですか？　静的な html ページが複数あって（例えば、fish.html, bento.html, meet.html というような）、それらのページの順序は決まっていて、各ページに配置した < と > ボタンでページングしたいと言ってますか？

css のコードが提示してありますが、今回の質問の javascript によるページングに関係ないのでは？　関係なければ削除してください。関係あればどう関係するのか書いてください。

0Like

Comments

  1. @tarunegi

    Questioner

    「画像を直接クリックしたら別のページへ飛ぶようにしたい」っていう文章は見えませんでしたか？
    CSSは最初に提示したJavaScriptを含むコードでclass表示があったので念のため載せています。

  2. @SurferOnWww

    「別のページ」って何ですか？・・・という質門は見えなかった？

    あなたの言う「画像を直接クリックして別のページへ飛ぶ」というのは、単純にその言葉通りに書くと、

    <a href="別ページの URL">
  <img src="./img2/nyu.png" id="img" class="button_img">
</a>

    となるけど、それはたぶん求める答えとは違うと思って聞いているのです。

iiokazuya
@iiokazuya

参考になりそうなサイトが見当たらなかった

あるんだな～、いっぱい。
「javascript クリックされたら」で検索してみてください。

0Like

Comments

  1. @tarunegi

    Questioner

    私の調べ方に問題があったそうなのでアドバイスの方ありがとうございます。しかし、不親切ですね、検索したところで参考サイトは複数あってものによっては関係することは書いてあっても本題とは逸れているサイトも複数存在します。聞いている側からで上から目線だとか思うところもあるかと思いますが、そこは参考になりそうなサイトのURLを載せていただけますと、初心者の私は大変感謝できます。
    回答ありがとうございました。

  2. @iiokazuya

    それはそれは失礼いたしました。
    確かに直接サイトURLを記述することもできましたが、それではtarunegiさんのためにならないと思い、このような形にいたしました。

    お仕事では「誰も答えを知らない事」に挑みます。
    その時必要になるのは「ヒントを探す能力」です。
    ネットや書籍等のあらゆる情報を集めて、それらを組み合わせて、解決方法を見つけ出す。
    実務ではこれの繰り返しになります。
    誰も正解はこれだ、なんて教えてくれません。

    ただ、そうですね。まったくノーヒントというのもたしかに不親切。
    こちらのサイトなど、色々まとまってますので、ご参考になさってください。

Your answer might help someone💌

LoginSign Up