###前提・実現したいこと
前提:
画像をクリックすると埋め込まれた動画に切り替わるサイトを作成しました。
また、マウスオーバー、マウスアウトすると画像の詳細文が表示、非表示に切り替わるようにもなっています。
実現したいこと:
画像→動画に切り替えた要素が既にある状態で、別の要素をクリックすると動画であった要素が画像に戻るようにすること。(他の要素を切替のスイッチにしたい)
また、画像の数が増えても対応させたいと思っています。
###試したこと
//画像と動画の切替 の関数を以下のスクリプトにしました。
javascript
1//画像と動画の切替 2function change(num) { 3 return function(){ 4 var x = document.getElementsByTagName("iframe"); 5 for(var i = 0; i < x.length; ++i){ 6 x[i].style.display = "none"; 7} 8 document.getElementById("img" + num).style.display = "none"; 9 document.getElementById("movie" + num).style.display = "block"; 10 return false; 11 }; 12};
クリックするたびに、まずiframeタグを取得し、for文にて全ての動画をdisplay = "none"に書き換える。
その後、クリックした要素の個別のidの画像を取得、動画に切り替える、という流れを想定してつくりました。
問題点:
別の要素をクリックすると動画は非表示にはなるのですが、それで固定されてしまいます。。。
皆様には他の要素を動画⇔画像にするスイッチ機能を持ったスクリプトの記述をお教えいただければと存じます。
どうぞよろしくお願い致します。
###前提のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>他の要素との連携</title> 7 <style> 8 .item { 9 width: 25%; 10 float: left; 11 padding-bottom: 5%; 12 } 13 14 .item-box { 15 height: 200px; 16 width: 200px; 17 margin: auto; 18 background-color: #11D8B3; 19 border-radius: 5px; 20 } 21 22 #movie1, 23 #movie2{ 24 display: none; 25 } 26 27 .articles > div { 28 display: none; 29 font-size: 40px; 30 margin: auto; 31 float: left; 32 } 33 </style> 34</head> 35 36<body> 37 <!--画像と動画--> 38<div class="item"> 39 <div class="item-box"> 40 <div id="img1"><img src="img.jpeg" alt="img dog" width="200" height="200" alt=""></div> 41 <iframe id="movie1" width="200" height="200" src="https://www.youtube.com/embed/j5PLngd2WN0" allowfullscreen></iframe> 42 </div> 43</div> 44 45<div class="item"> 46 <div class="item-box"> 47 <div id="img2"><img src="img.jpeg" alt="img cat" width="200" height="200" alt=""></div> 48 <iframe id="movie2" width="200" height="200" src="https://www.youtube.com/embed/obTj1qvotdc" allowfullscreen></iframe> 49 </div> 50</div> 51 52<div class="articles"> 53 <!--ここから詳細文--> 54 <div id="article1">The term "domestic dog" is generally used for both domesticated and feral varieties. The English word dog comes from Middle English dogge, from Old English docga, a "powerful dog breed". 55 </div> 56 <div id="article2">ネコ(猫)は、狭義にはネコ目(食肉目)- ネコ亜目- ネコ科- ネコ亜科- ネコ属- ヤマネコ種- イエネコ亜種に分類される小型哺乳類であるイエネコ(家猫、学名:Felis silvestris catus)の通称である。 57 </div> 58</div> 59 60 <div class="articles"> 61 <!--ここから引用文--> 62 <div id="article1">The term "domestic dog" is generally used for both domesticated and feral varieties. The English word dog comes from Middle English dogge, from Old English docga, a "powerful dog breed". 63 </div> 64 <div id="article2">ネコ(猫)は、狭義にはネコ目(食肉目)- ネコ亜目- ネコ科- ネコ亜科- ネコ属- ヤマネコ種- イエネコ亜種に分類される小型哺乳類であるイエネコ(家猫、学名:Felis silvestris catus)の通称である。 65 </div> 66 </div> 67 68 69 <script type="text/javascript"> 70 //詳細の表示 71 function show(num) { 72 return function(){ 73 document.getElementsByClassName 74 document.getElementById("article" + num).style.display = "block"; 75 return false; 76 }; 77} 78 //詳細詳細の非表示 79function hide(num) { 80 return function(){ 81 document.getElementById("article" + num).style.display = "none"; 82 return false; 83 }; 84} 85//画像と動画の切替 86function change(num) { 87 return function(){ 88 document.getElementById("img" + num).style.display = "none"; 89 document.getElementById("movie" + num).style.display = "block"; 90 return false; 91 }; 92}; 93//イベントハンドラをまとめる関数 94window.onload=function(){ 95 var itemboxes = document.getElementsByClassName('item-box'); 96 for(var i = 0; i < itemboxes.length; i++){ 97 var num = i + 1; 98 var node; 99 // div 100 node = itemboxes[i].getElementsByTagName('div')[0]; 101 node.onclick=change(num); 102 // img 103 node = itemboxes[i].getElementsByTagName('img')[0]; 104 node.onmouseover=show(num); 105 node.onmouseout=hide(num); 106 // iframe 107 node = itemboxes[i].getElementsByTagName('iframe')[0]; 108 node.onmouseover=show(num); 109 node.onmouseout=hide(num); 110 } 111}; 112 </script> 113</body> 114 115</html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/23 06:02
2016/05/23 07:10
2016/05/23 07:25 編集