質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 538

score 2

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

下記のコード紹介ページの3番(マスクを使ったスライダー 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で画像が4枚設定されておりますが、1つ目の

<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での指定記述は分からないため)

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

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

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

<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> 要素と確認できます。

2) 開発者コンソール 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 というページが書籍の目次に相当すると思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/09/12 20:12

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


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


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

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

    キャンセル

  • 2020/09/13 07:36

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

    キャンセル

  • 2020/09/13 17:05

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る