読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

【javascript】ボタンごとに別ウィンドウで違う画像を表示【Todays code】

Javascript

それぞれのパンダをクリックすると新しいウィンドウで大きい画像が表示されます。

f:id:p_and_a_fam:20170318002739p:plain
●Demo

HTML(top page)

<!DCOTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../style.css">
<script type="text/javascript"src="../script.js"></script>
</head>
<body Onload="view();">
<p>nihao</p>
<div id="img"></div>
<!--windowを閉じる-->
<p><button onClick="window.close();">閉じる</button></p>
</body>
</html>

HTML(new window)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charaset="UTF-8">
<title>otherwindow</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p>click and Expand panda.</p>
<div class="box img1" onClick="img(1)"></div>
<div class="box img2" onClick="img(2)"></div>
<div class="box img3" onClick="img(3)"></div>
</div>
</body>
</html>

css

@charset "utf-8";
.container{
  width:620px;
  margin:0 auto;
}
.box{
  float:left;
  cursor:pointer;
  border:2px solid #aaa;
  box-sizing:border-box;
  height:200px;
  width:200px;
}
.box+.box{
  margin-left:10px;
}
.img1{
  background:url("img.jpg") no-repeat center center/cover #ff8888;
  background-blend-mode:screen;
 }
.img2{
  background:url("img.jpg") no-repeat center center/cover #88ff88;
  background-blend-mode:screen;
 }
.img3{
  background:url("img.jpg") no-repeat center center/cover #8888ff;
  background-blend-mode:screen;
 }
 .img1:hover,.img2:hover,.img3:hover{
  opacity:0.7;
 }
p{
  text-align:center;
 }
 button{
   margin:0 auto;
 }
#img{
  text-align:center;
  padding-bottom:20px;
}

javascript

function img(x){
/*viewerフォルダ内のindex.htmlの後ろにno=x(引数)をつけている*/
var viewer="./viewer/index.html?no="+x;
/*新しくwindowを開く(windowの引数は3つ)*/
window.open(viewer,"viwer","width=600,height=550,menubar=no,toolbar=no,scrollbars=no");
}
/*new window*/
function view(){
  /*urlの後ろの?以降を抽出*/
  var GET_OP=location.search;
  /*GET_OPで取得した値を=の前後で分ける。配列に格納される。*/ 
  GET_OP=GET_OP.substr(1);
  var AR_OP=GET_OP.split("=");
  /*AR_OPの2番目、つまり=の後ろの値→1を指定。*/
  var IMG_NO=AR_OP[1];
  /*変数IMG_NAMEにimgタグを書き出す値を入れる*/
  var IMG_NAME='<img src="../img0'+IMG_NO+'.jpg" width="400px" class="view_img">';
  /*IMG_NAMEを書き出す。*/ document.getElementById("img").innerHTML=IMG_NAME;
}