JAVAScriptファイルからHPのリンクを指定する

index.htmlにJAVAScriptファイルを挿入しJAVAScriptファイルで画像を貼り付けています。document.kuji.src = "button.gif";
この画像のリンク(同じフォルダーのsale.html)を指定するにはどのような方法があるでしょうか?
ちなみに同じJAVAScriptファイルにdocument.links.kuji.href = "sale.html";ではだめでした。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2016/11/23 06:13:31

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

元のコードを見ないと何ともという感じですが、画像は IMG タグ、リンクは A タグです。
クリックすると sale.html に飛ぶ画像 button.gif の HTML はこんな感じになります。

<a href="sale.html">
    <img src="button.gif">
</a>

飛び先や画像を javascript で変えたいということであれば、こんな感じになります。

HTML

<a>
    <img id="kuji">     <!-- 目印に ID 属性をつけておく -->
</a>

javascript

    var img = document.getElementById("kuji");  // ID で IMG を取る
    img.src = "button.gif";  // 画像の URL を設定
    img.parentNode.href = "sale.html";  // リンク先の URL を設定
    /*
        ↑img.parentNode は、IMG を囲っている要素(親要素)を指す
    */
id:a-kuma3

補足を受けまして。

しかし張り付けた画像にリンクを付けることができていません。

以下の部分は「親要素」にリンクを設定するということでしょうか?

img.parentNode.href = "sale.html"; // リンク先の URL を設定
/*
↑img.parentNode は、IMG を囲っている要素(親要素)を指す
 */

親要素にリンクを指定するコードですが、リンクとして動作するのは A タグだけです。
href 属性を指定すればリンクになるというものではありません。
リンクにならないのは、A タグを書いていないからだと想像します。

2016/11/22 23:46:47
id:greengreengrass

a-kuma3さんありがとうございます。おっしゃる通りタグを抜かしていました。
として無事リンクしました!!。
「ぽけっとしすてむ」さん両者に導いていただき感謝です。

2016/11/23 06:13:05

その他の回答1件)

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

元のコードを見ないと何ともという感じですが、画像は IMG タグ、リンクは A タグです。
クリックすると sale.html に飛ぶ画像 button.gif の HTML はこんな感じになります。

<a href="sale.html">
    <img src="button.gif">
</a>

飛び先や画像を javascript で変えたいということであれば、こんな感じになります。

HTML

<a>
    <img id="kuji">     <!-- 目印に ID 属性をつけておく -->
</a>

javascript

    var img = document.getElementById("kuji");  // ID で IMG を取る
    img.src = "button.gif";  // 画像の URL を設定
    img.parentNode.href = "sale.html";  // リンク先の URL を設定
    /*
        ↑img.parentNode は、IMG を囲っている要素(親要素)を指す
    */
id:a-kuma3

補足を受けまして。

しかし張り付けた画像にリンクを付けることができていません。

以下の部分は「親要素」にリンクを設定するということでしょうか?

img.parentNode.href = "sale.html"; // リンク先の URL を設定
/*
↑img.parentNode は、IMG を囲っている要素(親要素)を指す
 */

親要素にリンクを指定するコードですが、リンクとして動作するのは A タグだけです。
href 属性を指定すればリンクになるというものではありません。
リンクにならないのは、A タグを書いていないからだと想像します。

2016/11/22 23:46:47
id:greengreengrass

a-kuma3さんありがとうございます。おっしゃる通りタグを抜かしていました。
として無事リンクしました!!。
「ぽけっとしすてむ」さん両者に導いていただき感謝です。

2016/11/23 06:13:05
id:psne No.2

回答回数605ベストアンサー獲得回数334

まずは、目的の結果をイメージしておきましょう。
今回は、画像を表示させるimgタグを、リンクを行うaタグで囲む状態が目的の結果になります。

<body>
	<a href="./sale.html">
		<img src="button.gif">
	</a>
</body>

