カルーセルスライダーの画像にリンクを付けたい

Question

JavaScriptを使用してカルーセルスライダーの画像にサブページに飛ぶリンクを付けたい。

下記のコード紹介ページの３番（マスクを使ったスライダー Image Slider with Masking Effect）を実装しようとしています。
https://lab.sonicmoov.com/markup/css/image-slider/#sec1

ドリームウィーバーCS6を使用しています。JavaScript初心者です。
HTML、CSS、JavaScriptを同一文書内にコピペをすると、くの字の矢印以外は表示されました。
そのテストアドレスは以下です。
http://kazan.bakufu.org/sample_code2.html

くの字矢印の、＜ と ＞ はコードが抜けているのか表示されませんでした。（画像をスライドするためのクリック部分は反応するのでページ移動はできます。ただ、矢印が見えないだけ。）

しかし質問は画像に別ページに遷移するためのURLをつけたいのです。

###やってみたこと
・HTMLで画像が４枚設定されておりますが、１つ目の

<figure class="slide"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/img5.jpeg" alt="Sky"/>

の部分を、

<figure class="slide"> <a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/img5.jpeg" alt="Sky"/></a>

としてもリンクが形成されずマウスポインタは矢印マークのままでした。

そこでいろいろ調べて下記ページのように、
https://q.hatena.ne.jp/1479782412

<figure class="slide"><a><img id="fileone"/></a>

とHTMLで書き、同一ページのJavaScript内に、

var img = document.getElementById("fileone"); // ID で IMG を取る
img.src = "img/three.png"; // 画像の URL を設定
img.parentNode.href = "https://www.yahoo.co.jp/";

と書きました。fileoneはID名です。
画像であるthree.pngは表示されましたが、ポインタがやはり矢印から手のマークに変わらず、クリックしても反応なし。リンクが付きません。

他に、下記ページを参考に、JavaScriptの記述を
https://tokkan.net/javascript/location.html

document.getElementById( "fileone" ).onclick = function(){
document.location = "https://www.yahoo.co.jp/";
};

と変えてみましたがやはりリンクは付きませんでした。
すぐ上のJavaScriptの場合のHTML記述は

<figure class="slide"><a><img src="img/three.png" id="fileone"/></a>

として画像指定はHTMLでしました。（JavaScriptでの指定記述は分からないため）

コード間違いもしくは不足がお分かりになる方、宜しくお願いします。

Answer 1

ドリームウィーバーCS6を使用しています。

オーサリングソフトの画面は一般ユーザの目に留まることはありません。
必ず、ブラウザの開発者コンソール([F12])を併せて確認します。

ご質問のテストアドレス（sample_code2.htmlで示される）を開き、

1. 開発者コンソールの Elements タブで確認してみてください

スライド１つ分に相当する文書断片は以下のようになります

<figure class="slide">
  <img src="https://examples.com/path/to/image.jpeg" alt="Rain">
  <figcaption>
    <div class="title">Rain</div>
    <div class="author">Wilson Lau</div>
  </figcaption>
</figure>

その他、<img> はエンドユーザが視覚で捉える領域から右下にはみ出ており、
マウスイベントを視覚どおりに適用できそうな要素は <figure> 要素と確認できます。

1. 開発者コンソール Console タブに以下のコードを入力してみてください。

var links = [
  "https://www.yahoo.co.jp/",
  "https://www.google.co.jp/",
  "https://teratail.com/"
];

// スプレッド構文 + forEach() の例
[...document.querySelectorAll("figure.slide img[alt]")].forEach( (elm, idx) => {
  // elm == <img>, elm.parentNode == <figure>
  elm.parentNode.addEventListener("click", ()=>{

    // <a> を文書に配備せずに動的クリックする荒業（悪い例かもしれません）
    Object.assign( document.createElement("a"), {
      href:links[idx],
      target:"_blank"
    }).click();

  })

});
/*
// for 文での例
let figs = document.querySelectorAll("figure.slide img[alt]");
for ( let idx = 0; idx<figs.length; ++idx ) {
  let elm = figs[idx];
  // elm == <img>, elm.parentNode == <figure>
  elm.parentNode.addEventListener("click", function(){

    // <a> を文書に配備せずに動的クリックする荒業（悪い例かもしれません）
    let a = document.createElement("a");
    a.href = links[idx];
    a.target = "_blank";
    a..click();

  })

};
 */

alt 属性が正しく入力されている3枚のスライドについて、リンクを開きます。

JavaScript初心者

短いコードですので、利用している内容を MDN で調べて何をやっているか読み解いてください。

追記）
JavaScriptが初めての場合、MDNの JavaScript というページが書籍の目次に相当すると思います。

Comments

[kazan]

ご回答ありがとうございます。

