回答編集履歴

3 追記

AkitoshiManabe

AkitoshiManabe score 5349

2020/09/13 07:34  投稿
> ドリームウィーバーCS6を使用しています。
オーサリングソフトの画面は一般ユーザの目に留まることはありません。
必ず、ブラウザの開発者コンソール([F12])を併せて確認します。
ご質問のテストアドレス（``sample_code2.html``で示される）を開き、
1) 開発者コンソールの Elements タブで確認してみてください
スライド１つ分に相当する文書断片は以下のようになります
```html
<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 タブ**に以下のコードを入力してみてください。
```javascript
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](https://developer.mozilla.org/ja/docs/Web/JavaScript) というページが書籍の目次に相当すると思います。
2 追記

AkitoshiManabe

AkitoshiManabe score 5349

2020/09/12 13:36  投稿
> ドリームウィーバーCS6を使用しています。
オーサリングソフトの画面は一般ユーザの目に留まることはありません。
必ず、ブラウザの開発者コンソール([F12])を併せて確認します。
ご質問のテストアドレス（``sample_code2.html``で示される）を開き、
1) 開発者コンソールの Elements タブで確認してみてください
スライド１つ分に相当する文書断片は以下のようになります
```html
<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 タブ**に以下のコードを入力してみてください。
```javascript
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();
 })
});
```
alt 属性が正しく入力されている3枚のスライドについて、リンクを開きます。
> JavaScript初心者
短いコードですので、利用している内容をMDNで調べて何をやっているか読み解いてください。
短いコードですので、利用している内容を MDN で調べて何をやっているか読み解いてください。
追記）
JavaScriptが初めての場合、MDNの [JavaScript](https://developer.mozilla.org/ja/docs/Web/JavaScript) というページが書籍の目次に相当すると思います。
1 訂正

AkitoshiManabe

AkitoshiManabe score 5349

2020/09/10 18:31  投稿
> ドリームウィーバーCS6を使用しています。
オーサリングソフトの画面は一般ユーザの目に留まることはありません。
必ず、ブラウザの開発者コンソール([F12])を併せて確認します。
ご質問のテストアドレス（``sample_code2.html``で示される）を開き、
1) 開発者コンソールの Elements タブで確認してみてください
```html
<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 タブ**に以下のコードを入力してみてください。
```javascript
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", ()=>{  
 elm.parentNode.addEventListener("click", ()=>{
  // <a> を文書に配備せずに動的クリックする荒業（悪い例かもしれません）
   Object.assign( document.createElement("a"), {
     href:links[idx],
     target:"_blanc"
     target:"_blank"
   }).click();
 
 })
});
```
alt 属性が正しく入力されている3枚のスライドについて、リンクを開きます。
> JavaScript初心者
短いコードですので、利用している内容をMDNで調べて何をやっているか読み解いてください。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る