最初に、JavaScriptで2つのタグを扱いやすくするために、idを付けます。

	<a href="" id="link-kuji">
		<img src="" id="kuji">
	</a>

準備が整いました。HTMLを目的の結果になるようにJavaScripを書いていきましょう。
最初に、2つのタグをidを利用して指定します。

	<a href="" id="link-kuji">
		<img src="" id="kuji">
	</a>
	<script>
		// imgタグをJavaScriptの形で指定する
		var kuji = document.getElementById("kuji");

		// aタグをJavaScriptの形で指定する
		var linkkuji = document.getElementById("link-kuji");
	</script>

画像の指定やリンクの指定など、属性が扱えるようになりました。

それぞれのタグに、画像、リンク先を設定します。

		// imgタグをJavaScriptの形で指定する
		var kuji = document.getElementById("kuji");

		// aタグをJavaScriptの形で指定する
		var linkkuji = document.getElementById("link-kuji");

		// 画像の場所をタグの要素に設定する
		kuji.src = "button.gif";

		// リンク先をタグの要素に設定する
		linkkuji.href = "./sale.html";

imgタグのsrc要素「kuji.src」にbutton.gifを、aタグのhref要素「linkkuji.href」に./sale.htmlを設定しました。
これで、JavaScriptを使って目的の結果を表示する事ができます。


全体では、このようになります。

<body>
	<a href="" id="link-kuji">
		<img src="" id="kuji">
	</a>
	<script>
		// imgタグをJavaScriptの形で指定する
		var kuji = document.getElementById("kuji");

		// aタグをJavaScriptの形で指定する
		var linkkuji = document.getElementById("link-kuji");

		// 画像の場所をタグの要素に設定する
		kuji.src = "button.gif";

		// リンク先をタグの要素に設定する
		linkkuji.href = "./sale.html";
	</script>
</body>


実際にブラウザで表示させると、このような結果になります。

<body>
	<a href="./sale.html" id="link-kuji">
		<img src="button.gif" id="kuji">
	</a>
	<script>
		// imgタグをJavaScriptの形で指定する
		var kuji = document.getElementById("kuji");

		// aタグをJavaScriptの形で指定する
		var linkkuji = document.getElementById("link-kuji");

		// 画像の場所をタグの要素に設定する
		kuji.src = "button.gif";

		// リンク先をタグの要素に設定する
		linkkuji.href = "./sale.html";
	</script>
</body>
id:psne

やりたいことは通常は(特別価格ではない)アイコンを表示させ
タイミング(ある方程式)によって特別価格のアイコンに変えsaleページにリンクさせる、

「ある方程式」をif文を利用して書き加えましょう。

2016/11/22 18:34:29
id:greengreengrass

a-kuma3さんありがとうございます。画像の貼り付けまでうまくできました。

しかし張り付けた画像にリンクを付けることができていません。

以下の部分は「親要素」にリンクを設定するということでしょうか?

img.parentNode.href = "sale.html"; // リンク先の URL を設定

/*

↑img.parentNode は、IMG を囲っている要素(親要素)を指す

*/

そして「ぽけっとしすてむ」さんの回答もありがとうございます。

やりたいことは通常は(特別価格ではない)アイコンを表示させ

タイミング(ある方程式)によって特別価格のアイコンに変えsaleページにリンクさせる、

ということです。

これにこだわらず、スマートな連携がはかれる解決があればご教示いただければ幸いです。

  • id:greengreengrass
    ぽけっとしすてむさん、早いレスポンス痛み入ります。
    方程式は作成しています。そしてその値は取得できています。(申しわけないですが開示すると特別タイミングがわかるので開示は無理です)値はa = myMess6;として取得できています。そしてa-kuma3さんのご教示で画像の貼り付けまではできました。
    教えていただきたいのはJAVAscriptファイルから、htmlページ上の新しく張り付けたい画像kuji.src = "button.gif"にjavascriptファイルからリンク付けが可能か否かになります。ご教示よろしくお願いいたします。
  • id:psne
    可能です。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません