index.htmlにJAVAScriptファイルを挿入しJAVAScriptファイルで画像を貼り付けています。document.kuji.src = "button.gif";
この画像のリンク(同じフォルダーのsale.html)を指定するにはどのような方法があるでしょうか?
ちなみに同じJAVAScriptファイルにdocument.links.kuji.href = "sale.html";ではだめでした。
元のコードを見ないと何ともという感じですが、画像は IMG タグ、リンクは A タグです。
クリックすると sale.html に飛ぶ画像 button.gif の HTML はこんな感じになります。
<a href="sale.html"> <img src="button.gif"> </a>
飛び先や画像を javascript で変えたいということであれば、こんな感じになります。
<a> <img id="kuji"> <!-- 目印に ID 属性をつけておく --> </a>
var img = document.getElementById("kuji"); // ID で IMG を取る img.src = "button.gif"; // 画像の URL を設定 img.parentNode.href = "sale.html"; // リンク先の URL を設定 /* ↑img.parentNode は、IMG を囲っている要素(親要素)を指す */
元のコードを見ないと何ともという感じですが、画像は IMG タグ、リンクは A タグです。
クリックすると sale.html に飛ぶ画像 button.gif の HTML はこんな感じになります。
<a href="sale.html"> <img src="button.gif"> </a>
飛び先や画像を javascript で変えたいということであれば、こんな感じになります。
<a> <img id="kuji"> <!-- 目印に ID 属性をつけておく --> </a>
var img = document.getElementById("kuji"); // ID で IMG を取る img.src = "button.gif"; // 画像の URL を設定 img.parentNode.href = "sale.html"; // リンク先の URL を設定 /* ↑img.parentNode は、IMG を囲っている要素(親要素)を指す */
補足を受けまして。
しかし張り付けた画像にリンクを付けることができていません。
以下の部分は「親要素」にリンクを設定するということでしょうか?img.parentNode.href = "sale.html"; // リンク先の URL を設定 /* ↑img.parentNode は、IMG を囲っている要素(親要素)を指す */
親要素にリンクを指定するコードですが、リンクとして動作するのは A タグだけです。
href 属性を指定すればリンクになるというものではありません。
リンクにならないのは、A タグを書いていないからだと想像します。
a-kuma3さんありがとうございます。おっしゃる通りタグを抜かしていました。として無事リンクしました!!。
「ぽけっとしすてむ」さん両者に導いていただき感謝です。
まずは、目的の結果をイメージしておきましょう。
今回は、画像を表示させる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>
やりたいことは通常は(特別価格ではない)アイコンを表示させ
タイミング(ある方程式)によって特別価格のアイコンに変えsaleページにリンクさせる、
「ある方程式」をif文を利用して書き加えましょう。
a-kuma3さんありがとうございます。画像の貼り付けまでうまくできました。
しかし張り付けた画像にリンクを付けることができていません。
以下の部分は「親要素」にリンクを設定するということでしょうか?
img.parentNode.href = "sale.html"; // リンク先の URL を設定
/*
↑img.parentNode は、IMG を囲っている要素(親要素)を指す
*/
そして「ぽけっとしすてむ」さんの回答もありがとうございます。
やりたいことは通常は(特別価格ではない)アイコンを表示させ
タイミング(ある方程式)によって特別価格のアイコンに変えsaleページにリンクさせる、
ということです。
これにこだわらず、スマートな連携がはかれる解決があればご教示いただければ幸いです。
補足を受けまして。
親要素にリンクを指定するコードですが、リンクとして動作するのは A タグだけです。
2016/11/22 23:46:47href 属性を指定すればリンクになるというものではありません。
リンクにならないのは、A タグを書いていないからだと想像します。
a-kuma3さんありがとうございます。おっしゃる通りタグを抜かしていました。
として無事リンクしました!!。
2016/11/23 06:13:05「ぽけっとしすてむ」さん両者に導いていただき感謝です。