<html> <head> <meta charset="utf-8"> <!--meta charset="shift_jis"--> <!--meta name="viewport" content="width=device-width"--> <title>田植えの終わった大山千枚田</title> <style> #win {position:absolute;top:0;left:0;width:100%;height:100vh;background:#000000;z-index:1;} #win img{position:absolute;top:0;bottom:0;left:0;right:0;;outline: 10px solid #FFFFFF;margin:auto} #sum {position:absolute;top:0;left:0;width:100%;z-index:2;background:#000000;z-index:2;display:inline;} #sum img{width:320px;height:213px;outline: 10px solid #FFFFFF;}//cursor:pointer;} </style> <script> /*拡大表示*/ function op(s){ jpg_no=s; document.getElementById("syasin").src=dt[jpg_no]+".jpg"; document.getElementById("win").style.zIndex=3; document.getElementById("win").style.top=window.scrollY; document.getElementById("sum").style.display="none"; } /*次へ*/ function next(){ ss=(jpg_no+1)%n; op(ss); } /*閉じる*/ function cls(){ document.getElementById("sum").style.display="inline"; document.getElementById("win").style.zIndex=1; } </script> </head> <body style="margin:0"> <center> <!--div id="win" onClick="cls()" onContextmenu="next();return false;"--> <div id="win" onClick="cls();" onContextmenu="next();return false;" onMousewheel="return false;" onTouchstart="tim_on();return false;" onTouchend="tim_cls();return false;" > <img id="syasin" src="" title="左=閉る/右=次へ"> </div> <div id="sum" > <table align="center"> <tr> <th> <b><font size="5" color="#ffffff">田植えの終わった大山千枚田</font></b><br><br> <b><i><u><font size="3" color="#ffffff"> 千葉県指定名勝の「鴨川大山千枚田」</font></u></i></b><br><br> </th></tr> <tr><td> <b><i><u><font size="3" color="#ffffff"> 総面積約4haもの広い急傾斜地に、階段のように大小375枚の田んぼが連なる棚田は、<br> 今では珍しくなった日本の故郷を感じられます。</font></b><br> </font></u></i></b><br> </td> </tr> </table> <script> //写真ファイル名 拡張子は「.jpg」のこと//////////// jpg_dt="01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16"; xn=2;//横並び数 //////////////////////////////////////////////////// dt=jpg_dt.split(","); n=dt.length; //サムネール for(i=0;i<n;i++){ dd=dt[i]+'.jpg'; document.write('<img src="',dd,'" onClick="op(',i,');" onContextmenu="return false;" title="拡大">'); if(i%xn==1){document.write('<br>');} } </script> <br> メモ帳でタグ書きしたHTML </div> </center> </body> </html>