開発者コンソールとはChromeでの操作ですね？
やったことはありませんでしたがChromeを立ち上げF12を押すと右側にツリー（ほぼ畳まれた状態）で表示されました。三角矢印クリックで展開していき、
<figure class="slide">
の部分をオンマウスすると、左側の視覚反映側でも連動して画像範囲が色付けされました。

JavaScriptソースありがとうございます。
上に挙げていただいたまんまのソースをConsoleに入れると、ポインタは矢印のままでしたが画像クリックで飛べました。
ドリームウィーバーCS6を開き、scriptコード内に、そのソースで終了を意味する　});　の一行をのぞいてコピペするとシンタックスエラーが出てしまいました。

・コード挿入前のサンプルページ
http://kazan.bakufu.org/sample_code2.html
・コード挿入後のサンプルページ（ジャンプできず。何が間違っている？）
http://kazan.bakufu.org/sample_code2_v2.html
・ドリームウィーバーCS6でシンタックスエラー出た状態の画像
http://kazan.bakufu.org/error.PNG
※PNGは大文字です。上のアドレスのままURLボックスに入れてください。

また、画像を切替る右下の
<div class="slider-control">
にくの字が表示されない部分についてはいかがでしょうか？
紹介元ページ（https://lab.sonicmoov.com/markup/css/image-slider/）では表示されていますがコピペして作ったサンプルページではそこだけ表示されませんでした。

急いではおりません。宜しくお願いします。

[AkitoshiManabe]

> そのソースで終了を意味する　});　の一行をのぞいてコピペする
sliderControl （<div class="slider-control">）に適用したイベントリスナの中は弄ってはいけません。
そのまま。</script> の直前にコピペすればいいはず。
くの字は、「画像にリンクを付ける」という本題と外れているので回答を用意できていませんが、CSSによる背景画像では？ 「Elements タブ」の右に適用されるスタイルのプロパティを確認できるツールが備わっています。

[kazan]

返信ありがとうございます。

うーん、やっぱり出てしまいます。

サンプルページのscript部分のソースは以下なのですが、
----------
<script>

// buttons
var sliderControl = document.querySelector(".slider-control");

// slides informations
var slides = document.querySelectorAll(".slide"),
slidesLength = slides.length;

// slides array
var slidesArr = [].slice.call(slides);//おそらく配列風オブジェクトを指定し、それはslides風にという記述ではないかと。

// reverse array sorting
slidesArr = slidesArr.reverse();

// slide current
var slideCurrent = 0;

sliderControl.addEventListener("click", function(e){
target = e.target;

// get next button
if(target.classList.contains("next")){

next = e.target,
prev = next.previousElementSibling,
nextSlide = slidesArr[slideCurrent + 1],
slide = slidesArr[slideCurrent];

slide.classList.add("slide-on");
slide.classList.remove("text-on");
nextSlide.classList.add("text-on");

slideCurrent += 1;

if(slideCurrent > 0) {
prev.classList.remove("disabled");
}

if(slideCurrent === slidesLength - 1){
next.classList.add("disabled");
}
}

// get prev button
if(target.classList.contains("prev")){

slideCurrent -= 1;

prev = e.target,
next = prev.nextElementSibling,
prevSlide = slidesArr[slideCurrent + 1],
slide = slidesArr[slideCurrent];

prevSlide.classList.remove("text-on");
slide.classList.remove("slide-on");
slide.classList.add("text-on");

if(slideCurrent === slidesLength - 2){
next.classList.remove("disabled");
}

if(slideCurrent === 0){
prev.classList.add("disabled");
}

}

document.getElementById( "fileone" ).onclick = function(){//←ここから三行が追加したJS。IDタグのfileoneをクリックでヤフーにジャンプの意味のつもり
document.location = "https://www.yahoo.co.jp/";
};

});

</script>
----------

ここの一番下にある自分で書いてみたコードの３行である、
document.getElementById( "fileone" ).onclick = function(){//←ここから三行が追加したJS。IDタグのfileoneをクリックでヤフーにジャンプの意味のつもり
document.location = "https://www.yahoo.co.jp/";
};
は不要だと思うので、これを消して、その場所にそのままいただいたソースを書くと以下になりました。

----------
<script>

// buttons
var sliderControl = document.querySelector(".slider-control");

// slides informations
var slides = document.querySelectorAll(".slide"),
slidesLength = slides.length;

// slides array
var slidesArr = [].slice.call(slides);//おそらく配列風オブジェクトを指定し、それはslides風にという記述ではないかと。

// reverse array sorting
slidesArr = slidesArr.reverse();

// slide current
var slideCurrent = 0;

