###実現したいこと
1,画像をクリックすると埋め込まれた動画に切り替わる。
2,画像と動画にmouseover mouseoutすると詳細文が表示される。
3,管理がしやすい、きれいなcoding(記事の増減時など)
###試したこと
function を以下三つ用意し、各イベントハンドラと対応させました。
show(詳細文を表示する)→onmouseover
hide(詳細文を非表示にする)→onmouseout
change(画像と動画を切替える)→onclick
切替え操作はcssをdisplay:none;⇄block;にて書き換えることによって行っています。
一応、1,2,の機能を実現できたのですが、思いついた機能を付け加えただけのcodingになっております。
それゆえ記事を増やす場合に必要な記述が多くなっているのが現状です。
皆様には、3の”管理がしやすい、きれいなcoding”についてアドバイスをいただければ幸いです。(添付したcodeと全く異なる構造でも嬉しいです)
どうぞよろしくお願いします。
###該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>test</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" onclick="change(1)"><img onmouseover="show(1)" onmouseout="hide(1)" src="img.jpeg" alt="img dog" width="200" height="200" alt=""></div> 41 <iframe id="movie1" onmouseover="show(1)" onmouseout="hide(1)" 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" onclick="change(2)"><img onmouseover="show(2)" onmouseout="hide(2)" src="img.jpeg" alt="img cat" width="200" height="200" alt=""></div> 48 <iframe id="movie2" onmouseover="show(2)" onmouseout="hide(2)" 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 61 <script type="text/javascript"> 62 function show(num) { 63 document.getElementById("article" + num).style.display = "block"; 64 return false; 65 } 66 67 function hide(num) { 68 document.getElementById("article" + num).style.display = "none"; 69 return false; 70 } 71 72 function change(num) { 73 document.getElementById("img" + num).style.display = "none"; 74 document.getElementById("movie" + num).style.display = "block"; 75 return false; 76 }; 77 </script> 78</body> 79 80</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/18 06:33