◆20200806 osarai arrayとの奮闘
おさらい問題 array
ブラウザでマウスカーソルを合わせた際に小さい画像（001.jpg～003.jog）
が表示される状態だが、これを大きい画像（big001.jpg～003.jog）に表示
されるようにJS上で操作をすること
※HTML側は一切いじらない
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrayオブジェクト</title>
</head>
<body>
<div class="box">
<div class="inner">
<div class="stage">
<img id="bigImage" src="img/big001.jpg">
</div>
<div class="thumb">
<ul>
<li>
<img src="img/001.jpg" onmouseover="changeImg(this.src);">
</li>
<li>
<img src="img/002.jpg" onmouseover="changeImg(this.src);">
</li>
<li>
<img src="img/003.jpg" onmouseover="changeImg(this.src);">
</li>
</ul>
</div>
</div>
</div>
<script src="js/script01.js"></script>
</body>
</html>
---以下JSファイル---
ここから操作する
// 小さな画像にマウスカーソルがのったときに呼び出される
// 引数pathに画像のパス情報が渡されている
function changeImg(path) {
console.log('画像変更');
console.log(path.split('/'));
//画像にカーソルを合わせた時に出てくるファイルパスを/ごとに分割
// →部屋数が分かり、001.jpg～003.jpgの部屋位置が確定する。
var splitpath = path.split('/')
//分かりやすくするために宣言
console.log(splitpath.splice(11, 1, 'big' + splitpath[11]));
// 分割された部屋の内、001.jpg～003.jpgがある部屋（11＝最後の部屋）に 'big' + splitpath[11]
// を入れ替える。（001.jpg～003.jpgを消して'big'+001.jpg～003.jpgを加える）
var splitpath2 = splitpath
//長ったらしいから字数を短く分かりやすくするために宣言
console.log(splitpath2);//確認用
console.log(splitpath2.join('/'));
// 取っ払った/を復元
var newPath = splitpath2.join('/')
//big001.jpg～003.jpgに入れ替えたファイルパスnewPathが完成
console.log(newPath);//確認用
document.getElementById('bigImage').setAttribute('src', [newPath]);
//最後にマウスカーソルを合わせた時にbig001.jpg～003.jpgが表示されるように設定。
}
---------------
function changeImg(path)の{}外でconsole.log(path)を入力しても
画像の配列が出てくるわけではなく行き詰ったが、ブラウザでマウスカーソル
を合わせた時にconsole上でファイルパスが表示されたことをヒントにして
{ }内でファイルパスを分割、削除、追記の操作を施したらうまくいった。
引数pathに画像情報を載せている仕組みを理解するのに時間がかかった。