sliderControl.addEventListener("click", function(e){
target = e.target;

// get next button
if(target.classList.contains("next")){

next = e.target,
prev = next.previousElementSibling,
nextSlide = slidesArr[slideCurrent + 1],
slide = slidesArr[slideCurrent];

slide.classList.add("slide-on");
slide.classList.remove("text-on");
nextSlide.classList.add("text-on");

slideCurrent += 1;

if(slideCurrent > 0) {
prev.classList.remove("disabled");
}

if(slideCurrent === slidesLength - 1){
next.classList.add("disabled");
}
}

// get prev button
if(target.classList.contains("prev")){

slideCurrent -= 1;

prev = e.target,
next = prev.nextElementSibling,
prevSlide = slidesArr[slideCurrent + 1],
slide = slidesArr[slideCurrent];

prevSlide.classList.remove("text-on");
slide.classList.remove("slide-on");
slide.classList.add("text-on");

if(slideCurrent === slidesLength - 2){
next.classList.remove("disabled");
}

if(slideCurrent === 0){
prev.classList.add("disabled");
}

}

var links = [
"https://www.yahoo.co.jp/",
"https://www.google.co.jp/",
"https://teratail.com/"
];

[...document.querySelectorAll("figure.slide img[alt]")].forEach( (elm, idx) => {
// elm == <img>, elm.parentNode == <figure>
elm.parentNode.addEventListener("click", ()=>{

// <a> を文書に配備せずに動的クリックする荒業（悪い例かもしれません）
Object.assign( document.createElement("a"), {
href:links[idx],
target:"_blank"
}).click();

})

});

});

</script>
----------

この状態だとシンタックスエラーが出てしまいます。
JavaScriptの終了を意味する　});　がダブってると思うので、この行を１つ削除してもシンタックスエラーが出てしまいます。
お手数おかけしますが、再度ご指摘お願いします。

[AkitoshiManabe]

> });　がダブってると思う
逆です。sliderControl.addEventListener() を正しく閉じていません。
/* omitted */
}); // <--
var links = [
/* omitted */

JavaScript はプログラム ですので、「思う」ではなく、<script> </script>の内部を最初から一字一句確認するくらいでなければなりません。インデント等で桁揃えし読みやすくするのはこのためです。

[kazan]

返信ありがとうございます。

最初にいただいたソースの上に
}); // <--
を追加するという意味ですね？

次のようにしてみたのですが、シンタックスエラーが出てしまいます。
・シンタックスエラーキャプチャ
http://kazan.bakufu.org/error2.PNG
・}); // <--　を追加したサンプルページ（シンタックスエラー）
http://kazan.bakufu.org/sample_code2_v3.html

}); // <--　の追加記載場所は以下で正しかったでしょうか？お手数ですがお願い致します。
----------
（省略）
if(slideCurrent === 0){
prev.classList.add("disabled");
}

}
}); // <--
var links = [
"https://www.yahoo.co.jp/",
"https://www.google.co.jp/",
"https://teratail.com/"
];

[...document.querySelectorAll("figure.slide img[alt]")].forEach( (elm, idx) => {
// elm == <img>, elm.parentNode == <figure>
elm.parentNode.addEventListener("click", ()=>{

// <a> を文書に配備せずに動的クリックする荒業（悪い例かもしれません）
Object.assign( document.createElement("a"), {
href:links[idx],
target:"_blank"
}).click();

})

});

});

</script>
----------

[AkitoshiManabe]

エラー位置を特定しましょう。エラーメッセージ右に「sample_code2_v3.html:283」とありますので、その行の }); を削除します。
「sliderControl （<div class="slider-control">）に適用したイベントリスナの中」を弄ってしまった（リスナ内部にコードを追加した）のがエラー原因のようです。
100行程度のコードで躓いているので、回答欄に投稿したMDNのページは時間を作って読み進めてください。また、「リファレンス」セクションからジャンプすると「索引」のように使えるはずです。

[kazan]

返信ありがとうございます。

</script>のすぐ上の　});　を削除したところ、Chromeでもファイアフォックスでもリンクへジャンプすることができました。
http://kazan.bakufu.org/sample_code2_v4.html

http://kazan.bakufu.org/sample_code2_v3.html
で出ていたChromeのF12でのエラーは出なくなりました。
ただCS６だとシンタックスエラーが以前でています。Chromeで出ないならいいのかな…？？
・シンタックスエラーキャプチャ
http://kazan.bakufu.org/error3.PNG

私の知識ではご指摘を完全には理解できませんでしたが、何度もお付き合いいただきありがとうございました。

[AkitoshiManabe]

> ただCS６だとシンタックスエラーが以前でています
CS6「IEにも対応せよ」とのことでしょうね（回答に追記しました）
開発者コンソール や MDN のページは今後も必須になりますので日々探求を続けてください。

[kazan]

いただいたソースを解読するところまではなんとか頑張ろうと思います。
ありがとうございました。